The following tutorial covers customization of Chameleon diazo Plone Theme color scheme on a Plone 4.1 website.
Chameleon diazo theme has site top and footer area, portlets' header, and all levels of global navigation in the same color scheme.It comes with 11 color schemes (with different top images), that allows changing your website look. The following are clickable screenshots of 11 color schemes that can be applied for Chameleon diazo theme. Click on the screenshot to see larger image. The first screenshot snowy - is a default Chameleon theme color scheme.
Site color
You can globally change default site colors via Site Setup -> Diazo Theme -> Advanced Settings tab.
Note: For Diazo Support extension starting with 1.1b1 version, proceed to Site Setup -> Theming -> Advanced Settings tab.
In Parameter expressions textarea change the color_scheme parameter from 'default' to one from the list.
Apart from predefined color schemes, Chameleon diazo theme allows setting custom color for a website. New color will be used as color of top and footer area, portlets header, and global navigation. To change it go to Site Setup -> Diazo Theme -> Advanced Settings tab. In Parameter expressions textarea change the color parameter value from #7e9cba to one you want. Here you can also set new color for a hover by changing hover_globalnav_color parameter value from #6187ac to one you want.
Folder color
The theme also allows you to set your colors for separate folders. First you need to install quintagroup.substyle.
Find your buildout.cfg file, typically located in the zinstance subdirectory of your Plone installation directory. Simply list the product in the eggs section of your buildout, and optionally a version (otherwise, you get the latest available). In find-links section add http://dist.quintagroup.com/products/. Rerun the buildout and restart your Zope instance. Now you can activate the extension via Site Setup -> Add-ons.
Navigate to the folder you want to change the color scheme for and open Set Style tab. Fill in one of the available theme colors into Color Scheme field: snowy, silver, maroon, orange, teal, blue, gray, green, blossom, mustard, dark and save changes.
Apart from predefined color schemes, Chameleon diazo theme allows setting custom color for a section. New color will be used as color of top and footer area, portlets header, and global navigation in this folder. To change color for a folder - open Set Style tab and fill in valid CSS color into Color and Navigation Hover Color fields.
Save changes and see new color applied. Note: top image is taken from current color theme.
In case you have set the necessary color scheme or colors, and want to replace the top image - see How to replace diazo Chameleon theme top image in Plone 4.1 tutorial.