Rounding the bottom corners

Let's go back to our graphics application to create just one more image. This image is to be used as the bottom part of all portlets, even the Calendar. It should be high enough to "dress" up the Calendar even when it spans 6 weeks, as some months do.

This is the image that I've created for this purpose:

• Bottom.png
  

Yes, it is really there. It's a simple image, 154 pixels wide, it looks empty but it contains only the bottom contour of the portlets (notice the round bottom corners).

Regular portlets will only use the bottom 6 pixel rows, but the Calendar will use most of it.

You must now upload this "Bottom.png" image to your "custom" folder using the same method as before.

And then you can open the "ploneCustom.css" file again (the one in the "custom" folder in ZMI) and finally add the following CSS rules:

dl.portlet {
  background: url(Bottom.png) bottom right no-repeat;
  padding: 0 0 6px 0px;
  border: none;
}

.ploneCalendar {
  border: none;
  background: url(Bottom.png) bottom right no-repeat;
}

"dl" stands for "Definition List" and it's the little known HTML component used by all portlets except Calendar. It's the enabler for this CSS only solution.

Notice also the "border: none" rules on both HTML components, because the "Bottom.png" image is providing its own borders and this way we also fix the problem in Calendar's header.

That's all it takes!

Save these changes... and... voilà:

All the portlets are now perfectly rounded, no changes have been made to files that might get changed during the next Plone upgrade.

Well... actually it is possible that "base_properties" will go away in a future Plone release--there is talk about turning Plone's CSS files into static files in order to improve performance. Depending on how it's implemented, it might take away their ability to read parameters from preference files such as "base_properties".

If that happens or if you want to be more future proof right now, just add the following CSS rules to "ploneCustom.css" instead of customizing the "base_properties" file:

body #visual-column-wrapper {
  margin-right: -176px;
}

body #portal-column-content {
  margin-left: -176px;
}

body #portal-column-content #content {
  margin: 0 176px 0 176px;
}

body #portal-column-one {
  width: 176px;
}

body #portal-column-two {
  width: 176px;
}

These rules do the same thing that you had done in "base_properties" at the beginning of this tutorial, and now we've only customized one single file: "ploneCustom.css".

I know, I know... the site still looks a lot like Plone, which is not a bad thing mind you, but... for example: the tabs are still very "pointy"... somebody might get hurt!

In other words, it looks good but being a CSS based site it could look even better, much-much better!

This is where you come in! There are lots of resources on the Internet showing you how to make good looking tabs using CSS, or showing you how to make translucent panels even on older versions of IE using CSS, and there is a lot of inspiration and good CSS techniques available on sites such as CSS Zen Garden (http://www.csszengarden.com/)

You can make your Plone-based website look as good as you want it to look, just by using CSS and a few additional images, all the while keeping your site readable on every browser ever made, and you can now use the method described in this tutorial when you feel it can help you get the look you want.

Good luck!