Theme creation tutorial

A theme consists of three main files (CSS, HTML and javascript). It also includes some module specific HTML templates.

Create your theme folder and core files.

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.

Create the HTML template file.

All themes need a base template file. This has to be called yourtheme.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.

Create the CSS file.

The CSS file needs to be called yourtheme.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.

Javascript file

The javascript file needs to be called yourtheme.js. You only need to create this file if you are going to add your own scripts to the theme.

Module templates files

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, only the steem module uses templates. These include steem-profile.html, steem-posts.html, steem-post.html and steem-comments.html. The easiest way is to copy them into your theme's folder and edit their contents.

Implementing the palettes

If you are going to use BlockPress colour palettes you will need to assign generic classes to html elements in your theme. For example, the enclosure classes define background, font, border and box shadow colours of the element they are assigned to. You can experiment with them until you get the desired look. Perhaps you will want to have a go at creating your own palette. You can follow Palette creation tutorial to do so.

Full HTML template reference

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:

• sitetitle
• tagline
• menuArea
• contentArea

Back to Styling