-
Notifications
You must be signed in to change notification settings - Fork 1
Theme creation tutorial
A theme consists of three main files (CSS, HTML and javascript). It also includes some module specific HTML templates.
First, create your theme a folder in the theme directory. The name of this folder is effectively the name of your theme, and you will reference this folder name in the config file to tell the site which theme to load. If your theme has any embedded images it is customary to create an img folder inside the theme. You may create similar folders for other kinds of theme related resources.
All themes need a base template file. This has to be called yourtheme'sname'.html It might be easiest to copy an example from one of the other themes and edit it from there. See the Full HTML template reference for further details.
The CSS file needs to be called yourtheme'sname.css. You can start from scratch, but it might be easier to copy and modify an existing themes CSS file. BlockPress supports colour palettes for its themes, which are stored separately and defined in their own CSS files. If you want your theme to be compatible with the existing palettes, do not include colour specifications in your CSS.
The javascript file needs to be called yourtheme'sname.js. You only need to create this file if you are going to add your own scripts to the theme.
Many of BlockPress themes include additional module specific files that overwrite the module templates. These need to have the same names as the default templates but they have to be stored in your own theme folder. You can find the default templates in the 'module' folder. Currently, BlockPress has only one module for Steem. The Steem module templets include the following: steem-profile.html, steem-posts.html and steem-post.html and steem-comments.html. The easiest way is to copy them into your theme's folder and edit their contents.
Your html template will be used to replace the contents of the HTML body tag on the page. Various reserved blockpress id values mark not just standard theme elements, but also where javascript can modify contents. These include: