Unit Structures Fred Stutzman’s thoughts about information, social networks and technology.

Customizing the Del.icio.us Tagometer in two steps

Note: This may not render properly in a feedreader.

Yay to Del.icio.us and (Les) for the release of the Tagometer product today. I spend way too much time manually looking up the tagclouds of various blog posts, so this is going to be a nice little time saver. I noticed a post over on Stowe’s blog about how the Tagometer isn’t customizable/stylable - so I’ve run a little amateur reverse engineering that will explain how to customize the Tagometer. The only requirement for customizing the Tagometer is a knowledge of CSS - so I’ll assume you’ve got this covered.

The basic idea is you want to locally override the stylesheet. To do this, you’re going to need to embed the relevant section of the stylesheet in your page, and then make your style changes locally. So first, here is a link to the stylesheet. As you can see, there are three classes (delicious-blogbadge-tall, delicious-blogbadge-line and delicious-blogbadge-full). Each of these classes is a different look for the tagometer, so you’ll want to base your tagometer around the look of one of them. Let’s arbitrarily choose delicious-blogbadge-tall. However, since we’re going to be overriding delicious, we’re going to change the name from delicious-blogbadge-tall to delicious-blogbadge-custom.

Step One: Embed the stylesheet in your blog template.

<style type="text/css">

.delicious-blogbadge-custom {
font: 12px arial; border: 2px solid #B1B1B1; width: 190px; text-align: center; position: relative;
}
.delicious-blogbadge-custom .save-to-link {
clear: both; display: block; padding: 0 0 0 12px; margin: 0.5em; text-align: center; color: blue !important;
text-decoration: none;
font-weight: bold;
background: url(http://images.del.icio.us/static/img/delicious.small.gif) no-repeat 2px 50%;
border: none !important;
}
.delicious-blogbadge-custom .url-link {
text-align: right; display: block; float: right;
color: #999 !important;
text-decoration: none; padding: 4px 6px;
position: absolute; bottom: 0px; right: 0px;
border: none !important;
}
.delicious-blogbadge-custom .url-link .post-count {
background-color: #00f; color: #fff; padding: 0 0.25em 0 0.25em;
}
.delicious-blogbadge-custom .empty-save-to-link {
display: none;
border: none !important;
}
.delicious-blogbadge-custom .empty-save-to-link-label {
display: block; font-size: 85%; text-align: center;
}
.delicious-blogbadge-custom .empty-message {
background-color: #E6E6E6; float: right; font-size: 95%; display: block; font-weight: normal; width: 100%; padding: 2px 0 2px 0;
}
.delicious-blogbadge-custom .post-count-label-before {
display: inline;
}
.delicious-blogbadge-custom .post-count {
display: inline; text-align: center;
}
.delicious-blogbadge-custom .post-count-label-after {
display: inline;
}
.delicious-blogbadge-custom .top-tags-container {
background-color: #E6E6E6; text-align: left; padding: 4px 6px 4px 6px; margin-bottom: 0.75em;
}
.delicious-blogbadge-custom .top-tags-title {
display: inline; font-size: 95%; font-weight: bold;
}
.delicious-blogbadge-custom .top-tags {
display: inline; margin: 0; padding: 0; text-indent: 0;
}
.delicious-blogbadge-custom .top-tags li {
font-size: 95%; display: inline; list-style: none; margin: 0; padding: 0 0.15em 0.15em 0;
}
.delicious-blogbadge-custom .top-tags li a {
padding: 0;
margin: 0;
text-decoration: none;
border: none !important;
color: blue !important;
}
.delicious-blogbadge-custom br {
clear: both;
}

</style>


Step Two: Embed the tagometer with the style override

Next, you simply need to place the tagometer code into your blog.

<script type="text/javascript">
if (typeof window.Delicious == "undefined") window.Delicious = {};
Delicious.BLOGBADGE_DEFAULT_CLASS = 'delicious-blogbadge-custom';
</script>
<script src="http://images.del.icio.us/static/js/blogbadge.js"></script>


As you can see, the tagometer has been embedded and is now looking for the locally defined, custom style (delicious-blogbadge-custom) as its default class. You can simply edit that embedded style to change around the look, feel and behavior. Good luck!

Thank you! I have already found a use to your tweak on my blog.
Have to wonder why they didn’t allow customizing it to begin with…

“Have to wonder why they didn’t allow customizing it to begin with”

Well… We’re planning on releasing further help and documentation on the customization features of this badge in future weeks. There’s actually a lot under the hood that can be tweaked - even more than just overriding the CSS!

But, we thought it would be a good idea to get it out the door and get people playing with it first.

The first impression is the most important one. If people don’t like it because of how it looks they may not come back second time around.

Isn’t it why Kiko failed?

Great advice, thanks! shufflesome.com now displays a customized tagometer.

Strangely, the custom css had to be inserted in the external stylesheet to work. When inserting it in the head section of the document, no style at all was applied. I wonder why.

Any idea what tweaks are necessary to make the contents of CSS class delicious-blogbadge-custom .save-to-link vertically align properly in Safari?