Fred StutzmanThoughts about information, social networks, and privacy

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!

Tags: Del.icio.us

This entry was posted on Thursday, December 21st, 2006 at 1:49 pm and is filed under Hacks, Software. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.