Part 2. Brio Plone 4 Theme Top area

The following tutorial covers customization of Brio Theme top portlets on a Plone 4 website.

Contents

One or two top portlets & default background images

Brio Plone Theme top area is divided into 3 parts: left part includes site logo, central and right parts are reserved for portlets.

To manage top portlets - follow Add, edit or remove top portlets link that appears in the right bottom corner of the top area when cursor reaches top area.

manage-top-portlets.png

You will see 3 portlet columns: Portlet well A, Portlet well B, and Portlet well C. You can hide existing portlets from display or remove them and add new any types of portlet into these columns.

portlet-columns.png

Portlets, assigned into columns A and B - are displayed in the corresponding central (column A) and right (column B) parts of the top area. Standard Plone portlets, assigned to these columns, will get the following background images.

2portlets.png

If you assign portlet into column C (prerequisite: no portlets in columns A and B) - then this portlet will be displayed throughout both central and right parts of the top area. Standard Plone portlets, assigned to this column, will get the following background image.

1portlet.png

So, depending on how you want your Brio Theme look - select the appropriate variant. Besides, different top portlets can be assigned for different site sections.

If you want to replace Brio default background images with different ones - follow Part 3. Change top images instructions.

Image portlet

If you want an image to appear as a top portlet (see central column):

image-portlet1.png

 

create static text portlet, insert only image into its body text area. Then activate Omit portlet border option:

image-portlet.png

Text on custom background image

To make some text be displayed on a custom background image (see right column):

image-text-portlet.png

Create a static text portlet, insert text and image into its body text area. Assign Carousel Image style for the image (Style... drop-down menu):

carousel-image.png

Carousel with images

To make top area display carousel of images - add Carousel portlet as one of top area portlets (let's create one big top portlet - for this we add carousel portlet into column C).

add-carousel.png

Specify what items this carousel will display (you have to create collection with images beforehand):

edit-carousel.png

Now you will have image carousel on the top area (images are sliding and they change one another every several seconds). Besides, you will see Edit Carousel link that leads to the corresponding collection edit form.

image-carousel.png

Carousel with newsitem, containing images

Brio Plone Theme can display newsitems in a carousel, displaying newsitem title and description on a newsitems image as a background.

Let's for example add several newsitems with images:

news.png

To make them appear in a carousel - add Carousel portlet as one of top area portlets, specify 'News' as a target collection for this carousel. As a result our carousel will display site newsitems on the corresponding newsitem image (the one, attached to the newsitem) - see central part.

news-carousel.png

Connect with our experts Let's talk