Skip to content. | Skip to navigation

Personal tools
Sections
You are here: Home A cloud of colors in Plone
Navigation
 

A cloud of colors in Plone

by Irene Capatti — last modified Nov 25, 2009 07:00 AM
Filed Under:

A small customization to Vaporisation's template, an excellent product for viewing tagcloud.

TagCloudVaporisation (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 :)

Document Actions
Powered by DISQUS comment system