While hacking away my StackExchange site: Zerg Overflow, I use couple of tricks that one can use to customise their website design without modifying existing HTML structure. I will start a series of CSS/jQuery tricks that uses StackExchange platform as example but yet can be utilise in any other way.

In StackExchange sites, tags for questions are listed in horizontally and depends on the contents of tags, I want to place a customised icon in front of the tag list. This can be done with a simple CSS. First, let’s understand the HTML semantics here in StackExchange.

In element <div> you will find tag name appears as class name with a t- prefix. For example:

    canada
    business
    tips

Use CSS to create a space in front of the tags bar (by using padding) and add a background image like this:

.t-canada {
    padding: 0 0 0 [IMAGE WIDTH]px;
    background: url(http://[URL]/canada_flag.gif) no-repeat 0 50% transparent;
}

There! You have an ‘canada’ related icon appear in front of the tags bar when ‘canada’ tag is mentioned.

This will only show 1 image per question and that’s its feature. If multiple tags are triggered to show icon, then the later one in CSS will be shown. So sort your tags priority if needed.

Short come

This is sort of semi-automatic, you will have to update/add CSS whenever you have new tag you want to trigger.

Something to watch out for

In ‘Unanswered’ page, the tags bar is fixed width of 410px. Adding paddings may cause your tags bar move to undesired position (below user-info box rather the next to it). This can be resolved by modify tags bar width:

.excerpt .t-canada {
    width: [410 - PADDING WIDTH]px !important;
}

Potential Problem

If your tags ever have more than 1 line, the position of your image may seems weird as it will sit in the left middle of 2 lines. I’m not taking this into account as having maximum of 5 tags to go over 410px is kind of hard with default font-size and margin.

However if it bothers you, you can change the backgroup position to appear on top left corner instead:

.t-canada {
    padding: 0 0 0 [IMAGE WIDTH]px;
    background: url(http://[URL]/canada_flag.gif) no-repeat 0 0 transparent;
}

Alternative Solution

If you want icon to appear inside individual tag instead of beginning of tags bar, then you will need to use some javascript trick to make it happen. OR maybe in the coming beta(s), we can have tag name in <a> element like this:

    happy

Note: pt- prefix stands for post tag.

Feel free to leave your feedback on StackExchange Meta or commenting on this post.