Tips for Starting a Plone Theme

Learning to theme a site in Plone? Here are some quick tips to help get you started with your CSS styling once you have installed your theme product.

Turn on CSS debug mode

To turn on the CSS debug mode, go to portal_css in the ZMI. Check the box next to "Debug/development Mode", and save. Turning this on allows you to see your CSS changes when you refresh the page, without having to restart your instance.

Use base_properties.props

The default Plone styles use these variables, so changing some of the values will allow for quick, site-wide changes.

A few useful ones:

logoName: The filename of the logo you want the site to use. Put the image in your theme's images folder. logoName does not need to be changed if you upload a logo with the filename "logo.jpg", this will just override the default Plone logo.
textTransform: Ever notice how a lot of items on a default Plone site are in lowercase? Change this value to "none" to set them all back to normal.
columnOneWidth/columnTwoWidth: Controls the width of the left and right portlet columns.

You can also add your own variables to base_properties to be used within your custom stylesheets.

Using variables from base_properties

Create an override of ploneCustom.css.dtml. The ".dtml" at the end, along with the following code, is what allows you to use variables from base_properties:

/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

/* </dtml-with> */

All your CSS will go in between the <dtml-call> and </dtml-with>. You can now use variables in this way:

body {
  background-image: url(&dtml-portal_url;/bg.jpg);
  color: &dtml-fontColor;;
}

Notice that the variables start with an ampersand, and end with a semicolon (separate from the semicolon that ends the declaration).

Setting a Fixed Width

If your site is going to use a fixed width instead of fluid, this should be set on #visual-portal-wrapper, not the body. If a width is set on the body, this will mess with with the kupu editor and reference browser window by adding a horizontal scroll.

Stay out of the main_template

If at all possible, don't change the main_template.pt. With Plone 3, it is very possible to theme an entire site without having to touch this template. Keeping the main_template pure will make it easier for you to migrate your site to newer versions of Plone in the future.

Use Classes to Your Advantage

Plone adds classes to the body based on current section or template. For example, you can use .template-document_view in your selector to make changes only to the document view. Or you can use the "section-" class to give headers a different color based on what section of the site you are viewing.

z3c.jbot is Your Friend

Look into z3c.jbot for overriding viewlets and portlets. z3c.jbot gives you the ability to make changes to a viewlet's template without changing any zcml or Python code.

More information

Hopefully these tips will help you to get a bit of a jump start on your theme. To get more in depth into the theming process, check out the Plone 3 Theming book by Veda Williams.

Blog