Part 2. How to Change GreenJet diazo Theme Top Image

Replacing GreenJet diazo Plone Theme top background image for front and inner site pages in Plone 4.1.

The following tutorial covers changing of diazo GreenJet Theme top background image on a Plone 4.1 website.

Front Page Image

GreenJet theme includes an image, that is used as a background on site top area. This image is customizable and it is displayed on all site pages unless another image is set. Different top images can be used on different site sections. Default top image size is 999*159px.


To replace this image - add Image to the desirable location (if added to the site root - image will be displayed everywhere on site, if added to certain folder - image will be displayed in this section only). Let's add new top image for the whole site. For this we add new image to the site root.


New top image shortname/id should be topimage (make sure image shortname is correct, otherwise image will not be shown on the top area). Save it and see site's top area changed. You can upload wide image to cover the whole top are width.


In case your new top image is larger than default image size is 999 * 159 px - it will be cropped (unless higher logo image is used: logo image defines header height). In case your new image is smaller - black background will be displayed, like this:


Site Subsection's Image

Every site section can have unique background image with GreenJet Theme installed. To change default top image for a certain folder, add an image with topimage shortname into it, and this image will be displayed instead of the default one.

Demo images

GreenJet Theme comes with additional images that might be used on the site's top area for different site sections. They are in the src folder of the quintagroup.theme.greenjet package (quintagroup/theme/greenjet/static/images/src). You can add those images to site subsections as explained above. The following are demo images in use.



Connect with our experts Let's talk