How to set color of user-title depending on text in it?



Hi guys,

I’ve just installed my Discourse forum, absolutely loving it. The only thing I miss now is that users can’t directly see who is an admin, moderator or developer. I have set the Title (user-title) for these users, but it’s small text one can easily skip over.

So I decided to add some CSS to the user-title class, making it look like this:

The CSS I used:

background: #F55;
border-radius: 3px;
color: #FFF !important;
font-size: 12px!important;
padding-left: 7px;

I’m wondering now if it’s possible with JavaScript to change the background color depending on the text that’s inside the <span class="user-title"></span>. This way I could add different colors depending on the “rank”/title.

Any help would be greatly appreciated :smiley:

(Mittineague) #2

In our forum we have different text colors (not background color) for member names according to what Group they are in. i.e.
Admins = red
Team Leaders = blue
Advisors = green
Mentors = orange

Maybe similar would be doable for you?

.names span.Administrators a {
    color: #DC2E17;


Oh that works too. I didn’t even see that usernames just have their groups added to them as class, that makes things easier.