How to Modify Plone Base Properties

This tutorial  is applicable to Plone 2.5, 3.x and 4.0 versions. The approach covered  is not supported in diazo themes for Plone 4.1.

There is a set of properties in Plone that control Plone's color, font, logo and border defaults. These properties allow you to modify the basic look-and-feel of Plone site without working directly with Plone's CSS files. These properties provide an easy way to do basic customization. They are all gathered in a file named base_properties.

Before beginning any manipulation with CSS customization you should turn on debug/development mode, which is recommended during css-related development. It will guarantee that caching and compression of CSS are disabled.

Enable Development Mode

To enable Debug/development mode log in to your Plone site as the admin user and navigate to Zope Management Interface. Open portal_css (CSS Registry)

portal-css

Select Debug/development mode checkbox

debug-mode

Move to the bottom of that page and press Save button.

    !!!IMPORTANT!!! Don't forget to turn debug/development mode off after you are finished making your CSS modifications, as the debug mode affects performance.

    Modify base_properties

    Now that development mode is on you can start to modify base_properties. Plone base_properties allow you to assign simple values to Zope objects. For this go to ZMI -> portal_skins -> plone_styles -> base_properties

    plone-styles

    Note: Normally, if you are using custom theme on your Plone site, not default one, you will have your base properties file in the corresponding theme folder. (ZMI -> portal_skins -> your_theme -> base_properties)

    Open that file and click the Customize button

    customize

    Now you can modify any property using CSS style values

    edit
    When you are finished - click the Save Changes button at the bottom of the page.

      base_properties

      So, what exactly base_properties are? Let's have a closer look at all those items:

      • title - title for base_properties file
      • plone_skin - theme used on your site
      • logoName - the file name of the portal logo
      • fontFamily - the font family used for all text that is not headers
      • fontBaseSize - the base font size that everything is calculated from
      • fontColor - the main font color
      • fontSmallSize - used for various elements like buttons and discreet text
      • backgroundColor - the background color
      • linkColor - the color used on normal links
      • linkActiveColor - color used on active links
      • linkVisitedColor - color used on visited links
      • borderWidth - the width of most borders in Plone
      • borderStyle - the style of the border lines, normally solid
      • borderStyleAnnotations - style of border lines on comments etc
      • globalBorderColor - the border color used on the main tabs, the portlets etc
      • globalBackgroundColor - background color for the selected tabs, portlet headings etc
      • globalFontColor - the color of the font in the tabs and in portlet headings
      • headingFontFamily - font family for h1/h2/h3/h4/h5/h6 headlines
      • contentViewBorderColor - the content view tabs border color
      • contentViewBackgroundColor - the content view tabs background color
      • contentViewFontColor - the font color used in the content view tabs
      • inputFontColor - the font color used for input elements
      • textTransform - whether to lowercase text in portlets, tabs etc.
      • evenRowBackgroundColor - the background color of even rows in listings
      • oddRowBackgroundColor - the background color of even rows in listings
      • notifyBorderColor - border color of notification elements like the status message, the calendar focus
      • notifyBackgroundColor - background color of notification elements like the status message, the calendar focus
      • discreetColor - the font color of discreet text
      • portalMinWidth - specifies the minimum width to be used for an element.
      • columnOneWidth - first column width
      • columnTwoWidth - second column width

       

      Follow