CSS and JavaScript to Page

Style sheets and JavaScript files are included in the skin section of the Plone Default theme, so the process of customizing or rewriting in general follows the concept of order of precedence described in the Skin section of this manual (i.e. placing a replacement in a higher layer in the Skin).

If you create your own style sheet, you can either put it in the custom folder of portal_skins through the web or in the skins directory of your theme on the file system.

If you like, and are feeling ambitious, you can turn your stylesheet into a resource type component by putting it in the browser directory and registering it in ZCML. Indeed, this is done for you if you create your own theme product using the paster plone3_template. There are pros and cons to the latter approach, look back at the Skin or Components section if you want to explore these further.

Resource Registries

Before the CSS and JavaScript reach the page they go through an extra step. You'll note that there are quite a few style sheets and JavaScript files available (and not all are always required). So a Registry tool picks and chooses them as required and merges only those it needs for speed and efficiency.

There's a detailed tutorial on how to use these registries in the following section.

including how to use conditions to specify that you only want a particular resource loaded in a particular context (for instance with a document view).

Registering style sheets and JavaScript

• Through the web you can add or remove style sheets and JavaScript by going to the Zope Management Interface > portal_css or portal_JavaScripts.
• On the file system, registering style sheets and JavaScript is part of the Configuration. So you'll need to look in profiles/default/jssregistry.xml and cssregistry.xml.

DTML

Some of the default Plone style sheet files have a .dtml extension, and the CSS inside is wrapped in

/* <dtml-with base_properties> */
 .......
/* </dtml-with> */

DTML is another Zope templating language, which in this case is deployed so that particular variables can be picked up from a properties sheet (base_properties.props) - for example:

#portal-column-one {
    vertical-align: top;
    width: <dtml-var columnOneWidth missing="16em">;
    border-collapse: collapse;
    padding: 0;
}

We wouldn't recommend using this technique as it is likely to be phased out, but it is as well to know that it is there. You can sometimes get caught out if you're customizing an existing style sheet and accidentally delete the top or bottom "dtml-with" statement.