A cloud of colors in Plone
A small customization to Vaporisation's template, an excellent product for viewing tagcloud.
Vaporisation (also available as an egg) can display on your site a portlet with the cloud of the keywords used in the site.
If you are not satisfied with the standard monochrome display, you can quickly customize the template to add the CSS classes that give more color.
Copy the original template cloud.pt in your browser folder on your Plone theme (the classic theme created with paster).
Go to the configure.zcml file in the same folder and add these few lines:
... <include package="vaporisation"/> <!-- Portlet tagclouds --> <plone:portletRenderer portlet="vaporisation.interfaces.IVaporizedCloud" template="cloud.pt" layer=".interfaces.IThemeSpecific" /> ...
Save and Close.
Now open your file cloud.pt. First, you could add to portlet a specific css class:
<dl class="portlet portlet-tagcloud"
i18n:domain="vaporisation"
tal:attributes="id string:portlet-${context/getId}"
...
Moved a bit lower down, where tags are defined:
<a href=""
tal:content="tag/name"
tal:attributes="style string:font-size: ${tag/size}%;;;
href string:${link}${tag/name};
title string:${tag/name} (${tag/weight});" />
Add to the attributes list the CSS class:
<a href=""
tal:content="tag/name"
tal:attributes="style string:font-size: ${tag/size}%;
class python:'size_'+str(tag['size'])[:2];
href string:${link}${tag/name};
title string:${tag/name} (${tag/weight});" />
There is no need to change much, nor to extend the original python class.
In this way each different tag size will be associated with a CSS class like "size_10", "size_11" , ..., that you can assign a color:
...
.vaporized-tag a.size_13 {
color: #006600;
}
.vaporized-tag a.size_14 {
color: #008080;
}
.vaporized-tag a.size_15,
.vaporized-tag a.size_16 {
color: #761911;
}
...
The end result will not be very different from this ... look at the bottom of the page :)

