Since version 2.1 Plone ships with ResourceRegistries, a component that provides tools for managing stylesheet and javascript files linked to plone pages (templates). These tools - portal_css and portal_javascripts - let you register CSS and JS files in a way close to how actions are registered with portal_actions (for instance you can put a condition on them). Thanks to ResourceRegistries, we can now customize Plone look in a much cleaner and more powerful way.

One of the common ways to customize components of a Plone site is to do it TTW (from the ZMI), making use of the custom layer in the Skins Tool. Although it works, this approach only suits small customer side changes, made by people who don't have access to the filesystem. If this is all you need to do, you'd probably be happy enough with reading the chapter 7 of the Plone 2.0 book. But if you think of building a full graphical environment for Plone, the best practice is to write a python code product on the filesystem.

In this tutorial, we will use DIYPloneStyle - a simple example/skeleton of a skin product for Plone 2.1 - as a base for discovering how the stylesheet and javascript registries work, and start building a new product that installs a custom style in any Plone portal.

DIYPloneStyle is based on two complementary products:

• Martin Aspeli's MySkin, a skeleton product for Plone that installs a skin selection with its own layers, but does not make use of the Resource Registries.
• SimplePloneStyle (which I wrote), another skeleton product that makes use of the Resource Registries but does not create a new skin selection.

Those two products are not dead though. For instance, you may want to use SimplePloneStyle for starting a new project which has to register some stylesheets for all Plone skin selections. You also may want to base on MySkin a new product that mustn't do more than adding to Plone a skin selection with a few layers.

This tutorial covers the use of the current version of DIYPloneStyle, which is version 2.1.1.