Part 5. How to customize SkyCream top area

Read the tutorial and learn how to customize the top area in SkyCream Plone theme, including how to set your own top image and its background color.

Read the tutorial and learn how to customize the top area in SkyCream Plone theme, including how to set your own top image and its background color.

SkyCream Theme contains an image with clouds located in a site top area, it is customizable and can be changed for different site sections:

default.png

To replace this image - add Image to the desirable location with the shortname/id topimage (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:

 

edit-image.png

Save it and see site's top area changed. You can upload wide image to cover the whole top area:

new-wide-image.png

or narrower as in the screenshot below, image dimensions are 966*199px. Note: image height remains unchanged even if you upload higher top image.

new-image.png

Top area that is not covered with image is filled with a background color that you can change via Diazo Theme : 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.

Specify valid css color as a new value for top_bg_color parameter, e.g #cff5ff

diazo_color.png

So, you can set such background color to fit your new image:

new-color.png

In case you upload smaller top image: the rest of top area will be colored with a background color you specify:

new-top.png

Connect with our experts Let's talk