You are here: Home / Documentation / How To's / How to make Plone generate ".section" CSS classes

How to make Plone generate ".section" CSS classes

by nguyen — published Aug 10, 2009 03:05 PM, last modified Aug 16, 2016 10:50 AM
By default Plone generates this for only the 1st level of folders in a site. This is how you can make it do this for all levels.

See the first comment of:


Customizing style for any folder 
Posted by Paul Janecek at Aug 30, 2006 03:06 PM 
This "How-to" mentions that the 'getSectionFromURL' script only creates section names for the first level of folders, and suggests that this can be 'easily' modified. I found this post by Mike Hyde that gives the details of how this can be done ([…]/message.php?msg_id=13659449). Here is Mike's modification to 'getSectionFromURL':
 * Customise 'getSectionFromURL' (from plone_scripts)
 * Edit the last line from:
 return "section-" + contentPath[0]
 return " ".join(["section-" + "-".join(contentPath[:d+1]) for d in range(len(contentPath))])
After making this change, you can use the .css described in the original post above. Please follow the link to Mike's original post for a detailed explanation.

Here's an example of how I used this to change the logo of a folder at level 3:
First, I used the drop down menu in the ZMI to add a folder named "images" and an image named "logo-blue.jpg". I then added this line to PloneCustom.css:
.section-resources-articles-local #portal-logo { background: url("images/logo-blue.jpg") transparent no-repeat; }

Now when I navigate to the "resources" > "articles" > "local" folder, the logo changes to the "logo-blue.jpg" image. 
One more fix dealing with spaces 
Posted by Robert Anderson at Oct 20, 2006 02:26 AM 
Classes in CSS are not allowed to have spaces in them but short names in Plone may contain spaces. I modified the above multi-level getSectionFromURL change to just drop the spaces. To make valid classes if your Folders contain spaces make the "return ..." line look like the following two lines:

    allchars = "".join([chr(x) for x in range(256)])
    return " ".join([c.translate(allchars,' ') for c in [
      "section-" +"-".join(contentPath[:d+1]) for d in range(len(contentPath))]])

Note this seems to work fine in Zope 2.9.5/Plone 2.1.4, but could cause conflicts since it's possible for multiple short names do translate to the same "space-free" CSS class string.

 In Plone 4 you now must also customize main_template.  See