Easier theming with Content Well Portlets

WebLion products aim to make theming easier

Over the past few years, WebLion has been trying to take some of the pain out of theming Plone sites with products such as:

• CSS Manager, which lets you change colors, fonts, borders and the site logo without touching any code or the ZMI
• EasyAsPiIE, which eliminates the problems that arise from viewing transparent PNG images in Internet Explorer 6
• Gloworm, which enables you to delve into, and customize, the viewlets of your Plone 3.1.6+ site
• CustomNav, which gives you the capability to have different kinds of navigation tree in different parts of your site (very useful in Plone 2.x; can still come in handy for some Plone 3 use cases)
• Entire themes, such as plonetheme.nautica05

Our latest addition to this stable is ContentWellPortlets, a product born out of a need to satisfy recurring demands from clients.

Wanted: portlets "in the center column"

Many of our clients want to have home pages, and/or main section pages, that use portlets all over the place, not just in the left and right columns.

In the olden' days of Plone 2.5, we used to help them write page templates that pulled portlets into the correct places. These templates could be facultatively applied at appropriate points in a site.

Plone 3's viewlets (bless 'em) and 3-column table-based layouts have changed things somewhat.

Instead of writing whole page templates, we have found ourselves adding portlet managers into new viewlets we put into clients' theme products.

This enables some interesting layouts without having to touch a page template. It also means that similar layouts can be applied to different content types (pages and folders, for example), without having to change templates for each of these.

Example 1

For instance, the Penn State College of Communications home page (pictured right) uses two portlet managers in the center well:

• the right-hand one pulls in a portlet that rotates a series of images
• the left-hand one pulls in an RSS portlet (top) and a collection portlet (bottom).

Example 2

On Penn State's Teaching and Learning with Technology website we use collection portlets as "psuedonavigation", to highlight items under a variety of headings.

The site contains 5 sets of collection portlets across the base of each page, above the footer (pictured, left).

Now: a product that does it for you

Given the demand from our clients for portlets in the middle of page layouts, we decided to write a standalone product that could be installed in conjunction with any of their themes. This saves us having to modify theme after theme, one by one.

The result is Products.ContentWellPortlets. As the name suggests, it allows you to add content-well portlets, that is, portlets in the central column (the table cell with the "portal-column-content" CSS id). Specifically, you can add:

• Up to 3 columns of portlets above the page title
• Up to 3 columns of portlets below the page contents, above the footer

Content-well portlets can be added pretty much anywhere on your plone site: on the home page, folders, pages... As with portlets in right and left columns, content-well portlets set on a parent item are inherited by children and grandchildren (etc) unless blocked.

Who can add content-well portlets?

Anyone with the "Portlets: Manage portlets" permission. Typically, this will be someone with the Manager role, but you may have given that permission to another role on your site.

Does much of the work for you, but you may still need to customize your....

...CSS

If you use ContentWellPortlets, you will probably need to write some CSS to style the portlets to match whatever layout you want (one column, two column, three column?). As with other portlets, you may also want to use CSS to style the headers, portlet items, item separators and so on.

With both the above examples, much of the "look and feel" comes from styling with CSS. This is something that our clients are typically very comfortable with: no steep learning curves in this part of the theming process.

...Portlet templates

Depending on what kind of portlet you want to display, you may need to customize the template for the portlet concerned. For example, in the College of Communications theme, we customized the collection portlet template to pull in images where relevant.

However, you may already be customizing these templates for use elsewhere in your site. For example, the Penn State Department of Meteorology's Plone site (in development) wants to display news and events portlets centrally on the home page, but in the right-hand column on some other pages. Customizations to news and event portlet templates apply to portlets throughout the site, regardless of where they are pulled in: our client only needs to do one set of customizations.

Feedback, please!

Please let us know how you are using this product! As ever, bugs and feature requests are welcome.

Stop-press (Dec 17): The technical glitch with the egg should now be sorted. (Thanks ErikRose, RobZoneNet and pumazi for helping hunt down the changes needed to our ReleaseYourProduct wiki page!)