Vandelay Tag Cloud styling

Topics: Customizing Orchard
Oct 28, 2012 at 4:26 AM

Hi there,

So I have installed the Vandelay module and have added the Tag Cloud widget to the SecondAside panel and after adding a few tags to some of the content up it comes.

The issue I have is.. how do I take the display from being a list to one where it displays the tags in different sized fonts according to the frequency of the tag....

This, I think, relates to using JQuery to style the widget but I am unsure how you do this...


Kind Regards



Oct 28, 2012 at 5:52 AM
Edited Oct 28, 2012 at 5:53 AM

According to the module's description you should be able to do it by just applying CSS rules. No jQuery required. Have a look at the generated HTML source to see what css classes you need to target.

Oct 29, 2012 at 7:54 PM

Yes. Here is what I use on one of my sites:

/* Tag Cloud */
ul.tagCloud { list-style: none; }
li.tagCloud-tag { display: inline; }
.tagCloud-tag a { border: none; }
.tagCloud-1 { font-size: 1em; }
.tagCloud-2 { font-size: 1.1em; }
.tagCloud-3 { font-size: 1.2em; }
.tagCloud-4 { font-size: 1.3em; }
.tagCloud-5 { font-size: 1.4em; }
.tagCloud-6 { font-size: 1.5em; }
.tagCloud-7 { font-size: 1.6em; }
.tagCloud-8 { font-size: 1.7em; }
.tagCloud-9 { font-size: 1.8em; }
.tagCloud-10 { font-size: 1.9em; }

Oct 29, 2012 at 10:02 PM



That helps alot... many thanks.