Brio Plone Skin Customization Tutorial

This Plone tutorial will teach you how to customize Brio Plone Theme. Here you will find information about how to replace theme company logo, how to fill top areas with new content, how to change images for random rotation, and how to change the width of columns.

The following tutorial covers customization of Brio Plone Theme on a Plone 3 website.

It consists of four parts, in which you will find explanations about how to customize Brio Plone Skin to your needs. Use the navigation on the right to navigate through all tutorial sections.

Imagine we have a new Plone 3 site with Quintagroup's Plone Brio Skin installed. Front page will approximately look the following way, where:

Brio Plone Theme

  1. Default company logo that may be replaced with yours
  2. First Static portlet reserved for a custom content. Its content can be different for different folders. Three images are predefined for random rotation on this area.
  3. Second Static portlet reserved for a custom content. Its content can be different for different folders. Three images are predefined for random rotation on this area.
  4. Search Box moved to the navigation portlet (more convenient way of navigation)
  5. Default Plone second-column portlets are placed at the bottom of the content area by 3 portlets in a row. They are managed as in default Plone.

Theme Customization

All the changes in Brio Plone Theme can be done in two ways: via Zope Management Interface and via File System.

1. Zope Management Interface (ZMI)

Switch to ZMI (this can be done by adding /manage to site URL), open portal_skins -> qBrio folder. This is a folder in which all skin customization will take place.

zmi

2. File System

To get to File System in Windows use WinSCP program, in Linux - with Krusader program. Login to your Quintagroup Plone Hosting account. (In case you do not know how to connect to your account, follow description from Plone Products Installation in Linux and How To Install Plone Products (in Windows) up to the moment you get to Products folder.

Find qPloneSkinBrio folder among other Plone Products:

products

Select skins folder:

skins

It includes qBrio folder:

qbrio.png

This is the folder where all the following changes will take place.

Connect with our experts Let's talk