Customizing Plone CSS

To add custom CSS rules to the already-existing CSS rules, we need to use the Zope Management Interface (ZMI). To access it, click "Site Setup" in the top right corner of secoora.net (when logged in) and then click on "Zope Management Interface".

Plone constructs "skins" by merging several CSS files. These files can be accessed using the portal_skins tool from within the ZMI.

When you click on "portal_skins", you will find many folders. The folder containing custom CSS is appropriately named "custom."

Within this folder, you will find 2 items: the base_properties folder and ploneCustom.css. The base_properties folder contains no items; however, it does have many different properties which you can access by clicking "Properties" at the top.

These properties are used as variables in the CSS. We extract these variables from the CSS because in many cases they are repeated. If we wanted to change all of the fonts at once, for example, we would have to edit every single instance of the font-family in the CSS. However, by specifying the font in a single property fontFamily, we can change it in a single place, which is far more convenient.

The actual custom CSS rules are contained in ploneCustom.css. There are several important lines which must not be modified (and are commented as such) which resemble

/* <dtml...> */

They tell Plone where to find properties used in the CSS. You add new CSS rules between the start tag <dtml-with> and the end tag </dtml-with>. By placing rules between these tags, you can utilize properties found in base_properties through a reference like

.divider {
border: 1px solid <dtml-var globalHighlightColor>;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
padding: 5px;
}

Once we have edited the CSS, we need to tell the server its cached version is invalid (otherwise we'll keep getting served the cached copy without our changes). To do so, we need to use the ResourceRegistryCache? tool, which we can access from the root level of the ZMI. To reach this level from any page, click the first / at the top of the page.

To see cached files, click the 'Statistics' tab at the top of the page. The file we are interested in is the merged version of all of the CSS files, which is called portal_css.

Clicking on portal_css leads us to a page describing it. To invalidate the cached version of this file, click the invalidate button.

Having cleared the server's cached version of the CSS, we need to tell our browser to discard its cached version of the CSS and download the version using 'Clear Private Data' or Ctrl/Cmd+F5