Jump to:

17452 Posts in 4473 Topics by 1971 members


SilverStripe Forums » Archive » Implementing styled sections

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 1775 Views
  • NickJacobs
    Community Member
    144 Posts

    Implementing styled sections Link to this post

    Hi, just wondering about the best method to implement differently styled sections in a ss website. Ie: I have a 2 level site, where each section (ie 'Our Company') & it's children pages are styled differently from the other sections in the site( only minor differences like bakground/header images). So I have a global stylesheet for the site and then extra stylesheets for each section.

    What I want to know is: Is it better (more efficient) to create a new page class for each section and add the extra stylesheet that way, OR is there some better way of identifying the top level section and including the stylesheet for that section??

  • Sam
    679 Posts

    Re: Implementing styled sections Link to this post

    One of the issues with having special CSS for each section is that it stops the content author from creating new top-level sections. You might want to consider attaching an ImageField to each page, which lets the users upload an image that is used in a special place in the template.

    However, you can of course do what you originally suggested. Here are a few options:

    1) Put something like this in your template:

    <body class="section-$Level(1).URLSegment">

    This will create a class on the body tag based on the URLSegment of the top-level page: for example, section-home, section-about-us, section-contact-us, section-products.

    You will need to ensure that the user doesn't go and change the URLs, however.

    2) Create a different sub-class of page for each top-level section. Apply styles/templates/etc to each of those subclasses. This is quite heavy, however - you have to create a lot of classes.

    3) Create an Enum field on your page class:

    static $db = array(
    "PageStyle" => "Enum('Red,Green,Blue')",

    function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab("Root.Content.Main", new DropdownField("PageStyle", "Style", array(
    "Red" => "Red",
    "Green" => "Green"
    "Blue" => "Blue",
    return $fields;

    You can then put something like this into your template
    <body class="style-$PageType">
    <body class="style-$Level(1).PageType">

    And have different CSS for .style-red, .style-green, .style-blue

    This final option is a lot lighter than creating whole extra page classes, but still gives the user the flexibility to change URLs and create new top-level sections - they just need to choose which style their new section should appear in.

  • NickJacobs
    Community Member
    144 Posts

    Re: Implementing styled sections Link to this post

    Thats great Sam
    number 3 looks like the way to go.


Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.