Quick Plone visual customization

There are many ways to customize the way Plone looks, but this quick, easy primer on customizing Plone CSS will help you get started with immediate results.

1. If you haven’t yet customized any CSS code in Plone, in the ZMI, go to
   /portal_skins/plone_styles/ploneCustom.css/manage_main
   Click Customize.
2. Once you’ve got a custom style sheet, navigate to:
   /portal_skins/custom/ploneCustom.css/manage_main
   If you’ve just customized your style sheet, you were brought here automatically when you clicked Customize.
3. In the code, look for this line:

   /* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */

   Do what it says. This is where you’ll add your own customizations.

4. Add your new, custom CSS declaration. Use the syntax:

   .section-[plone_object_id] [css_class_or_id] {[css_property]: [css_value]}

   For example, to hide the “last modified” text from the your Plone site’s home page (or any object called “front-page”), you would add:

   .section-front-page .documentModified {display: none;}

   Note that this method relies on a unique name for the object (here, it’s “front-page”) and would affect any other objects with that same name, regardless of their location.

5. Restart your Zope/Plone instance, and view the results!

Thanks to Donna at C Squared Enterprises for giving me the proper syntax!