Rounding the corners of the portlets' headers

To round off the corners of the portlets' headers we are going to create 2 images. (If you are concerned about HTTP requests, you could easily create a sprite image that combines the images into one.) One is to be used as the background for the headers of regular portlets, and the other one is to be used for the header of the Calendar portlet (it is slightly different).

You could start by making a mockup of the kind of round corners you want to have, using a graphics application as I did:

These are the mockups I've made. Note that both images on the right side are the ones to be used with the headers of the portlets. Their width must be precise, in our example the images must be 154 pixels wide, as calculated on the previous page. Their height must be as high as your portlets' titles may need to be (within reason,) imagining the possibility of multi-line titles on aomw portlet's headers. These images are:

• Header.png
• HeaderCalendar.png

Note that for the Calendar we need to put those side triangular arrows that allow the user to scroll through months. I also wanted the calendar portlet to look more like a regular portlet, so I made the header line a little thinner and I put the background of the weekdays line to transparent.

In order to implement this, assuming that you've created similar images for the headers, you must go back to the /portal_skins/custom/ directory in ZMI and you must upload both of these images to it.

At this point your "custom" directory should look like this:

Now to make Plone use these images you must click on "ploneCustom.css" and you must add the following rules below the rules you have entered before:

.portletHeader {
  background: url(Header.png) top left no-repeat;
  border-width: 0 0 1px 0;
}

.ploneCalendar #calendar-previous {
  background: url(HeaderCalendar.png) top left no-repeat;
  width: 22px;
}

.ploneCalendar th {
  background: url(HeaderCalendar.png) top center no-repeat;
  padding: 0;
  width: 154px;
}

.ploneCalendar #calendar-next {
  background: url(HeaderCalendar.png) top right no-repeat;
  width: 22px;
}

.ploneCalendar .weekdays td {
  background-color: transparent;
}

The Calendar portlet is the one that requires the most amount of CSS rules because it is basically a table.

Go check it out. Your site should now look more or less like this:

The portlets' headers have now round corners, and it wasn't too dificult.

Note that the bottom corners are still not round and also that the Calendar seems to still have a square border over the round corners.

We're going to fix all this on the next page.