Part 6. How to Change Brio Theme Portlet Columns Width

Tutorial about configuring width of Brio Plone Theme portlet columns.

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

Content area on a site where Brio Plone Skin installed is subdivided into tree columns: column one and column two are usual portlet column with content area between them. Portlet columns width can be configured, besides there are below-content portlets, and their width can also be configured.


To change column width - go to Zope Management interface and select portal_skins -> brio_plone_theme.


This folder has base_properties document


that contains information about Plone's color, logo and border defaults. Now column one width is 200px, column two width id 251px. In case you want to change these numbers -  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, then columnOneWidthInteger value = 300; and columnTwoWidth value = 151px, then columnTwoWidthInteger value = 151. Save changes at the bottom of this page. Note that base_properties file is now kept in custom folder, so for the subsequent chnages - go to custom folder.


Now when you return to Plone Interface - you'll see your changes applied: column one width widened to 300 px, column 2 narrowed to 151 px. Width of portlets below content was not changed yet.


Below Content Portlet Width

To configure width of below-content portlets - get back to base_properties file (it is now located in the custom folder). You will see portletsBelowWidth property at the bottom of this file. Change its value from 241px to what you need. Do not remove px. Let's put portletsBelowWidth value = 157 px.


Now when you return to Plone Interface - you'll see your changes applied: below content portlets width narrowed to 157 px, as a result 3 portlet columns can now be assigned instead of default two.


Connect with our experts Let's talk