Skocz do zawartości
Zaloguj się, aby obserwować  
Invisionize.eu

[IPS News] Theme Tip: Color coding tags

Polecane posty

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

 

Wyświetl pełny wpis

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.

×

Ważne informacje

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies.