Create a different look and feel for different sections of your web site

This tutorial is updated for Plone 3.0.

From the 2.0.4 release notes: The body tag now has an HTML class attribute, so you can skin different sections of the site with different styles. Prefix is "section-" and then the Short Name (partial URL) of the item in the root folder. This can be customized if you want this to work on all levels instead of just the root level, or to return multiple classes. This only works for the folders immediately under the root folder, though it can be customized by changing the getSectionFromURL script appropriately. It also does not work for areas of the site such as Site Map or Search, which are not driven off of a page template.

Here's how it works:

In the main template there is a script that generates, on the fly, a class for each section of the site. The script is called "getSectionFromURL".

If you have a section on your website called, say, "Products", and you look at the page source for one of the pages in that section, you'll see that Plone has created a class in the body tag called "section-products". It uses the shortname of the folder, which is also its object name in the database.

In your stylesheets, prefix whatever style you want to be different for that section with:

.section-foldername

replacing "foldername" with the id or short name of the folder in question. For example, this code would change the background image for the Products section of your site.

body.section-products {
    background-image: url(gradient2.png);
}

MODIFY THE CODE FOR THE PORTAL LOGO (if you're doing this on version 3.0, you'll also need to look into how to override viewlets):

For this to work, we want to modify the code in the logo viewlet such that it doesn't output a dynamically generated logo.jpg found in the root of your site. Instead, it can be configured to spit out a CSS ID that can then be styled.

By default, Plone ships with this code: [see plone.app.layout.viewlets.logo.pt to see the code. plone.org keeps eating my code and trying to render it]

Change this code such that you comment out the existing code and add this new banner code:

The second snippet will return whatever the #banner is specified as in your stylesheets. Add CSS to support this code (note that you can use getSectionFromURL to do more than just adjust your logo

you can affect almost any element on your page). The only weak issue here is that if you change the shortname of your section, your styling will be broken. For example, this is specific to a section with a shortname of foo:

.section-foo #banner { 
    margin: 1em;
    background-image: url(banner-foo.gif);
    background-repeat: no-repeat;
}

Alternately, you can specify a base CSS class that is more generic.

#banner {
    background-image:url(&dtml-portal_url;/banner.jpg);
}

and then inside each of your folders on your site (on the end user side, not in the ZMI), add an image named banner.jpg. Plone's ability to acquire will pick up the nearest "banner.jpg" it finds.

If you want to do more than change the logo or banner, the getSectionFromURL comes in even more handy.

EXAMPLES OF OTHER THINGS YOU CAN CHANGE IN YOUR STYLESHEETS:

body {
    background-image: url(gradient.png);
}
/* this is specific to a section with a shortname of foo */
body.section-foo {
    background-image: url(gradient2.png);
}
#visual-portal-wrapper {
    background-color:#000;
}
/* this is specific to a section with a shortname of foo */
.section-foo #visual-portal-wrapper { 
    background: white;
    margin: auto;
    width: 883px;
    position: relative;
}
#portal-logo { 
    margin: 1em;
    background-image: url(logo.jpg);
    background-repeat: no-repeat;
}
/* this is specific to a section with a shortname of foo */
.section-foo #portal-logo { 
    margin: 1em;
    background-image: url(logo-foo.gif);
    background-repeat: no-repeat;
}

and so on...