Customising a Theme

How to use sub themes to modify a theme without actually modifying it.

Why? Maybe you've set up a series of websites for a company, three site and the theme is almost the same on each one, but not quite. You could copy and modify the theme three times, but it would be better to keep the main theme intact, and have a sub-theme to customise it for your different sites.

Sub Themes

Sub themes are a feature of Silvestripe which aren't very well promoted. They can be used to theme a module - such as the blog module, but that can also be used to customise your main theme. This is what Silverstripe have to say:

If you have a theme called mytheme_forum, it is considered to be a 'subtheme' of the mytheme theme. This lets module developers release extensions to popular themes that will let their module work with that theme.
A subtheme overrides the files in the module. So for instance, if you have the forum setup instead of editing the files within the forum/ module you would create a themes/yourtheme_forum/ folder.

However, there is more to is that that! The word after the underscore refers to a 'page type', and this page type doesn't have to be a module. In most situations, you will probably have a page type called 'page' which in turn, all your other pages are based on.

myTheme_page

For this site, I'm using the theme '3elements'. I wanted to add a few extra styles, and a few extra page types.

• Create a new folder, named 'myTheme_page' (of course, myTheme should say what ever your current theme is)
• Create a folder for templates and css
• In the css folder, create 'page.css'
• In the template folder, create a Layout folder, and take a copy of Page.ss  from the Layout folder in your main theme.

You'll be modifying the Layout/Page.ss file, and creating additional styles

Page.ss

You can make changes to Page.ss, and simply upload this file. Silverstripe will 'just find' this new template (flush your template chache by adding ?flush=all to the end of your URL.

page.css

Normally, the page controller (mysite/code/page.php) will attached three CSS files: layout, typography, and form. If we put 'layout.css' in our sub theme folder, it will override the original. This might work for you, but we probably don't want to replace it, just add to it.

We can do this by telling the page controller to attach one more CSS style sheet - 'page'.

public function init() {
        parent::init();

        Requirements::themedCSS('layout'); 
        Requirements::themedCSS('typography'); 
        Requirements::themedCSS('form'); 
        
        Requirements::themedCSS('page');        
    }

This 'page.css', stored in your sub folder will contain any extra styling you want.