Part 3. How to Change Default Top Background Images

Tutorial about customizing Brio Plone Theme top portlets' 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):


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


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:


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:


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


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


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


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

Connect with our experts Let's talk