Plone 3 Theming — Save 50%
Create flexible, powerful, and professional themes for your web site with Plone and basic CSS
In this article by Veda Williams, we'll take a look at some Plone products that can be used to make your web site even more impactful and manageable. We'll also briefly cover some useful tips to be aware of when theming a Plone site.
(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 -->
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/
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:
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/.
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.
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.
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.
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.
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.
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.
eBook Price: $23.99
Book Price: $39.99
(For more resources on Plone, see here.)
As discussed earlier, a very common need for Plone users is the ability to create sub sites, sectional theming, and URL-based theme switching.
We already looked at how to do sectional theming by using the CSS hooks provided by Plone using shortnames. Another option is sectional theming via the use of Apache's mod_proxy and Zope rewrite rules. This approach will not be covered here due to its complexity, but tutorials on how this can be accomplished can be found at http://www.plone.org/documentation.
To make sectional theming even easier, a product named themetweaker.themeswitcher was written.
This product is another gem written by the great folks at WebLion. It is described as a product for switching themes on folders (only those with the IATFolder interface as of this writing) in Plone. It works only with theme products that are registered as a browser layer, which is not a concept we will cover here. Browser layer declaration is a more programming-oriented process and is described in "Professional Plone Development", Martin Aspeli, Packt Publishing and at http://plone.org/documentation/tutorial/customization-for-developers/browser-layers.
The themetweaker.themeswitcher product has several dependencies that are described in the product's README file, along with basic installation instructions. It can be installed using the instructions found here: https://weblion.psu.edu/trac/weblion/wiki/ThemeSwitcher.
If you install the product using the ZMI's portal_quickinstaller, it gives you an actions tab on your folders in the content area of the page. Assuming you install it via portal_quickinstaller, each folder will have a ThemeSwitcher tab that will bring up the switcher form. Here you will be able to choose from a list of installed themes that use browser layer to register themselves. To determine if the theme is registered as a browser layer, look to see if the theme contains a browserlayer.xml file; if it does, chances are it is registered as a browser layer.
If you do not install the product via portal_quickinstaller, you will need to manually type the switcher form path (for example, http://localhost:8080/plonesite/folder1/switcherform), because the actions tabs have not been installed. This is likely behavior that will be fixed as the product evolves.
The WebLion team is actively trying to solve issues around sub site theming, as explained here: https://weblion.psu.edu/trac/weblion/wiki/SubsiteTheming. Also, be aware that the themes that are installed using this package should have an uninstall routine, as explained here: https://weblion.psu.edu/trac/weblion/wiki/PloneThreeThemeUninstallProfile. Otherwise, you will not be able to uninstall your themes.
Non-Plone-specific products for theming
Plone theming obviously has some community tools that have been created to make the theming process easier, but it's also possible to incorporate some advanced technologies. The following are a couple of non-Plone-specific products that can be used to alter the look and feel of your site.
sIFR (Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents. It is explained in depth at http://wiki.novemberborn.net/sifr3/, and can be seen in action at http://www.dogwoodinitiative.org (see the portlet header elements).
The idea is to use fonts that are embedded within a Flash file and render those on a web page instead of standard text. The process is actually quite simple, but has some delicate syntax that can be a bit painful to get right. It's best to follow the source code found in the official demo (http://dev.novemberborn.net/sifr3/beta2/demo/), and to refer to the discussion forum if you have questions (http://discuss.joyent.com/viewforum.php?id=20).
Here you need to know that some flavor of Deliverance or collective.xdv will be the de facto standard for theming in the future. In fact, it even works now, with some effort and understanding. Plone.org was even redesigned using collective.xdv, with obvious success.
Basically, rules-based theming reduces the process of theming to mere CSS—no fancy viewlet work, no understanding of Zope 2 versus Zope 3 technologies, CMF, and so on. It may introduce more complexity in other ways (themers will need to learn XSLT, for instance), but that remains to be seen.
Best of all? It's not just for Plone. It's available to any technologies that use WSGI (Web Server Gateway Interface) or have an XSLT processor available. WSGI is a specification for web servers and application servers to communicate with web applications (though it can also be used for more than that). It is a Python standard described in depth at http://www.python.org/dev/peps/pep-0333/. You can also read more about Apache's mod_xslt at http://www.mod-xslt2.com/.
Debugging tools and tips
While add-on tools are great for enhancing a web site, debugging tools are also very handy. In this section, we'll look at a Plone product that helps with introspection, and we'll also learn about tracebacks and ways to effectively conduct browser testing.
A commonly mentioned Plone add-on is the helpful GloWorm, written by the WebLion team. It can be downloaded from here: http://plone.org/products/gloworm. GloWorm is an inspection tool that can be useful when doing theming, because it helps you to sniff out different elements on a page. For newer Plone themers in particular, this is a very handy tool.
It provides information such as:
- Archetypes field information
- TAL statements (tal:defines, tal:attributes, tal:content, tal:condition)
- Viewlet registration information
- Inline editing of viewlet templates
- Viewlet manager information
- Reordering of viewlets
- Show/hide viewlets
- Tree-structured view of all viewlet managers and viewlets included in a page
The dependencies are outlined on the product page mentioned before, along with installation instructions.
Once installed, an inspect this page link will appear in the document actions section of content objects on your site. Clicking this link will open up a panel at the bottom of the page, which is the GloWorm Inspector Panel. (You may also open this inspector by appending @@inspect to the current page's URL.)
You can click a viewlet's name to inspect it. From the inspection panel, you can then customize the template by clicking on the Customize button. In the viewlet inspection view, you can also click the viewlet manager name to inspect that viewlet manager and to reorder viewlets. Here is a sample screenshot of GloWorm in action:
The only real limitation to this product is that the actions performed using this tool cannot be extracted out to the filesystem. You're essentially making customizations using the portal_view_customizations tool and by altering GenericSetup TTW, neither of which are easily extracted out. This is less a limitation of the product, and more due to the nature of Plone. In time, GloWorm may become an integral part of theming, though that remains to be seen. The version current at the time of this writing has some instability, but it's a product worth watching.
For a demo of this product, visit this web page: http://weblion.psu.edu/news/gloworm-1.0-screencast. For more information, you may wish to follow the WebLion Group's blog (http://weblion.psu.edu/news/), or visit their IRC chatroom (#weblion).
About tracebacks and Pdb (the Python debugger)
A Python "traceback" is a detailed error message that is generated when an error occurs in executing Python code. Since Plone, running atop Zope, is a Python application, most Plone errors will generate a Python traceback.
To find the traceback, check your event.log log file or go into the error log panel in the ZMI. Alternatively, use the ZMI to check the error log object in your Plone instance. Or, if you're running your Zope instance in foreground mode, you'll see it in your terminal window.
A traceback will be included with nearly all error entries. A traceback will look something like this: Traceback (innermost last): ... AttributeError:adapters. They can be very long. The most useful information is generally at the end. In time, you'll learn to read these errors and debug your code accordingly, even though at first they may seem a bit intimidating.
If you are requesting help on #plone (IRC) or on the plone-users list, you should try to include a traceback log entry with the report. (For #plone, don't forget to always paste your error to http://paste.plone.org and not into the IRC window.)
For the programmers in the crowd, you may also find it useful to use Pdb to step through your errors, as described here: http://plone.org/documentation/tutorial/debugging-tips-and-tricks-a-real-life-example/using-pdb/. Pdb is a Python debugger that allows you to set a trace point in your code, so that you can step through errors. This slideshow by David Glick contains information on Pdb and other troubleshooting methods as well: http://www.slideshare.net/davisagli/when-good-code-goes-bad-tools-and-techniques-fortroubleshooting-plone-presentation (see slide 30).
Running more than one operating system at a time
Virtual machines have turned out to be rather handy for testing against different versions of Internet Explorer. The two most popular products for doing this on Mac are VMware and Parallels, though there are others available for Mac and PC.
You will need a couple of instances set up with the desired operating system installed. Each instance could have a different version of Internet Explorer installed, and at this point in time, IE6, IE7, and IE8 are the recommended versions to install. For IE6 and IE7, you should also install the IE Developer Toolbar, which can be found at Microsoft.com. For IE8, the toolbar is built in. Of course, for Firefox, you should install Firebug (getfirebug.com) and the Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60).
Some minor differences exist between Mac and PC users' versions of Firefox 3, and it's still a good idea to test against Firefox 2, so you may want to install different versions of Firefox as well. Rather than creating new instances for Firefox 2 and 3, it's easier just to piggyback them on top of the existing Internet Explorer instances. You can then tweak your CSS until it works well on Firefox 2 and 3, then Safari, then any other browsers you want to support.
The only downside of using virtual machines is that they can be resource hogs, but they are essential to doing proper testing.
In this article, we have learned about:
- Popular add-on Plone products for changing your site's look and feel
- Possible options for sub site theming
- Non-Plone products that can be used to alter your site's look and feel
- Tools that can be helpful when debugging your themes
You should now have a basic idea of some of the tools that can be used to enhance your site and others that can help you during development.
- Find and Install Add-Ons that Expand Plone Functionality
- Skinner's Toolkit for Plone 3 Theming (Part 1)
- Skinner's Toolkit for Plone 3 Theming (Part 2)
eBook Price: $23.99
Book Price: $39.99
About the Author :
Veda Williams has worked in software development for 18 years, which includes her three-year stint as a Plone skinner. She currently works for ONE/Northwest in Seattle, Washington. Veda is an editor for the documentation section of plone.org, and in addition to this book, she is writing a book on theming for Plone, due for publication in Spring 2009.
Books From Packt