v.plonk!

The Tag Cloud
This time we update side look of the tag cloud to make it look more like being part of our design. It took me several minutes to figure out, why my original CSS didn't work. Just after I took a look into all used CSS files I finally got the idea.

The color for the Tag-Clouds is set for an id called "side" (it is not "tagcloud" or "pad" as you might expect it):

<div class="sidebox" id="tagcloud">
    <h2>Tags</h2>
    <div class="pad">
        <ul class="nobullets clearfix">
            <li class="size5"><a href="..." rel="tag">...</a></li>
            ...

So in general our code has to look like this:

#side .sizeX a {
    color: #YOUR_COLOR_AS_HEX_CODE;
    font-size: YOUR_FONT_SIZEpx;
}
#side .sizeX a:hover {
    color: #YOUR_HOVERCOLOR_AS_HEX_CODE;
}

We have 5 different sizes (size1 to size5) we can set. So the complete code (for my site) ends up like:

/* TAGCLOUD SIDEBAR */
#side .size1 a {
    color: #003053;
    font-size: 7px;
}
#side .size1 a:hover {
    color: #005ea1;
}
#side .size2 a {
    color: #003761;
    font-size: 10px;
}
#side .size2 a:hover {
    color: #0062ad;
}
#side .size3 a {
    color: #003e6e;
    font-size: 13px;
}
#side .size3 a:hover {
    color: #0069ba;
}
#side .size4 a {
    color: #00457a;
    font-size: 15px;
}
#side .size4 a:hover {
    color: #0071c7;
}
#side .size5 a {
    color: #004d87;
    font-size: 17px;
}
#side .size5 a:hover {
    color: #0078d4;
}

No magic this time, just a little bit of "undercover work".