Part 2. How to Change diazo Chameleon Theme Colors

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.

snowy.png silver.png maroon.png orange.png teal.png blue.png gray.png green.png blossom.png mustard.png dark.png

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.

set style for the whole site

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.

set-style.png

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.

new-colors.png

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.

Testimonials

I've been using Chameleon for a couple of years and I'm fully satisfied with it. No problem at all! I've received updates when needed and the Quintagroup staff has answered my questions readily. I think it is a good product.

David
Luthiers de Webs
http://luthiersdewebs.com

Follow