Part 3. How to Change Plone 4 Twirl Theme Column Width

Tutorial about changing width of Twirl Plone Skin columns on a Plone 4 site.

The following tutorial covers changing of Twirl Plone Theme columns width on a Plone 4 website. Instruction for

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

twirl

We can change column width by defining first and second column width, then content area width will be is generated on the basis of the other two, while site width remains unchanged.

Column width values can be changed via ZMI. Open base_properties file in twirl_styles folder.

base

Now column one width is 200x, column two width is also 200px. In case you want to change these numbers press Customize button.

customize-all
customize-col.png

In the opened window change columnOneWidth and columnTwoWidth from values from 200px to your new column width. Do not delete px. If you change columnOneWidth or columnTwoWidth value you should change the corresponding columnOneWidthInteger and columnTwoWidthInteger 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 put, for example, columnOneWidth value = 150px, then columnOneWidthInteger value = 150. And columnTwoWidth value = 240px, then columnTwoWidthInteger = 240. Save changes.

customize-page

Now return to Plone Interface and you'll see your changes applied: column one narrowed (from 200 to 150px), column two widened (from 200 to 240px).

changed

In case your changes were not applied instantly, this means that CSS styles remained cashed and should be reloaded. For that go to ZMI -> portal_css:

portal-css

Check Debug mode and save changes. Please make sure the page is loaded completely when you are saving debug mode, otherwise some css styles may be lost.

In case you notice that after debug mode turned on your website slowed down, get back to portal_css and uncheck debug mode.

debug

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

Connect with our experts Let's talk