Tips for Writing a Solid Plone Theme

There are a lot of different pieces that need to be edited to put together a full Plone theme, and it can be difficult to know the best way to do everything. Here I have put together a few of the best practices to follow when creating a theme. This assumes you have already created a theme and have it installed in your site.

Skins vs Browser Resource

Within a theme, you may find there are two possible places to put your CSS and images: in the skins folder, or as a browser resource.  I prefer to put everything in skins because:

• You don't have to add the resource name into the path
• It allows you to use DTML variables
• CSS and images are then in the same place as your templates.

I do recommend a resource folder if your site is going to use multiple themes. Otherwise, when the theme is switched, some of the CSS from the previous theme gets left over and may override the current theme's styles. This doesn't happen in a resource folder because the declaration of the folder in configure.zcml includes the line:

layer=".interfaces.IThemeSpecific"

This will keep your changes from mixing with other themes, and this line should generally be included with each item declaration in configure.zcml.

Efficient CSS

If you create a theme based on another theme (such as Sunburst or Plone Classic) the only CSS you need to write is your own customizations.  I've seen amateurs make the mistake of copying everything from the base theme's CSS to put into their own theme.  This is not necessary! Use ploneCustom.css, or create themename.css so as not to override the base theme's styles completely (which will happen if you use the same file name). Then the Firebug extension for Firefox will help you find the classes and ids you need for applying styles.  I also recommend reading up on how to write efficient CSS selectors.

Hiding Elements

For those unfamiliar with the full theming process, it is very tempting to hide unwanted site elements with CSS.  This is not recommended because those items are still loading on the page, even though you can't see them.  Viewlets such as document actions or the colophon can be hidden with viewlets.xml.  Site actions or personal bar links can be hidden or removed with actions.xml. Other elements may require overriding the template to remove certain pieces.

Image Sprites

By combining multiple images into one, you will reduce the number of loads on your site.  This will not work with all images, but here are some good examples:

• Repeating backgrounds. If your site has multiple images that are 1px tall and repeat vertically, these can go into a single wide image.
• Icons. It's popular for sites to have a row of buttons linking to social sites. These icons can all go into one image, and be positioned appropriately for each button.

For more information on making sprites, see http://www.alistapart.com/articles/sprites.

Generic Setup Profiles

With most themes, you will likely add additional CSS and JS files, and these files are added to the registries in cssregistry.xml or jsregistry.xml.  As with the style sheets, you only need to add your changes, you don't need to include the full registries.  The same is true for most of the XML files. You can export them from ZMI > portal_setup > export tab.  This will export the full XML, including any changes you've made TTW.  You only need to keep your custom changes, everything else can be stripped out (about the only exception I've seen to this is kupu.xml). Otherwise, if you leave everything in, you may override changes made in another product.

Uninstall Profile

It is possible that the theme you create won't be used forever, and it may be uninstalled one day.  If you don't include an uninstall profile, some artifacts will get leftover.  The uninstall profile will allow you to undo viewlet customizations, remove the theme's skins folders, etc.