Styling the Orchard Tag Cloud so it looks like a cloud, not a list

A side-by-side comparison of the tag cloud sat on my blog, before and after I applied some styling that actually makes it look like a tag cloud

I've had a tag cloud sat on the right-hand side of my blg (or down the bottom for those viewing on mobile devices, or computers with tiny screens) pretty much since I set it up on Orchard. The tag cloud is provided by a built-in module, and has been since February 2014 (according to the GitHub commit history) when it made its way in from the Orchard.Module.Vandelay.Industries module. I mention this because the solution to my tag cloud being a tag list came yesterday when I somehow landed on a question titled How to use vandelay tag cloud in Orchard CMS blog which was answered by Bertrand Le Roy way back in November 2012 giving me exactly what I needed to style the cloud to work for me! The answer's a little out of date with regards to class names but the principles of it are exactly what I needed. I'll document how I've styled my tag cloud so there's a reference that may be useful to others.

Styling the Orchard Tag Cloud

The first thing to be aware of when you're styling your tag cloud is that there's an element of the way you've configured the tag cloud widget that'll impact how you setup your CSS, specifically the number of buckets that you've configured against the cloud:

Widget configuration showing the 'Buckets' field where you set the number of buckets tags should be allocated to

The number of buckets set, as noted by the informational text under the field determines how many different sizes of tags will be rendered. Or it does if there's any styling associated with the relevant classes! I call this out because the answer by Bertrand is for a tag cloud with 10 buckets, you'll want to adjust the styling of your classes accordingly. The specific styling I've applied to my site is:

ul.tag-cloud { list-style: none; }
li.tag-cloud-tag { display: inline; }
.tag-cloud-tag a { border: none; }
.tag-cloud-tag-1 { font-size: 1em; }
.tag-cloud-tag-2 { font-size: 1.3em; }
.tag-cloud-tag-3 { font-size: 1.5em; }
.tag-cloud-tag-4 { font-size: 1.7em; }
.tag-cloud-tag-5 { font-size: 1.9em; }

This is setup for the 5 buckets I've chosen and gives a reasonably distinct change in size between the first and last buckets. Of note is the fact that the names of the classes have changed since the answer given on Stack Overflow, though that was sufficient to push me in the right direction.

About Rob

I've been interested in computing since the day my Dad purchased his first business PC (an Amstrad PC 1640 for anyone interested) which introduced me to MS-DOS batch programming and BASIC.

My skillset has matured somewhat since then, which you'll probably see from the posts here. You can read a bit more about me on the about page of the site, or check out some of the other posts on my areas of interest.

1 Comment

Add a Comment