How to create your own theme for Silverstripe 3.1

In this tutorial I will teach you how to make your own custom Silverstripe theme using a premade responsive theme.

  1. For that we need the html5 theme download from the website above site. Download the html5 responsive theme from link and open in your computer file explorer.
  2. Now lets add the name to theme so that we can put the files to right place under our theme folder. I name the theme “Orange” because the initializr theme color are orange.
  3. in your silverstripe installation folder find folder named themes and open it add the folder named Orange
  4. Open Orange folder and add folders named css , js , img and templates in  it.
  5. now upload from initializr theme the css folder files to css folder and js files to js folder
  6. open the index.html file to edit the code use the code {$ThemeDir}/ for js addresses so it adds the themes/Orange/ pathway after you have added the in config.yml for css you can use code:
    <% require themedCSS('main') %>
    <% require themedCSS('normalize') %>
    <% require themedCSS('normalize.min') %>
  7. Also for header we use the code:
    <% include header %>
  8. For footer <% include footer %> and in the part we want the content of page we use $Layout
  9. After we have edited the index.html file it will look like this. Save it to folder themes/Orange/templates and use the filename
    <!doctype html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="$ContentLocale"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="$ContentLocale"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9" lang="$ContentLocale"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="$ContentLocale"> <!--<![endif]-->
    <!--[if !IE]><!-->
    <html lang="$ContentLocale">
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <% base_tag %>
    		<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> » $SiteConfig.Title</title>
    		<meta charset="utf-8">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<!--[if lt IE 9]>
    		<script src="//"></script>
           	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    		<% require themedCSS('main') %>
            <% require themedCSS('normalize') %>
            <script src="{$ThemeDir}/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
        <% include header %>
        <% include footer %>
    	<script src="//"></script>
    	<script>window.jQuery || document.write('<script src="{$ThemeDir}/js/vendor/jquery-1.11.2.js"><\/script>')</script>
    	<script src="{$ThemeDir}/js/main.js"></script>
  10.  Because we used code include code for header and footer we add the Includes folder inside the templates folder also we add the Layout folder.
  11. For Header we add file named under Includes folder with content with code
    <div class="header-container">
    <header class="wrapper clearfix">
    <h1 class="title">h1.title</h1>
    <% include Navigation %>
  12. As you see in code i added the Navigation also as included file so we add file named also to the Includes folder with code:
    <% loop $Menu(1) %>
    <li class="$LinkingMode">
    <a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
    <% end_loop %>
  13. And last the includes we add are and
  14. Add the with code:
    <div class="footer-container">
    <footer class="wrapper">
    //here you can add the content for footer if you use the custom siteconfig you can add anything here like email, company name etc
  15. Add the with code:
    <aside class="sidebar unit size1of4">
    <% if $Menu(2) %>
    <nav class="secondary">
    <% with $Level(1) %>
    <% include SidebarMenu %>
    <% end_with %>
    <% end_if %>
  16. I added the SidebarMenu because then I can add whatever deep menu in sidebar because in the file we use the menu recursively. So add the file to Includes folder with code:
    <% if LinkOrSection = section %>
    <% if $Children %>
    <% loop $Children %>
    <li class="$LinkingMode">
    <a href="$Link" class="$LinkingMode" title="$Title.XML">
    <% if $Children %>
    <% include SidebarMenu %>
    <% end_if %>
    <% end_loop %>
    <% end_if %>
    <% end_if %>
  17. Now the content Part go to Layout folder and add the file named with code:
    <div class="main-container">
    <div class="main wrapper clearfix">
    <% include SideBar %>
    <div class="content-container unit size3of4 lastUnit">
    </div> <!-- #main -->
    </div> <!-- #main-container -->
  18. Before we flush the theme for silverstripe we add also the theme config to mysite/_config/config.yml file:
      theme: 'Orange'
  19. Now lets flush the theme using the address on your browser.
  20. And we done with the main theme now you can add all your wanted stuff in it also write the custom css to css/main.css file inside the part where title is Author’s custom styles.

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *