Part 4 - How to change columns width


Content area on a site where Flow Plone Skin installed is subdivided into three columns: column one and two are usual portlet column, column three - is a content area.
 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 through Zope Management Interface

Go to ZMI interface and select portal_skins in the left navigation menu.
zmi-portal-skins

In portal_skins contents select qploneskinflow.
qploneskinflow


This folder has base_properties document,
base

that contains information about Plone's color, logo ans border defaults:
base-properties.png

Now column one width is 234px, column two width is 174 px. In case you want to change these numbers press Customize button. 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, than 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 through 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

Now column one width is 234px, column two width is 174 px. In case you want to change these numbers - 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, than columnTwoWidth value = 250px.

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 narrowed, column two widened with navigation items lines widened as well.
info@quintagroup.com