Part 8. How to Change Chameleon Plone 4 Theme Colors

Tutorial about customizing colour scheme of Chameleon Plone Theme, including how-to on setting custom colour for a certain site section on a Plone 4 website.

The following tutorial covers customization of  Chameleon Plone Theme colour scheme on a Plone 4 website. See more instruction for different Plone versions in Colour Scheme Customization in Plone 3 and Diazo Chameleon theme color scheme in Plone 4.1 tutorials.

Chameleon Plone Theme colour scheme can be customized: you can change theme basic color, displayed in site's top area, portlet headers and site footer, and the hover colour.

1

To change skin basic color go to chameleon_styles folder in ZMI and open the containing base_properties document, that includes information about Plone's color, logo and border defaults:

base

There is skinBackgroundColor value that defines main theme colour. To change theme basic color -  press Customize button:

customize

In the opened window change skinBackgroundColor value to, for example, gold (this can be either colour name or its code):

custom-color

Save changes. Now return to Plone Interface and you'll see your changes applied: skin basic color changed to gold:

gold-skin

Having changed the basic color you should change skinBackgroundHoverColor as well, that defines selected & hover tabs color. This can be done in the same base_properties document. Change skinBackgroundHoverColor to what you need, e.g. brown:

brown

Save changes. Go back to Plone interface and see new colors implied: selected & hover tabs color is brown now:

new

How to set color for a folder

You can change the look of a subsection, not influencing the skin general look. To do this - go to the folder you want to set colours for and switch to Set Style tab.

test-folder

Provide BackgroundColor and BackgroundHoverColor values and save changes.

set-style.png

Now this folder will have different colours than the rest site.

test-folder-grey

Connect with our experts Let's talk