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

Product Support

AI-generated summary

Martyn wants to differentiate user titles (e.g., admin, moderator, developer) on his Discourse forum by adding background colors to the user-title class based on the text within. He has already added CSS to style the user-title. Mittineague shared their approach, using different text colors for member names based on their group, with CSS selectors like .names span.Administrators a. Martyn found this helpful, realizing that usernames have their groups added as classes, making it easier to implement a similar solution.

1

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:

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

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!