# 如何根据文本设置用户标题的颜色？

**URL:** <https://meta.discourse.org/t/how-to-set-color-of-user-title-depending-on-text-in-it/24980>\
**Category:** Support\
**Created:** [2015年二月8日 22:02 UTC](https://meta.discourse.org/t/how-to-set-color-of-user-title-depending-on-text-in-it/24980 "2015-02-08T22:02:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martyn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn/32/115601_2.png) [@Martyn](https://meta.discourse.org/u/Martyn)\
**Post date:** [2015年二月8日 22:02 UTC](https://meta.discourse.org/t/how-to-set-color-of-user-title-depending-on-text-in-it/24980/1 "2015-02-08T22:02:20Z")

</div>

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](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 😃

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2015年二月8日 22:13 UTC](https://meta.discourse.org/t/how-to-set-color-of-user-title-depending-on-text-in-it/24980/2 "2015-02-08T22:13:46Z")

</div>

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?

```plaintext
.names span.Administrators a {
    color: #DC2E17;
}

```

---

<div class="post-metadata">

**Author:** ![Martyn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn/32/115601_2.png) [@Martyn](https://meta.discourse.org/u/Martyn)\
**Post date:** [2015年二月8日 22:26 UTC](https://meta.discourse.org/t/how-to-set-color-of-user-title-depending-on-text-in-it/24980/3 "2015-02-08T22:26:15Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2024年六月8日 12:43 UTC](https://meta.discourse.org/t/how-to-set-color-of-user-title-depending-on-text-in-it/24980/4 "2024-06-08T12:43:25Z")

</div>

此主题已在 3407 天后自动关闭。不再允许回复。