Part 4. How to Change GreenJet Theme Colors

Tutorial about customizing GreenJet Plone Theme color scheme in Plone 3.

The following tutorial covers customization of GreenJet Plone Theme colours on a Plone 3 website. Instruction for Plone 4 - see in Color Scheme Customization in Plone 4 tutorial.

GreenJet Plone Theme look can be changed by changing theme's basic colors, that appear as site background color, portlet colors, etc. To change GreenJet Skin default colors (shown on the image below) you have to customize base_properties file, and change the corresponding properties values to the ones you need.

green-jet

Go to ZMI interface and select portal_skins -> quintagroup_theme_greenjet_styles. This folder has base_properties document, that contains information about Plone's color, logo and border defaults.
base

base_properties has several properties that defines GreenJet theme color. To change skin basic colors for other ones press Customize button. In the opened window you will be able to set your own color values to the corresponding properties:

colors

  1. greenJetBackgroundColor  - defines skin background color
  2. greenJetSecondaryBackgroundColor - defines top and bottom area color
  3. greenJetPortletHeaderBackground - defines portlet header background color
  4. greenJetPortletHeaderBorder - defines color of the porltet border between portlet header and body area

See the image below to get the idea about where on site those colors are displayed.
green-jet-numbers

There are many other options you may customize. So you can try as long as you need to make theme look as you want. After you are done, save changes and as a result you might get quite differently-looking GreenJet theme (here it is together with replaced top image).
new-colors

Connect with our experts Let's talk