Part 3. How to Change Default Top Background Images

The following tutorial covers changing of Brio Theme top portlets background images on a Plone 4 website. Instruction for changing them in Plone 3 - see in How to replace Brio Theme top images in Plone 3 tutorial.

Brio Plone 4 Theme can include one or two portlets on its top area. Portlets text will be displayed on the following yellow and brown background images (if portlets are assigned to columns A and B):

brio

And on the following background image (if portlet is assigned to column C only):

image-big.png

You can replace those default images with yours via Zope Management Interface (ZMI). Go to ZMI and select portal_skins -> brio_plone_theme. You will see top-brown.png, top-yellow-wide.png, and top-yellow.png images that are used as default portlet background images:

qbrio

Let's for example replace the images, used for the top area right part - for this open top-brown.png image to see information about it, including its Id, dimension, size, modification date. Press Customize to replace this image with a new one:

customize-top-brown.png

Browse your local disk for the necessary image and press Upload:

image-browse.png

Now this image will be used as default top portlet column B background image:

new-images.png

When you return to Plone interface, you'll see the image, you've just uploaded on the top area right part:

brio-new

In the same way you can customize default yellow and yellow-wide images.

Follow