Get started using CSS Manager

Prerequisities

• Have CSS Manager installed in your site (how to install it).
• Be logged in as someone who can access the Plone Control Panel (e.g. log in as a site administrator)
  

Step-by-step

1. Open the CSS Manager Control Panel

1. Go to the Plone Control Panel (accessible via the "site setup" link in a typical Plone site).
2. Click on "CSS Manager" in the "Add-on Product Configuration" section.

2. Enable CSS Debug mode

The first section in the CSS Manager Control Panel lets you put your site in CSS Debug Mode if it isn't already in that mode.

You are recommended to enable CSS Debug Mode while using CSS Manager so that you can see the effect of your changes as soon as you click the "Update theme now" button.

However, enabling CSS Debug Mode makes your site run more slowly than it ordinarily would. Therefore, once you have finished using CSS Manager you are recommended to disable CSS Debug Mode, particularly if you are making changes to a live (production) site (that is, a site which is visible to the public).

3. Get a list of things you can customize using CSS Manager

If you haven't already started making customizations to the look of your site, you may see a "show me what I can customize button". If you see this button, click it to see a list of things you can customize using CSS Manager.

Once you have clicked the "show me what I can customize" button, the screen will refresh to show a list of the things you can customize. Note: if you or someone else has already started making customizations, this screen may display from the time you first enter CSS Manager.

Technical notes for Plone experts: You see the "show me what I can customize" button if your copy of base_properties.props has the "attribute" manage_doCustomize. CSS Manger finds the active theme for your site, and puts the a copy of the base_properties file for that theme into the custom folder. The list of customizable properties appears whenever there is a base_properties file in your site's custom folder. So if there is one there already, it will display the properties from that file.

4. Start customizing

Using CSS Manager, you can change things like:

• Your site's logo
• The fonts used in your site
• Colors of text, page backgrounds, tabs and borders
• The style and width of borders
  

Once you have made changes to one or more of these things, scroll to the bottom of the screen and click "Update theme now".

• If CSS Debug Mode is enabled (see above), you should see your changes take effect immediately.
• If CSS Debug mode is disabled (see above), to see your changes take effect you need to do either of these things:
  
• Enable CSS Debug Mode (you may wish to disable CSS Debug Mode again after this)
• Restart Zope