Add-on Tools and Theming Tips for Plone 3

0
91
9 min read

(For more resources on Plone, see here.)

Popular add-on Plone products

One of the best things about open source development is the proliferation of products to solve common use cases. Plone themers are fortunate to have a solid set of tools available to them to solve these use cases.

Enabling drop downs using webcouturier.dropdownmenu

As most themers know, a lot of clients desire drop-down menus. In the past, this required coding HTML strings and the use of a product by Quintagroup named qPloneDropDownMenu. This product is still the recommended drop-down menu product for Plone 2.5x, but for 3.x, the real star is Denys Mishunov’s product, webcouturier.dropdownmenu.

The joy of this product is that you install it, and it works instantly. The product works by subclassing the globalsections viewlet via the following code, found in the browser/configure.zcml file of the webcouturier.dropdownmenu product:

<!-- Override global sections viewlet -->
<browser:viewlet
name="plone.global_sections"
manager="plone.app.layout.viewlets.interfaces.IPortalHeader"
class=".dropdown.DropdownMenuViewlet"
layer=".interfaces.IDropdownSpecific"
permission="zope2.View"
/>

In the event that you’ve already customized your globalsections viewlet, you will have to subclass the DropdownMenuViewlet class in the webcouturier.dropdownmenu product.

Unlike older drop-down menu products, webcouturier.dropdownmenu does not require any ongoing maintenance or manual adjustment of URLs. It is controlled by the navigation settings found in the Site Setup area, so you can control what types of items display in the navigation. The product also provides some basic CSS styling that can be easily adjusted in your own theme product, if desired. It can be downloaded here: http://plone.org/products/webcouturier-dropdownmenu/

Collage

Another helpful Plone product is Malthe Borch’s Collage. Collage allows you to create a grid containing rows and columns, and within those columns you can pull in the contents of other objects—a folder, a page, a collection, or even an image. Using this mechanism, you can create a complex page layout without knowing any programming.

Until very recently, Collage did not have hooks that allowed it to be styled using CSS, and it did not respect different views. For example, if you created a special mysection_view.pt (same as a homepage_view), and you assigned that view to your page, Collage would default to the original document_view. This behavior has now been altered so that CSS hooks are available and different views are respected. This is a huge win for sites that are heavily styled and need to maintain consistency.

It’s suggested that when using Collage, you do not create your objects within the Collage itself; you should instead create the objects in your normal Plone content tree, and pull those items in as aliases. The reason for suggesting this is that it is not possible to access the contents of a Collage via the standard folder_contents view that is normally possible in a folder. Hence, if you need to move that content to another area of your site, you cannot. This also invites some jeopardy when migrating to a new version of Plone.

It’s worth mentioning that Collage will not become part of core Plone in the future, as the mechanism for organizing blocks of content on a page in the future will be accomplished via a new drag-and-drop mechanism. The lead programmer for Collage has stated, however, that there will be a migration path, but the reality of this is unknown.

Finally, the usability of the Collage product is a bit clunky, but with some common sense, it’s easy to use and can be a quite powerful layout tool for Plone 3. It can be downloaded here: http://plone.org/products/collage.

Tableless styling using Plone Tableless

A popular product for CSS purists is Simon Kaeser’s plone.tableless. Plone’s default main_template is created using tables, which many themers do not wish to use. To get a tableless version of Plone’s main_template, simply install this product; make sure your site’s portal_css is in debug mode, and test the following code:

#portal-column-one {float:right;}
#portal-column-two {float:left;}

If you’re able to switch the position of these two columns, the product works and you can style in full tableless mode.

There are a few issues with Plone and tableless layouts that are unrelated to this product, but in general it works. As of this writing, the product was not tested against some of the newer browsers. It can be downloaded here: http://plone.org/products/plone-tableless/.

CSSManager

End users often want to have some control over basic modifications to their site—background color, link colors, and so on. The WebLion Group from Penn State University created CSSManager, a product that gives a simple, through the web interface to let users change the colors, borders, site logo, and other visual characteristics of their Plone site. Essentially, it uses the DTML variables defined in the base_properties.props file available within Plone.

The product can be downloaded here: http://plone.org/products/cssmanager. To use it, install the product, go to your site’s Site Setup area, and find the configlet for this tool, and try changing a few options.

The CSSManager tool will supersede a theme product’s base_properties if the CSSManager skin layer is above the theme product’s skin layers in portal_skins/properties in the ZMI. If uninstalled, your settings can still be found in the custom folder for your Plone site via this URL: http://localhost:8080/mysite/portal_skins/custom/base_properties/manage_propertiesForm. So you can feel confident removing it if you no longer need it.

