Part 2. How to Change Uni Theme Columns Width

Tutorial about changing width of Uni Plone Theme columns.

This tutorial covers customization of Uni Plone Theme column width in Plone. For diazo theme version - see Uni diazo Plone Theme column width in Plone 4.1 tutorial.

Uni Plone Theme has default Plone column structure changed: first (left) portlet column is displayed in the same way as in default Plone - on the left to the content area, but second (right) portlet column moved beneath content area and its portlets are displayed horizontally. Width of every portlet in the second column is 236px - there can be 4 portlet in one row.

columns

To change columns width - go to ZMI interface and select portal_skins -> uni_styles. This folder has base_properties document, that contains information about Plone's color, logo and border defaults.

base

At the bottom of this page you will see values that control columns width - columnOneWidth and columnTwoWidth. Now column one width is 307px, column two is wider and its width is 236px. In case you want to change these numbers press Customize button.

customize

In the opened window change columnOneWidth and columnTwoWidth values. Do not delete px. If you change any columnWidth value you should change the corresponding columnWidthInteger value as well, but put no px here. The numbers in ColumnWidth and ColumnWidthInteger lines should coincide so that skin view is not broken. Let's for example put columnOneWidth=207px, then columnOneWidthInteger=207.

customize-page

Now return to the Plone interface and you'll see your changes applied.

changed.png

By changing columnTwoWidth value you can configure how many portlets to be located in one second portlet column row.

Connect with our experts Let's talk