Theme Tip: Color coding tags

We were recently asked if it's possible to color code tags - the customer in question used tags as statuses on topics, and so wanted 'resolved' to be green, and so on. Despite being a great idea, this isn't something that is currently possible 'out of the box' - although we'll add it to our internal feature idea list to follow up on later!

But just because it isn't built in, that doesn't mean it isn't possible! In fact, with a little CSS, this is quite easy to achieve now.

Writing a CSS selector

We can do this by writing a CSS selector that matches the tag URL for the tag we want to style - a handy way to use CSS that can be applied to lots of other ideas within the suite!

Lets say we have a tag called 'resolved', and we want to make it green. Add the following CSS to your custom.css file:

.ipsTags a[href*="/tags/resolved/"] {
    background: SeaGreen;
}
html[dir="ltr"] .ipsTags a[href*="/tags/resolved/"]:before {
	border-color: transparent SeaGreen transparent transparent;
}

The first style is the main part of the tag element; the second matches the :before pseudo-selector which we use to make the 'point' of the tag.

Another tag we'll style is called 'needs help'. In this case, there's spaces in the name, which are represented by the + symbol in the URL (since it's URL-encoded). We'll make it purple this time:

.ipsTags a[href*="/tags/needs+help/"] {
    background: Purple;
}
html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before {
	border-color: transparent Purple transparent transparent;
}

Supporting prefixes

This little CSS snippet won't change prefixes, however - they'll still be shown in the default color (specified by your theme settings). If you want to change prefixes too, you need to adjust the CSS as follows - replace the previous CSS with this version:

.ipsTags a[href*="/tags/needs+help/"],
a.ipsTag_prefix[href*="?tags=needs+help"] {
    background: Purple;
}
html[dir="ltr"] .ipsTags a[href*="/tags/needs+help/"]:before,
html[dir="ltr"] a.ipsTag_prefix[href*="?tags=needs+help"]:before {
	border-color: transparent Purple transparent transparent;
}

(Note: Notice the slightly different string we're matching in the href attribute; once you upgrade to 4.1.14, this won't be necessary - both selectors can use the same href format, e.g. /tags/needs+help/. Prior to 4.1.14, tags and prefixes used slightly different URL formats.)

That's it - now everything looks correct!