• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / SilverStripe / Different home page and sub pages with SilverStripe

Different home page and sub pages with SilverStripe

The SilverStripe CMS makes it very easy to have a slightly different layouts between pages by creating another page type and using $Layout with different layout templates. I did this for the Fabco Ltd website which is a small website with a larger main image on the homepage and a smaller version of this image on the subpages; in all other respects the templates are the same.

Example website

The example website used in this post is Fabco Ltd. I’ve also included two screenshots below showing the homepage and subpage with the different main image.

Homepage:

fabco ltd's homepage

Subpage:

contact page on the fabco website

How to set up slightly different templates with SilverStripe

Create a new file at mysite/code/HomePage.php like so (it doesn’t need anything else in it):

<?php

class HomePage extends Page {
}

class HomePage_Controller extends Page_Controller {
}

In the main content area of the Page.ss file at /themes/theme-name/templates/Page.ss change $Content/$Form section to include $Layout like so (obviously the id and class of the containing <div> may be different for your template):

<div id="content" class="typography">
    $Layout
    $Content
    $Form
</div>

At /themes/theme-name/templates/Layout create two files: HomePage.ss and Page.ss; these contain the slightly different layouts that will go where $Layout is in the above file.

For the Fabco website HomePage.ss looks like this:

<img id="mainpic" src="/themes/fabco/images/home.jpg" width="770" height="404" alt="fabco ltd" />

and Page.ss like this:

<img id="mainpic" src="/themes/fabco/images/subpage.jpg" width="770" height="108" alt="fabco ltd" />

Then open the following URL in your web browser to rebuild the database etc, changing “mysite” to the domain name of the site:

http://mysite/dev/build/?flush

Now go to the CMS admin and change the page type of the home page to “Home Page” under the “Behaviour” tab as shown in the screenshot below.

modifying the page behaviour in silverstripe

The home page now has a ever so slightly different layout to the other pages. Easy.

Check Out These Related posts:

  1. NordVPN vs IPVanish
  2. BigCommerce – The Easiest Way to Sell Online
  3. Change element’s properties with CSS based on body id or class
  4. Why Pay For A VPN?

Filed Under: SilverStripe

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap