Part 4. Change Flow Plone 3 Theme Columns Width

Tutorial about changing columns width for Flow Plone Skin in Plone 3.

The following tutorial covers changing of Flow Plone Theme columns width on a Plone 3 website. Instruction other Plone versions - see in diazo Flow theme column width Customization in Plone 4.1 and  Column Width Customization in Plone 4 tutorials.

Content area on a site where Flow Plone Skin installed is subdivided into three columns: column one and two are usual portlet column with content area between them.

flow

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

1. How to change column width via Zope Management Interface

Go to ZMI interface and open portal_skins -> qploneskinflow. There is base_properties document inside:

base

that contains information about Plone's color, logo ans border defaults. Now column one width is 234px, column two width is 174 px. In case you want to change these numbers press Customize button.

base-properties.png

In the opened window change columnOneWidth value from 234px to your new column width,and columnTwoWidth from 174px to new value. Do not delete px. Let's put, for example, columnOneWidth value = 200px, then columnTwoWidth value = 250px.

customize.png

Save changes. Now return to Plone Interface and you'll see your changes applied: column one narrowed (from 234 to 200px), column two widened (from 174 to 250px) with navigation items lines widened as well.

widened

2. How to change column width via File System

There is a base_properties document in qploneskinflow folder:

qploneskinflow-content

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

base-file

Change columnOneWidth and columnTwoWidth values to the ones you need. Save changes and restart server so that changes are applied. When you get back to Plone interface you will see your changes applied.

Connect with our experts Let's talk