Creative Commons License
This weblog is licensed under a Creative Commons License.
Powered by
Movable Type 3.32

« Telecom Italia News Corporation content agreement | Main | SMS to help emergency services »

Tag cloud in Movable Type sized by CSS

--- This is on off-topic post. It is published for the benefits of other Movable Type’s users, the piece of software that powers this blog ---

How to shorten the size of a tag cloud using Movable Type 3.3.

Tag management is the new feature introduced in version 3.3 of Movable Type that I liked most.

However, the built-in automatic Tag Cloud sidebar simply grows too big for my site, because I have been using dozens of different tags to classify entries in my blog.

I found an easy way to limit the number of tags displayed in the standard Tag Cloud sidebar without editing any template at all, just changing a single line in the CSS stylesheet.

I am using the standard Vicksburg II (theme-vicksburg.css) style supplied with MT 3.3, but the same principle can be applied to any style.

Find the module-tagcloud section in the CSS file where style definitions for the Tag Cloud are located.
For the Vicksburg II style they are as follows:

.module-tagcloud .module-list {text-align: center; }
.module-tagcloud .module-list { list-style: none; }
.module-tagcloud .module-list-item { display: inline; }
.module-tagcloud li.taglevel1 { font-size: 19px; }
.module-tagcloud li.taglevel2 { font-size: 17px; }
.module-tagcloud li.taglevel3 { font-size: 15px; }
.module-tagcloud li.taglevel4 { font-size: 13px; }
.module-tagcloud li.taglevel5 { font-size: 11px; }
.module-tagcloud li.taglevel6 { font-size: 9px; }

Now, if you want to shorten your Tag Cloud by not showing the least important tags of your blog, all you have to do is to add the display: none property to the style definition for the least important level.

That is, change it to:

.module-tagcloud .module-list {text-align: center; }
.module-tagcloud .module-list { list-style: none; }
.module-tagcloud .module-list-item { display: inline; }
.module-tagcloud li.taglevel1 { font-size: 19px; }
.module-tagcloud li.taglevel2 { font-size: 17px; }
.module-tagcloud li.taglevel3 { font-size: 15px; }
.module-tagcloud li.taglevel4 { font-size: 13px; }
.module-tagcloud li.taglevel5 { font-size: 11px; }
.module-tagcloud li.taglevel6 { font-size: 9px; display: none; }

That’s all.

Now your Tag Cloud will be much smaller. If you want it smaller still, you could change higher levels of the .module-tagcloud definitions as well.

I hope this is helpful. Others suggestions are welcomed.
Stefano, Milan, Italy

Comments (2)

ewan:

Brilliant idea, thanks for posting it!

Your entry here got me to notice I didn't have any tag cloud mention in my stylesheet (old template)! I was wondering why I couldn't get it to work! I applied your version and it looks great. Thanks!

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

TrackBack

TrackBack URL for this entry:
http://mt.vertigonet.it/mt-tb.cgi/132

Recent Comments

Kai Brinker on Tag cloud in Movable Type sized by CSS: Your entry here got me to notice I didn'...

ewan on Tag cloud in Movable Type sized by CSS: Brilliant idea, thanks for posting it!...

Tag cloud


All tags

About

This page contains a single entry from the blog posted on August 31, 2006 11:48 AM.

The previous post in this blog was Telecom Italia News Corporation content agreement.

The next post in this blog is SMS to help emergency services.

Many more can be found on the main index page or by looking through the archives.