Part 4. How to Change GreenJet Plone 4 Theme Colors

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

The following tutorial covers customization of GreenJet Plone Theme colours on a Plone 4 website. Instruction for Plone 3 website - see in Color Scheme Customization in Plone 3 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

Open base_properties file located in ZMI portal_skins -> greenjet_styles:

base

This file contains several properties that define GreenJet theme color. To change theme basic colors press Customize button.

customize.png

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. There are many other options you may also customize, such as links or hover colours.

green-jet-numbers

So you can try as long as you need to make the theme look as you want. After you are done, save changes and as a result you might get quite differently-looking GreenJet theme (on the following screenshot it is together with replaced top image).

new-colors

Connect with our experts Let's talk