« Ten Dimensions of a Web Application | Home | Lies, Damned Lies, And Statistics »

Customizing the Technorati Tag Cloud

Illustration: Wrenches

Most blog readers have now seen Tag Clouds. Technorati recently introduced a new widget that displays ... "your top tags with the Blog Top Tags in a beautiful cloud formation".

The trouble is, blogs come in all shapes and colors. So the size, shape, and colors of Technorati's standard tag cloud widget may neither look good, nor fit well, where you would like to display it in your blog's layout.

What can you do about that?

The Technorati code

Technorati publishes this snippet of HTML you must include on your site, to display their tag cloud widget:

<script src="http://widgets.technorati.com/t.js" type="text/javascript"> </script>
<a href="http://technorati.com/blogs/{URL}?sub=tr_tagcloud_t_ns" class="tr_tagcloud_t_js" style="color:#4261DF">View blog top tags</a>

Note: do not copy my source for the code above.
It uses &lt; and &gt; to display the characters < and >.

This code uses JavaScript to generate a tag cloud based on Technorati's index of the site. Unfortunately, Technorati's implementation is not very friendly. Google (for example) lets you customize their standard Ad banner code so that their generated Ad layouts blend with your site's colors. The style of Technorati's tag cloud, in contrast, is controlled by fixed code generated by JavaScript when the page is rendered in a browser.

This generated code is neither easy to see, nor easy to override with CSS statements. I use the Firefox Web Developer extension to view CSS markup, but it did not show me Technorati's generated markup.

I wanted to make the cloud narrower to fit in my sidebar, hide Technorati's headings, reduce the size and spacing of the text throughout, and change the color scheme to blend with mine. However, my initial CSS attempts had little effect. I could hide the headings, but otherwise the widget remained annoyingly unchanged!

While wrestling with this I searched for hints online, and found some discussion (and complaints about Technorati) at the blog A Consuming Experience. That still did not answer my questions, but after a lot of "black-box" testing I eventually found some CSS selectors that worked. I posted my findings as comments at A Consuming Experience, which I'm now summarizing here.

My solution

First I enclosed Technorati's standard code by <div class="cloud"> and </div> tags to create a unique CSS class -- "cloud" -- to select and format. Then I was able to adjust the widget's format by adding statements to my CSS template, as follows:

Hiding the headings

I wanted to hide the two headings at the top, and the "powered by Technorati" image at the bottom:

.cloud h3, .cloud h4, .cloud img { display: none; }

Formatting the headings

Maybe you want to retain the headings, but reformat them. I was able to format the first heading using:

.cloud h3 a { color: #804000!important; }

Note that the first (h3) heading is also a link (a) and Technorati must be generating the link color, which overrides the h3 color. That's why trying to specify the color of the heading alone does not work in this case. I also had to add the !important directive to give my specification sufficient weight to override theirs. I believe that other font properties that Technorati is not generating inline will not require the !important directive.

The second (h4) heading can be reformatted more simply, with the minimal CSS:

.cloud h4 { color: #804000; }

Adjusting widget size and border

I wanted to format the widget to fit in my sidebar, and look nice:

.cloud .tr-blog-top-tags {
width: 176px!important;
border: 1px solid #668899;
padding: 2px;
margin: 5px 0 0 0; }

I discovered that it would not resize until I included the !important directive with my desired width, but that seems to be enough to force my CSS to override whatever Technorati is generating. This was the key lesson I learned while doing this.

Changing tag text color

I realized that since the tags are also links, they might respond to the same technique as the h3 did. And they do -- this will adjust their color:

.cloud li a { color: #668899!important; }

Adjusting text size and spacing

I wanted smaller text and less white space. After a lot of trial and error, I settled on this:

.cloud .tr-blog-top-tags ul li {
margin: 2px;
padding: 0px;
font-size: .9em;
line-height: 1.2!important;}

No doubt other combinations would achieve similar results!

Formatting link rollovers

I wanted the link rollovers to behave like the rest of my blog:

.cloud .tr-blog-top-tags li a:hover {
border-bottom-color: #804000!important;
border-bottom-style: dotted!important;
border-bottom-width: 1px!important;
color: #804000!important; }

Again, I had to use the !important directive to get my way.

Adding a background color

I was also able adjust the tag cloud background color, using:

.cloud ul { background-color: #EEEEDD!important; }

Your feedback welcomed ...

If you have read this far, you've probably seen the result on the right. It's below the content search box. If you see just a link to Technorati, you may have to refresh the page to make the actual cloud widget appear. I assume this is due to an interaction between the JavaScript and the browser's rendering engine.

Naturally, the colors and size parameters I used in my code can be adjusted to suit your own needs. And I don't claim to be a CSS guru, so my code may not be optimal, but it does seem to work in both IE and Firefox. If you find a problem, or have suggestions for improvements, please add a comment below.

Thanks in advance!

Update [8/16/2007]: Just in case anyone is reading this and can't match my results on the right, don't worry! I've actually made further slight adjustments to my font sizes, spacing, and color scheme since I wrote this post. Check my actual CSS if you want to see what I'm currently using.

Tags: , , , , , , ,

Posted on Sunday, May 27, 2007 at 03:00PM by Registered CommenterChris Loosley in , | Comments6 Comments

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (6)

Thanks! This worked for me perfectly!

August 17, 2007 | Unregistered CommenterLance Robinson

Thanks for the confirmation, Lance. This Javascript/CSS interaction is a black box (to me), and I've never tested my code on any other blogging platform. So it's good to hear it works for others. --Chris

August 17, 2007 | Registered CommenterChris Loosley

Thanks for a great post. I have a question. If I want the alignment of the tag cloud to be right, rather than the default left, what code do i use and where in my css do i place it? I've created the class "cloud"

thanks

Mark

October 1, 2007 | Unregistered Commentermark collinson

Mark,

The ".cloud ul" selector worked for me. Modify my last recommendation above (re background color) to be:

.cloud ul {
background-color: #EEEEDD!important;
text-align: right; }

Or, if you don't want to change the default background color, just omit that line.

I had dropped the tag-cloud widget from my sidebar, but I will re-activate it (temporarily) for you, to demonstrate the result.

--Chris

October 1, 2007 | Registered CommenterChris Loosley

Mark,
I've been showing the right-aligned tag-cloud widget in my sidebar for a month, so I'm going to remove it now. I can re-activate it for you later if you have further questions.
--Chris

October 31, 2007 | Registered CommenterChris Loosley

This was my problem for a several days until I found your article regarding customizing technorati tags. It really works find.

Thanks for the hacking codes.

October 4, 2008 | Unregistered CommenterJake

PostPost a New Comment

Enter your information below to add a new comment.
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>