Tagcloud: different color for different text size

Question

I'm using <?php wp_tag_cloud( $args ); ?> to create a tag in my sidebar. With the "args" you can style it quite a bit, even the different text size, but it doesn't seem to be possible to apply different colors.

What I did is a plain CSS solution which looks somewhat like this:

#tagcloud ul .tag-link-8 {
color:#666;
}

#tagcloud ul .tag-link-7 {
color:#7EA7C9;
}

#tagcloud ul .tag-link-9 {
color:#6A9EA5;
}

It works okay, but this is a hassle. I have to apply the colors manually and once I have 50 tags or so this will be kind of ridiculous.

I was wondering if there is a way to connect e.g. the text-size to a specific color (like some tagcloud plugins seem to do anyways) (size:8 = red etc.)?

Anybody any ideas?

Thanks a lot in advance!

Answer 1

Use a filter for the tag cloud to change the inline size declarations to CSS classes and declare the colors in your style sheet:

.tag-cloud-size-8
{
    color:     #009;
    font-size: .8em;
}
.tag-cloud-size-10
{
    color:     #900;
    font-size: 1em;
}