CSS Quick Start

Purpose, Prerequisites & Audience

This tutorial describes the use of CSS (Cascading Style Sheets) in Plone 3.x and is intended for site customizers who are familiar with CSS and have administrative privileges on a Plone site. The approach here is strictly for making through-the-web modifications to stylesheets.

No previous knowledge of Python, Plone or Zope is required and examples will walk those new to Plone through every step required to make CSS modifications to Plone.  If you have set up a Plone site but are otherwise new to Plone, this tutorial is for you.  If you are a web designer who needs to work as part of a Plone team, this tutorial might help clarify how CSS is used in Plone.

Using the Right Tools

By far, the most popular website CSS introspector tool is Mozilla's Firebug tool. No matter the level of your experience, Firebug is the ultimate CSS debugging tool and all themers should use it.

The basic idea is that you can step through the HTML that frames your Plone pages, see the CSS that is applied to the HTML. You can even change the CSS settings on the fly to experiment with the layout of your site. For help on using Firebug, click here.

Introduction

Plone's extensive use of CSS gives customizers a great amount of control over the appearance of a Plone site.  The quickest way to get a sense for this is to look at a Plone site with styles disabled in your browser.  In Firefox you can disable styles with "View > Page Style > No Style".  (Try this now.)  Clearly, CSS is very heavily used which makes for an excellent separation of form and content.

Custom styling of a Plone site can be performed in one of the following ways:

1. modifying 'base_properties' 
2. overriding existing style by adding styling information to ploneCustom.css
3. adding, deleting or reordering stylesheets

This tutorial will describe techniques 1 and 2.

Note that serious customizations of the Plone interface are best done by creating custom products.  These allow you to encapsulate all of your style and template changes in one place, save them and reapply them elsewhere.  The instructions here apply to 'quick and dirty' customizations for an individual site.

Navigating the ZMI

The following folders in the ZMI (Zope Management Interface) allow you control what stylesheets are used and their contents:

ZMI > portal_CSS

Controls the registration and ordering of stylesheets within Plone. 

 ZMI > portal_skins > custom

 Location for locally customized versions of the stylesheets found in ZMI > portal_skins > plone_styles.

ZMI > portal_skins > plone_styles

Location of default base_properties and stylesheets.

Simple Customizations

Enabling development mode

Before beginning any CSS customization you should turn on debug-/development mode.  This will guarantee that caching and compression of CSS is disabled.

Here is how you enable debug-/development mode:

1. log on to your Plone site as the 'admin' user or with your manager account
   
2. add '/manage' to the URL to access the ZMI
3. navigate to ZMI > portal_css
4. click the Debug/development mode checkbox
5. click the "Save" button

When you are finished making your CSS modifications you should disable debug-/development mode as it does impact the performance of your Plone site.

Modifying base_properties

Plone provides a set of base_properties that control some of Plone's color, font, logo and border defaults.  These properties allow you to modify the basic look-and-feel of a site without working directly with Plone's CSS files and provides the simplest way to do basic customization.  Individual property names are reasonably self-explanatory (linkColor, borderStyle, etc.) and accept standard CSS style values.

Here is how you modify the base_properties:

1. enable development mode
2. navigate to ZMI > portal_skins > plone_styles > base_properties
3. click the Customize button
4. modify individual properties using CSS style values
5. click the "Save Changes" button (at the bottom of the page)

Section 3 of this tutorial provides more detailed descriptions of each of the base properties.

Making CSS modifications

The next step beyond base_property modifications is overriding Plone's CSS with custom CSS of your own.  Plone provides the ploneCustom.css stylesheet for site customizations.  The difficult part of this for newcomers to plone is figuring out the CSS selectors that are used within Plone.

For many people, the Firebug or Web Developer Firefox extensions provide the easiest way to inspect the style associated with HTML elements in a web page.  Either of these provides easy access to the CSS selectors and style information needed to create a custom stylesheet.

Note that the .css files in ZMI > portal_skins > plone_styles are actualy dtml templates, meaning that they can utilize base_properties to make global changes via variables.  This means that they may contain references to base_properties alongside standard CSS as in the following example from public.css:

h1, h2 {
    border-bottom: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    font-weight: normal;
}d

Here is how you add CSS customizations to your Plone site:

1. enable development mode
2. navigate to ZMI > portal_skins > plone_styles > ploneCustom.css
   
3. click the Customize button
4. add CSS
   
5. click the "Save Changes" button (at the bottom of the page)
   

Sections 4 and 5 of this tutorial describe Plone's stylesheets and the CSS selectors associated with various elements of the Plone interface.

Restoring default styling

When you first start playing with base_properties and stylesheets you will want the freedom to make lots of changes knowing that you can easily get back to the default settings.  Plone makes this easy by always keeping custom versions of base_properties and stylesheets in a separate folder. When Plone assembles the CSS stylesheets it looks for custom versions first and uses these when found.  If custom versions are not found it uses the default versions.  To restore default settings you only need to delete the custom versions.

Here is how you restore default styling to your Plone site:

1. enable development mode
2. navigate to ZMI > portal_skins > custom
   
3. check base_properties and/or ploneCustom.css (or anything else you've modified)
   
4. click the "Delete" button