Products.EasyAsPiIE

Until IE7, there was no fully native support for PNG alpha channel transparency in Internet Explorer. However, since IE5.5, there has been some support in the form of a proprietary filter called AlphaImageLoader. Internet Explorer filters can be applied directly in your CSS (for both inline and background images), or by setting the same CSS property with JavaScript.

Unfortunately, there’s no CSS property called filter in the W3C CSS spec. It’s a proprietary extension added by Microsoft that could potentially cause other browsers to reject your entire CSS rule.

Also, AlphaImageLoader does not magically add full PNG transparency support so that a PNG in the page will just start working. Instead, when applied to an element in the page, it draws a new rendering surface in the same space that element occupies and loads a PNG into it. If that sounds weird, it is. However, by and large the result is that PNGs with an alpha channel can be accommodated.

The WebLion Group’s Products.EasyAsPiIE product uses this filter approach to handle transparent PNGs with IE6. All it does is enable JavaScript written by Angus Turnbull: http://www.twinhelix.com.

You can download it from here: http://plone.org/products/productseasyaspiie/ and follow the installation instructions.

Optionally, if you choose not to use this product, you can also just export to PNG8 format, instead of PNG24, to get around IE6 problems, and of course there are a lot of alternative solutions out there as well. You can read more about PNGs here: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/. Both Photoshop and Fireworks can export to PNG8, though other graphical programs may not.

collective.skinny

Another Plone product that has surfaced is Daniel Nouri’s collective.skinny, which can be downloaded from http://plone.org/products/collectiveskinny/. This product is an example implementation of a separate, public-facing skin that abstracts away some of the complexity of the theming process. According to the product page, it’s been described as being vastly easier than skinning Plone the conventional way, but it also has a few drawbacks. For example, you can’t use it for community sites where people other than your site editors log in and modify content. It’s also a little confusing from my perspective, but it’s a product adventurous themers might pay attention to.

It’s probable that Deliverance and collective.xdv (the future of theming for Plone) will make this product obsolete, as Deliverance removes a lot of complexity and makes theming accessible to individuals who don’t even know what Plone is.

FS Dump

For themers who started their skin creation through the web or who have content they wish to extract from the ZMI, FS Dump is an excellent tool. To use it, download the product from http://www.plone.org/products/fsdump and follow the installation instructions. This is a product that lives in the Products namespace, so it is not installed like egg-based products.

Once installed, use the Add drop-down menu, found at http://www.mysite.com/manage_main, and create a Dumper instance in a folder (or product) that contains the TTW code to be dumped. This tool appears to work best when trying to dump items from the custom/ folder, though, hypothetically, it should work for any other folder in the ZMI.

Next, supply an absolute path to a directory on the filesystem in which the dumper is to create the files, for example /opt. (Note that the user for whom Zope is running needs write access to this directory.)

Click the Change and Dump button to do the dump to the indicated directory, and then copy the dumped files into your theme product’s skins/ folder in the appropriate locations.

qPloneSkinDump

Another popular dumper product is known as Plone Skin Dump (qPloneSkinDump) by Quintagroup. Plone Skin Dump allows users to create a Plone product in the Products namespace by exporting the custom/ folder. It creates an old-school Plone theme product for you, but it does not provide the plonetheme-type of product. The product has not been tested against Plone 3, so it may not be the best option. Moreover, at the time this article was written, it was not possible to download the product from its SourceForge repository.

In the event you wish to try this product, you can find it here: http://plone.org/products/plone-skin-dump. Again, it is in the Products namespace, so all you need to do is drop it in your buildout’s products/ folder. You can then follow the directions posted on the product page. It’s a bit more complicated than FS Dump, but obviously it does a bit more.

Collection and static portlets

While portlets are not add-on products, they are tools that can greatly enhance the impact of your site and worth mentioning.

Default Plone provides collection and static portlets that can be added on any page by clicking on the Manage Portlets link on your site. These portlets provide great power and can be styled using CSS. A collection portlet, for example, can be set to display random contents fitting certain criteria—maybe a randomized spotlight content type tagged with a special keyword. This keeps the look and feel of a site fresh and gives some power to the end user.

These portlets have the same structure as other portlets, so they will use any default styling that may be applied.

LEAVE A REPLY

Please enter your comment!
Please enter your name here