Ensuring that the portlets' width remains constant

The standard Plone skin is not very good at ensuring that portlet width is always the same because it uses the HTML <table> element to divide the page in the 3 columns that have the portlets on the left, the main content, and the portlets on the right.

That's why we are going to switch to the "Tableless" Plone skin that is CSS based. To switch to tableless, you need to install this product:

http://plone.org/products/plone-tableless/

You may need to refresh your browser to see the product take effect and / or reload your portal_css by hitting the "Save" button.

Using this "Tableless" skin does help ensure that the portlet's width remains constant but it alone is not enough. We don't want the width to change even if the user changes the page font size on his or her web browser.

To deal with that possibility we must go to Zope Management Interface (ZMI)--the engine behind Plone. That's where we change things that can't be configured yet using Plone's Control Panel, and it is where we will do must of our work during this tutorial.

Access to the ZMI is available on Plone's Control Panel.

On ZMI's main management page you see a list of the many components that make up Plone, some of which are folders with sub-components.

We want to customize the current skin. The component folder that we must select is the "portal_skins".

As we do so we enter another list of components that have to do with what Plone looks like.

We are going to work with CSS. The CSS files are under the "plone_styles" sub-folder, and so is the "base_properties" file where we are going to specify the exact width for our portlets. If you are working on the filesystem, this file should be automatically generated for you by the plone3_theme paster recipe. You can find this file in the "styles" folder inside skins/. (Although the steps below cover how to do this through-the-web, you should really be doing this on the filesystem.)

At this time you must click on the "base_properties" file.  It shows you a list of preferences. In order to be able to change these preferences you must click on the "Customize" button up at the top of the page.

This file has now been automaticaly moved to the "/portal_skins/custom" folder in the ZMI.

We can now modify it. As you scroll down to the bottom of the customized "base_properties" page you'll find the "columnOneWidth" and "columnTwoWidth" fields.

You must change both to 176px, and then click on "Save Changes".

There is one more thing to change: It is the padding that exists beside each portal column. But default it is configured to change if the font size happens to be changed by the user. That would affect the portlet's width as well--if the padding becomes wider because the user enlarges the browser's font size then the portlets become narrower.

To make this padding constant we must make the first customization to the CSS rules by hand:

To do that you must go back to the "/portal_skins/plone_styles" directory in ZMI and customize the "ploneCustom.css" file. This file is meant precisely for such customizations, unless you have a filesystem theme product where you can make your CSS changes. So let's click on ploneCustom.css.

You see a text file that is all greyed out.

In order to be able to change it we need to press the "Customize" button as we had done before for the "base_properties" file. This will automatically place a copy of it in the "/portal_skins/custom" folder as well, where we can edit it manually.

This file is made up of comments, two of them have special meaning to Plone so we won't touch those two comments. There is another comment line that says /* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */. It marks the place in the file where we are supposed to put our customized CSS rules.

So, at this point you are going to remove that comment line and you are going to type in its place the following CSS rules that will make the padding beside the portlets become constant:

body #portal-column-one .visualPadding {
  padding-left: 22px;
}

body #portal-column-two .visualPadding {
  padding-right: 22px;
}

After you type this in (replacing the comment line mentioned above) you can now click on the "Save Changes" button.

There should be no visual difference in Plone, but we have ensured that the portlets' width remains constant at... let's make some calculations... 176 pixels column width... minus 22 pixels side padding... which results in a portlet fixed width of 154 pixels.

If you'd rather use a different width for your pottlets make your decisions at this point and put the appropriate values in the "base_properties" and "ploneCustom.css" files as described above, so that the resulting portlet width is the one you want.

Now, let's move on to the next step: rounding the corners of our portlet.