Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Technology / Plone: Add a Custom Style Sheet
You are here: Home / Technology / Plone: Add a Custom Style Sheet

Plone: Add a Custom Style Sheet

| filed under: , ,
How to create a new custom style sheet and add it to the CSS Registry

Plone Icon

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

Plone: Add Custom File
Add Custom File
Plone: Add Custom File Dialog
Add File Dialog

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 SetupZope 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

Plone: Register Style Sheet
Register Style Sheet

  • go to Site SetupZope 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
Filed under: , ,
Filed under: , ,
Filed under: , ,
Site designed by Crann Tara, powered by Plone & Python.