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

support
1

Hello,

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

All help is appreciated, thanks!

1 Like
2

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

3

I would assume this

Pasted image973Ă—251 30.2 KB

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

1 Like
4

So his “staff” label is actually an image?

5

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.

1 Like
6

* intentional typo :wink:

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

9 Likes
7

Lol confounder

:sunny: :sunny: :sunny:
:sunny: :laughing: :sunny:
:sunny: :sunny: :sunny:

6 Likes
9

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?

10 
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

2 Likes
11

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.

12

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:

4 Likes