Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

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

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

Implementing styled sections


Reply


3 Posts   1837 Views

Avatar
NickJacobs

Community Member, 144 Posts

22 April 2008 at 10:59am

Edited: 22/04/2008 11:00am

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??

Avatar
Sam

Administrator, 685 Posts

23 April 2008 at 12:28am

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">
OR
<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.

Avatar
NickJacobs

Community Member, 144 Posts

23 April 2008 at 9:31am

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

Thanks