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: http://puu.sh/fEPFb/ed97876ca1.png

The CSS I used:

.user-title{
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:

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

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

Thanks!

2 Likes