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 devide 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 comes standard with every Plone release, because it's more CSS based.

So, let's assume that you are logged in as a user with administrative priviledges.

First you must click on "Preferences" and then on Plone's control panel's "Skins" item.

On this page you can change the default skin to "Plone Tableless".

As you apply this change it is possible that your browser becomes momentarily confused. For example, the side columns may disappear. If that happens you should click on the page refresh button of your browser while holding down the Shift key, so that the browser's cache is flushed.

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_preferences" file where we are going to specify the exact width for our portlets.

At this time you must click on the "base_preferences" 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_preferences" 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. So let's click on it.

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 it's time to round-off some corners.