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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s