Registering and customizing stylesheets

by David Convent last modified Dec 30, 2008 03:04 PM
Best use of the Resource Registries.
Registering new stylesheets Before the "ResourceRegistries":http://plone.org/products/resourceregistries was included in Plone, the only way to override the Plone default CSS rules was to customize the files 'base_properties.props' and 'ploneCustom.css'. Because of that, choosing what rules should override the plone ones had to be done by playing with the layers traversal in the *Skins Tool*, or by setting unelegant Zope *Access Rules*.
As we saw in the "previous chapter":base-properties, we still have to use 'base_properties.props' for defining our basic graphical chart. But now that we can register stylesheets with the CSS tool, 'ploneCustom.css' is kept for backward compatibility only. Another limit of Plone without the ResourceRegistries was that there was no possibility to put a condition on whether a stylesheet should be loaded or not. Stylesheet registration in DIYPloneStyle is set up in 'config.py', in the 'STYLESHEETS' declaration. 'STYLESHEETS' is a tuple of python dictionaries, one dictionary for each stylesheet to register with the *portal_css* tool. If you need to put a condition on a stylesheet, you have too add to its dictionary an 'expression' key. It's value is a TAL expression that works the same way as for actions in the *portal_actions* tool. You can learn more about the stylesheet attributes (dictionary keys) from the 'STYLESHEETS' inline comments. Customizing existing stylesheets DIYPloneStyle can be useful not only for registering new stylesheets: you can also define in the 'config.py' how you want to customize resources that are already registered in the registries. In the 'STYLESHEETS' declaration, simply add a dictionary with the same 'id' than the one of the resource that you want to customize, and add a key to the dictionary for each resource property that you want to modify. It can be handy for instance for disabling some Plone default resources in order to start a project from absolute no-style scratch or to put specific conditions on them to define different styles for public and registered modes. **Note:** All customizations will be automatically reverted when uninstalling the product. Practical example A very common use case is to define a skin for public anonymous access, and keep a basic plone style for members access. One easy way to do so is to put a condition on the product specific stylesheet(s), and disable basic plone resources under the same condition. In the 'config.py' file of your product, declare your stylesheets like these ones (in 'STYLESHEETS'):: STYLESHEETS = ( {'id': 'diystylesheet.css', 'media': 'screen', 'rendering': 'import', 'expression': 'python: member is None'}, {'id': 'base.css', 'expression': 'python: member is not None'}, {'id': 'public.css', 'expression': 'python: member is not None'}, {'id': 'portlets.css', 'expression': 'python: member is not None'}, {'id': 'generated.css', 'expression': 'python: member is not None'}, )