Jump to content

Invision Community Blog


Managing successful online communities


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;
}

 

tags.png

 

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!

 

tags2.png

Topic View

 

 

tags3.png

Forum View

 

Comments

Recommended Comments

Hi,

For some reason after the latest patch the http://www.thaivisa.com/forum/forum/18-thailand-news/ shows grey and not as below:-

.ipsTags a[href*="/tags/THE+WEEK+THAT+WAS/"],
a.ipsTag_prefix[href*="/tags=/THE+WEEK+THAT+WAS/"] {
    background: Blue !important;
      font-weight: bold;
}
html[dir="ltr"] .ipsTags a[href*="/tags=/THE+WEEK+THAT+WAS/"]:before,
html[dir="ltr"] a.ipsTag_prefix[href*="/tags=/THE+WEEK+THAT+WAS/"]:before  {
    border-color: transparent Blue transparent transparent !important;
}

Any ideas?

Link to comment
Share on other sites


Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy

×