Part 4. How to Change GreenJet Diazo Plone 4 Theme Colors

Tutorial about customizing GreenJet Plone Theme color scheme in Plone 4.2 with Diazo.

The following tutorial shows how to set your own theme colors in Greenjet on a Plone 4.2 website.

GreenJet diazo theme has customizable colors, you can 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 fill in the desirable fields with valid css colors (e.g. #CDAA7D).

Here you can set new colors for site background area, top header, links, hover color, etc.

change_colors

Available color-management fields include (see the following screenshot to see what property corresponds to what site section):

  1. body_bg_color skin background color, displayed on both sides from main site content area
  2. secondary_color upper top, top and bottom area color, color of a border between portlet header and portlet body
  3. links_color color of links on site
  4. hover_links_color color of links when hovering
  5. portlet_header_bg_color portlet header background color
  6. top_bg_color color of top header (seen when small top image is used)

green-jet

Having specified new theme colors you can make the theme look quite different from the default look. If applied together with replaced top image, GreenJet theme can have the following look.

new-colors

Used colors are: body_bg_color #282155, secondary_color #A35F78, links_color and portlet_header_bg_color #87324F.

Connect with our experts Let's talk