Part 6. How to Change SkyCream Columns Width

Tutorial about changing width of SkyCream Plone 4 Theme columns.

The following tutorial covers changing of SkyCream Plone Theme columns width in Plone 4.0 and Plone 3. Instruction for diazo SkyCream theme - see in Column Width Customization in diazo SkyCream theme tutorial.

SkyCream Theme has default Plone column structure changed: first portlet column is moved beneath content area and its portlets are displayed horizontally. Second columns is displayed in the same way as in default Plone - on the right to the content area.

columns

To change columns width - go to ZMI interface and select portal_skins -> theme_skycream_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 284px, column two is wider and its width is 333px. In case you want to change these numbers press Customize button.

customize

In the opened window change columnOneWidth and columnTwoWidthvalues. Do not delete px. If you change any columnWidthvalue you should change the corresponding columnWidthIntegervalue as well, but put no px here. The numbers in ColumnWidth and ColumnWidthInteger lines should coincide so that skin view is not broken.

customize-page

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 (CSS Registry):

portal-css

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

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