Skin Layers
Plone Theme Reference
1. Skin Layers
Templates, scripts, images, CSS and JavaScript files are organized with skin layers.
Note: in the context of components, "layer" has a slightly different meaning.
A skin is comprised of a series of skin layers. On the file system, each layer is a directory. In the Zope Management Interface (ZMI), each layer appears in portal_skins as a separate folder (containing page templates, style sheets or Python scripts).

These have two uses.
- Firstly they keep things organized. If you take a look at the Plone Default Skin (part of which is shown in portal_skins in the screenshot above) you'll see that they've separated out templates, scripts, styles and images into separate skin layers.
- More importantly they have an order of precedence. This means that an item named main_template in the top layer will be found and used before an item named main_template in the bottom layer. We will go into this in more detail on the next page.
To create a skin layer through the web, simply add a new folder. On the file system, add a directory to your skins directory. You will also need to add a small amount of configuration to ensure that your directory is found and registered as a skin layer on installation.
Firstly, in [your theme package]/skins.zcml
<cmf:registerDirectory name="[Your Skin Directory Name]"/>
Next, in [your theme package]/profiles/default/skins.xml
<object name="[Your Skin Directory Name]" meta_type="Filesystem Directory View" directory="[your namespace].[your theme name]:skins/[Your Skin Directory Name]"/>
and
<skin-path name="[your skin name]" based-on="Plone Default"> <layer name="[Your Skin Directory Name]" insert-after="custom"/> </skin-path>
2. Customizing through Order of Precedence
How skin layers work and how they can be used in customization.
If you've worked with Plone 2, you'll be familiar with this type of customization. As we mentioned earlier, the order of layers in a skin determines which page templates, CSS files and Python scripts are processed first.
To inspect the order of precedence:
- Site > Zope Management Interface > portal_skins
- click the Properties tab
You should see the layers of the Plone Default skin listed there. Layers such as 'plone_templates' come from the main Plone theme but there will also be layers providing templates from specific add-on products (the visual editor kupu for instance).
When asked to process a specific template, Plone will work from the top of this list downwards, looking in each layer in turn to retrieve the template.
At the top is a custom layer; any template placed in here will be found and used first. So, to create your own version of a Plone template or CSS file, give it the same name as the Plone version but put it in the custom layer.
This is the simplest approach, but just ensuring that your version lives in a layer higher in the order of precedence in a skin than the main Plone theme layers will be enough to ensure that Plone finds it first and ignores the original version.
This technique can be used in two ways
- using the custom folder
- through the Zope Management Interface, you can add your own versions of templates, style sheets etc to the custom folder. This always comes at the top, so you can be sure your versions will be found first.
- adding your own skin layers
- in your own theme product on the file system, create one or two skin layers, and ensure that on installation these layers are put just below the custom folder in the order or precedence. There's more information on how to do this in the next section.
Probably the most comprehensive description of skins, layers and order or precedence can be found in the first two sections of Chapter 7 of The Definitive Guide to Plone (note that most of this book refers to Plone 2, but these sections are still relevant for Plone 3).
3. Making and Naming your own Skin
How do you actually create a Skin?
Through the ZMI
- Go to Site Setup > Zope Management Interface > portal_skins
- Click the Properties tab
- Choose Add New and give your skin a name
- You can now type in a list of the layers you want to use, in the order you want to use them
- Finally, at the bottom of the page, set your new skin as the default
On the File System
If you use the plone3_theme paster template, code will be provided which, when your theme product is installed, will register your skin directories as skin layers and put these together into a new skin.
The paster template gives you the option of basing your skin on Plone Default. That is, when you install the theme in your site, the Plone skin layers will be added to yours - but below yours in the order of precedence. This is a good idea, you can then re-use bits of Plone Default without duplicating it, and overwrite the bits you don't want.
The key steps are:
- Register your skin directories as Filesystem Directory Views, so that they can become skin layers. This happens in two places:[your theme package]/skins.zcml and [your theme package]/profiles/default/skins.xml
<cmf:registerDirectory name="[Your Skin Directory Name]"/>
<object name="[Your Skin Directory Name]" meta_type="Filesystem Directory View" directory="[your namespace].[your theme name]:skins/[Your Skin Directory Name]"/>
- Add and organize your skin layers into a skin in [your theme package]/profiles/default/skins.xml
<skin-path name="[your skin name" based-on="Plone Default"> <layer name="[Your Skin Directory Name]" insert-after="custom"/> </skin-path>
- Set your skin as the default skin in [your theme package]/profiles/default/skins.xml by wrapping this node around the nodes in the previous two examples.
<object name="portal_skins" allow_any="False" cookie_persistence="False" default_skin="[your skin name]"> ......... </object>
About the Skin Name
The name of your skin is required in a few places in your theme product. It is worth knowing where and why, so, for reference, the occurrences are listed here.
|
Attributes/Directives used |
Use |
|
|
profiles/default/skins.xml |
<skin_path name="[your skin name]" |
Used to name your set of skin layers. |
|
profiles/default/skins.xml |
<object name="portal_skins" default_skin="[your skin name]"> |
Used to set your set of skin layers as the default skin. |
|
browser/configure.zcml |
<interface ⦠name="[your skin name]" /> |
Used to name the theme specific interface (see Components section) |
|
profiles/default/viewlets.xml |
<order manager="plone.portalfooter" skinname="[your skin name]" > |
Used to specify the theme when reordering viewlets in viewlet managers (see Components section) |

Author: