Part 4. How to Change Brio Skin Columns Width

The following tutorial covers changing of Brio Plone Theme portlet columns width on a Plone 3 website. Instruction for Plone 4 website - see in Column Width Customization in Plone 4 tutorial.

Content area on a site where Brio Plone Skin installed is subdivided into two columns: column one is usual portlet column, column two - is a content area and, besides, second second-column portlets are placed at the bottom of this content area by 3 portlets in a row.

brio

Column width can be changed: we define first column width, and the second column width is generated on the basis of the width of the first column.

1. How to change column width via Zope Management Interface

Go to ZMI interface and select portal_skins -> qBrio.

qbrio

This folder has base_properties document

base

that contains information about Plone's color, logo and border defaults. Now column one width is 200px. In case you want to change this number press Customize button.

base-properties.png

In the opened window change columnOneWidth value from 200px to your new column width. Do not delete px. If you change columnOneWidth value you should change columnOneWidthInteger value as well, but no px here. The numbers in these two lines should coincide so that skin view is not broken.  Let's put, for example, columnOneWidth value = 340px, than columnOneWidthInteger value = 340.

customize.png

Save changes. Now return to Plone Interface and you'll see your changes applied: column one width widened, with navigation items lines and search box widened as well.

widened

2. How to change column width via File System

There is a base_properties document in qBrio folder:

qbrio-content

Open it and you will see the list of main skin properties: Plone's color, logo ans border defaults:

base-file

Now column one width is 200px. In case you want to change it - change columnOneWidth value from 200px to your new column width. Do not delete px. If you change columnOneWidth value you should change columnOneWidthInteger value as well, but no px here. The numbers in these two lines should coincide so that skin view is not broken. 
Let's put, for example, columnOneWidth value = 300px, than columnOneWidthInteger value = 300.

Save changes. Now restart server so that changes are applied. When you get back to Plone interface you will see your changes applied: column one width widened, with navigation items lines and search box widened as well.

Follow