In this tutorial I will teach you how to make your own custom Silverstripe theme using a premade http://www.initializr.com responsive theme.
- 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.
- 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.
- in your silverstripe installation folder find folder named themes and open it add the folder named Orange
- Open Orange folder and add folders named css , js , img and templates in it.
- now upload from initializr theme the css folder files to css folder and js files to js folder
- 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') %> - Also for header we use the code:
<% include header %>
- For footer <% include footer %> and in the part we want the content of page we use $Layout
- After we have edited the index.html file it will look like this. Save it to folder themes/Orange/templates and use the filename Page.ss
<!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"> <head> <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"> $MetaTags(false) <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <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> </head> <body> <% include header %> $Layout <% include footer %> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></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> </body> </html> - 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.
- For Header we add file named header.ss under Includes folder with content with code
<div class="header-container"> <header class="wrapper clearfix"> <h1 class="title">h1.title</h1> <% include Navigation %> </header> </div>
- As you see in code i added the Navigation also as included file so we add file named Navigation.ss also to the Includes folder with code:
<nav> <ul> <% loop $Menu(1) %> <li class="$LinkingMode"> <a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li> <% end_loop %> </ul> </nav>
- And last the includes we add are footer.ss and Sidebar.ss
- Add the footer.ss 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 </footer> </div>
- Add the Sidebar.ss with code:
<aside class="sidebar unit size1of4"> <% if $Menu(2) %> <nav class="secondary"> <% with $Level(1) %> <h3>$MenuTitle</h3> <ul> <% include SidebarMenu %> </ul> <% end_with %> </nav> <% end_if %> </aside>
- I added the SidebarMenu because then I can add whatever deep menu in sidebar because in the SidebarMenu.ss file we use the menu recursively. So add the file SidebarMenu.ss to Includes folder with code:
<% if LinkOrSection = section %> <% if $Children %> <% loop $Children %> <li class="$LinkingMode"> <a href="$Link" class="$LinkingMode" title="$Title.XML"> $MenuTitle.XML </a> <% if $Children %> <ul> <% include SidebarMenu %> </ul> <% end_if %> </li> <% end_loop %> <% end_if %> <% end_if %>
- Now the content Part go to Layout folder and add the file named Page.ss with code:
<div class="main-container"> <div class="main wrapper clearfix"> <% include SideBar %> <div class="content-container unit size3of4 lastUnit"> <article> <h1>$Title</h1> $Content </article> $Form $PageComments </article> </div> </div> <!-- #main --> </div> <!-- #main-container -->
- Before we flush the theme for silverstripe we add also the theme config to mysite/_config/config.yml file:
SSViewer: theme: 'Orange'
- Now lets flush the theme using the address http://www.yoursite.com/dev/build?flush=all on your browser.
- 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!
