Convert Static HTML Template into SilverStripe Theme

In this tutorial we will learn how to migrate a simple static HTML template into a SilverStripe theme. I am assuming that you are already aware of SilverStripe CMS theme directory structure and the pre-requisites.

This tutorial will help all designers and programmers when they receive a simple html theme and they are required to integrate that as a SilverStripe theme.

First check to be done is whenever you want to integrate simple static HTML theme, then follow the same pattern as silverstripe theme structure like css, js etc., this will help a lot during migration.

Convert Static HTML Template into SilverStripe Theme

Step 1 : Setup “theme_name” directory

First go to the silverstripe root directory and you will find a directory name “themes”. It contains all the themes that are installed in silverstripe cms. So the next task is to create our theme’s directory.

Here’s a default theme folder structure that looks like of any SilverStripe CMS theme

Now reload your url and you should see that template is loaded with contents but js and css is not applied properly. Copy all static static template resources into silverstripe theme as below process.

Copy From

Paste To

themes/MyTheme/temp/css

themes/MyTheme/css

themes/MyTheme/temp/js

themes/MyTheme/javascript

themes/MyTheme/temp/images

themes/MyTheme/images

themes/MyTheme/temp/fonts

themes/MyTheme/fonts

So we are done with setting up theme folder structure but still in browser display, css and js is not applied properly. For that check Page.ss file over there add css path as below.

1

&lt;ahref="css/style.css"rel="stylesheet"type="text/css"/&gt;

Now since we identified that css path was not correct so first we have to update the paths of all css, js and images href in Page.ss file. As we have placed all css, js and images inside our theme structure. Replace path as following for all the files loaded in Page.ss

Replace From

Replace To

css/style.css

themes/MyTheme/css/style.css

js/script.js

themes/MyTheme/javascript/script.js

images/logo.png

themes/MyTheme/images/logo.png

So now reload your page and you should see all css and js are now applied to your template.

In silverstripe, $ThemeDir is a variable that represents current applied theme path so we can replace path as below for all css, js, and images href in Page.ss, because hard-coded content are always required to be updated everytime whenever needed.

Replace From

Replace To

themes/MyTheme/css/style.css

$ThemeDir/css/style.css

themes/MyTheme/javascript/script.js

$ThemeDir/javascript/script.js

themes/MyTheme/images/logo.png

$ThemeDir/images/logo.png

So again refresh your page and you will find theme is applied successfully with all css , js and images.

With this, we have successfully migrated a static HTML template into a silverstripe theme. Hope that was pretty easy to migrate the template into a theme. 🙂