Creation

Plone documentation distinguishes between fiddling with your theme "live" through the Plone UI and filesystem themes which you can bundle up and deploy to other Plone instances.

It's a little bit harder to create a filesystem theme [1] but you're left with a reusable theme. Much better.

Here we'll use paster to create the framework for our Plone 3 Theme. There is some Plone Theme documentation for using paster to create the theme but we can summarize it here.

Let's suppose we'll create a theme called (from a Plone/Zope Product perspective) plonetheme.mytheme. The plonetheme part is a standard namespace component, the bit you choose is the mytheme part. When you run paster you'll get to give it the human readable name My Plone 3 Theme.

cd .../zeocluster/src
../bin/paster create -t plone3_theme plonetheme.mytheme

The hierarchy is then standardised and you can:

cd plonetheme.mytheme/plonetheme/mytheme/

and there you'll find the elements you'll be playing with: browser, profiles and skins and their attendent .zcml files.

Buildout

You need to tell Plone about the existence your new theme by editing buildout.cfg and adding plonetheme.mytheme to the eggs and zcml sections and src/plonetheme.mytheme to the develop section.

You only need to run buildout once.

Unless there's been some big changes in your theme in which case running buildout again can't do any harm!

Warning

The default stylesheets created by paster even when "based on default Plone Theme" are missing heaps of CSS. You'll have to discover what as you go along.

The basic fix is to copy the default stylesheet.

Copying is a slightly involved process here:

1. You need to customize the existing Plone default stylesheet

   Let's say we decide we need to copy public.css:

   1. Go to Site Setup; ZMI; portal_skins; plone_styles; public.css
   2. Click the Customize button

2. Cut'n'paste the file contents into your filesystem theme:

   For public.css we want to override the contents of .../plonetheme/mytheme/skins/plonetheme_mytheme_styles/public.css.dtml