# Is it possible to add a colored badge background to a user title?

**URL:** https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523
**Category:** Support
**Created:** [26 januari 2016 om 18:11 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523 "2016-01-26T18:11:18Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![emiosllc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/emiosllc/32/49501_2.png) [@emiosllc](https://meta.discourse.org/u/emiosllc)
#### Post date: [26 januari 2016 om 18:11 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/1 "2016-01-26T18:11:18Z")

</div>

Hello,

Is it possible to add a colored badge background to a user title on Discourse?

All help is appreciated, thanks!

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [26 januari 2016 om 18:32 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/2 "2016-01-26T18:32:38Z")

</div>

Can you provide a screenshot of what you are referring to?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [26 januari 2016 om 18:58 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/3 "2016-01-26T18:58:07Z")

</div>

I would assume this

 ![](https://global.discourse-cdn.com/meta/original/3X/f/d/fd2489c37eadf2c64403c4e29555f75a3c4c03cb.png)

Although now that I look more closely at this, that might be styling on the staff badge itself versus the title.

---

<div class="post-metadata">

### Author: ![emiosllc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/emiosllc/32/49501_2.png) [@emiosllc](https://meta.discourse.org/u/emiosllc)
#### Post date: [26 januari 2016 om 20:23 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/4 "2016-01-26T20:23:58Z")

</div>

So his “staff” label is actually an image?

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [26 januari 2016 om 21:46 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/5 "2016-01-26T21:46:26Z")

</div>

> [@emiosllc](#):
>
> Is it possible to add a colored badge background to a user title on Discourse?

Do you mean the badge title? Like for me, “Senior Tester”?

If so, and IF you want that color dependent on the specific title used, it’s going to be difficult to do, because there’s no unique CSS selectors based on the content of that title.

If you want to add something like in the image previously, then that’s easier because you can add it conditionally based upon what group(s) appear in the user ID’s tag.

---

<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: [26 januari 2016 om 22:06 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/6 "2016-01-26T22:06:51Z")

</div>

\* intentional typo 😉

```plaintext
span.admin i:after {
  content: "CONFOUNDER";
  display: inline-block;
  background-color: #006;
  border-radius: 10%;
  font-size: 1em;
  font-weight: bold;
  padding: 0.4em;
  color: #fff;
}
span.admin i:before {
  display: none;
}

```

 ![](https://global.discourse-cdn.com/meta/original/3X/8/f/8fa9dc6afa403734db3fa94b30ca65f3176b653d.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [26 januari 2016 om 22:28 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/7 "2016-01-26T22:28:02Z")

</div>

Lol confounder

☀ ☀ ☀  
☀ 😆 ☀  
☀ ☀ ☀

---

<div class="post-metadata">

### Author: ![immalex](https://avatars.discourse-cdn.com/v4/letter/i/258eb7/32.png) [@immalex](https://meta.discourse.org/u/immalex)
#### Post date: [26 augustus 2017 om 18:18 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/9 "2017-08-26T18:18:37Z")

</div>

Thanks for this solution. I am new to Discourse. How do i go about adding this custom styled sheet to the forum? Also, is it possible to do it for Moderator too? What’s the tag for that?

---

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [26 augustus 2017 om 19:01 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/10 "2017-08-26T19:01:45Z")

</div>

```
span.moderator i:after {
  content: "TEXT";
  display: inline-block;
  background-color: #00cccc;
  border-radius: 10%;
  font-size: 1em;
  font-weight: bold;
  padding: 0.4em;
  color: #fff;
}
span.moderator i:before {
  display: none;
}

```

Adding

`SITE/admin/customize/themes`

---

<div class="post-metadata">

### Author: ![immalex](https://avatars.discourse-cdn.com/v4/letter/i/258eb7/32.png) [@immalex](https://meta.discourse.org/u/immalex)
#### Post date: [26 augustus 2017 om 21:25 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/11 "2017-08-26T21:25:41Z")

</div>

Thanks for the help @Stranik that works!

I was able to get the STAFF colored title bar added for moderators, but I have another issue. I have a few people that are STAFF members, but we do not want to give them moderator permission. Is it possible to get a STAFF colored title bar added for these few users as well? I was able to put them into a group, but i don’t know what comes next.

Thanks for all the help.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [26 augustus 2017 om 22:27 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/12 "2017-08-26T22:27:05Z")

</div>

You can do it only for **primary** groups.

Change “DevTeam” with the name of your primary group and customize colors and other things as you wish:

> [@Primary group class not available on usercard and user page](https://meta.discourse.org/t/primary-group-class-not-available-on-usercard-and-user-page/32417/2):
>
> I change the custom group in a primary group. Now I can see the id group-DevTeam And this is the code now: .username.DevTeam a { background: #C30303; padding: 3px 6px; line-height: 1; border-radius: 2px; display: inline-block; color: #FFF; } .username.DevTeam { max-width: initial !important; } .username.DevTeam .fa.fa-shield { display: none; } .username.DevTeam::after, .user-main .fa.fa-shield::before, #user-card .fa.fa-shield::before { content: 'Dev…

---

<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: [8 juni 2024 om 12:44 UTC](https://meta.discourse.org/t/is-it-possible-to-add-a-colored-badge-background-to-a-user-title/38523/13 "2024-06-08T12:44:20Z")

</div>

This topic was automatically closed after 3055 days. New replies are no longer allowed.
