Matt RaibleMatt Raible is a Web Architecture Consultant specializing in open source frameworks.

10 YEARS


10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

Added a Tag Cloud

I added a tag cloud to this site tonight. Thanks to Rich Sharple's Hacking Roller : Tag Clouds, it was pretty easy. It's currently located in the bottom-right corner. Here's a glance at this site's most popular tags:

acegi appfuse denver grails gwt hibernate ibatis java jsf maven maven2 myfaces rails roller skiing spring springmvc stripes struts struts2 tapestry tomcat travel webframeworks wicket

Enjoy!

Comments:

Aren't you going to make them change size depending on popularity?

Posted by Antony Stubbs on February 13, 2008 at 12:19 AM MST #

It does change size in Safari and Firefox on OS X - maybe you need to use Shift+F5 to get the updated stylesheet? Here's a screenshot.

Posted by Matt Raible on February 13, 2008 at 01:09 AM MST #

Matt, you seem to have better consistency between IE / FF than my version - did you change the CSS ? If so could you post the changes ? Thanks in advance, Rich

Posted by Rich Sharples on February 13, 2008 at 08:13 AM MST #

Rich - you can find the CSS at the bottom of my layout.css. I've pasted it below for your convenience:

/* TAG CLOUD */
.tagcloud {
    padding-left: 10px;
}

.s10 {
    font-size: 18px;
}

.s9 {
    font-size: 17px;
    filter: alpha(opacity=90); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    opacity: .9;
}

.s8 {
    font-size: 16px;
    filter: alpha(opacity=85); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    opacity: .85;
}

.s7 {
    font-size: 15px;
    filter: alpha(opacity=80); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity: .80;
}

.s6 {
    font-size: 14px;
    filter: alpha(opacity=75); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    opacity: .75;
}

.s5 {
    font-size: 13px;
    filter: alpha(opacity=70); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    opacity: .70;
}

.s4 {
    font-size: 12px;
    filter: alpha(opacity=60); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    opacity: .6;
}

.s3 {
    font-size: 11px;
    filter: alpha(opacity=55); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=55);
    opacity: .55;
}

.s2 {
    font-size: 10px;
    filter: alpha(opacity=50); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    opacity: .50;
}

.s1 {
    font-size: 9px;
    filter: alpha(opacity=40); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    opacity: .4;
}

.s0 {
    font-size: 8px;
    filter: alpha(opacity=30); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity: .30;
}

Posted by Matt Raible on February 13, 2008 at 09:21 AM MST #

Post a Comment:
  • HTML Syntax: Allowed