Part 4 - How to change columns width

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.
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 through Zope Management Interface

Go to ZMI interface and select portal_skins in the left navigation menu.


In portal_skins contents select qBrio.


This folder has base_properties document,


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. 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 = 300px, than columnOneWidthInteger value = 300.


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.

2. How to change column width through File System

There is a base_properties document in qBrio folder:


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


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.