Plone: Add a Custom Style Sheet

Rather than dumping everything into ploneCustom.css, you might want to keep things tidy and create a separate style sheet for some of your CSS rules.

This is a two-step process and it does not matter in which order you perform those steps:

Create the Style Sheet

Add Custom File

If you have already made some customizations to the styling of your Plone site, you will be familiar with the portal_skins/custom folder in the Zope Management Interface (ZMI).

To create a new style sheet,

• go to Site Setup → Zope Management Interface
• navigate to portal_skins/custom
• from the drop-down menu at the top of the page, select File (not ATContentTypes: File)
• click Add, which will take you to a new page where you can specify the file name and/or upload an existing style sheet
  
  • choose an ID - think of it as a file name and, for the sake of clarity, use the .css extension
  • if you upload a style sheet, unless explicitly specified, the ID will be automatically populated with its file name
  • the Title field merely serves documentation purposes

Register the Style Sheet with Plone

Register Style Sheet

• go to Site Setup → Zope Management Interface
• navigate to portal_css
• scroll to the bottom of the page to fill in the Add a new stylesheet form
  • in the ID field, enter the same value as in the Add File Dialog to reference the custom file
  • click Add to complete the process
• use the up/down arrows to control the rendering order of the style sheet

If the this step has been carried out before the creation of the style sheet, the newly added CSS Registry entry will now be shown with an orange background. This is not a problem. The new file will be automatically picked up as soon as it has been added.

1. This process has been tested with Plone 4.1