# האם צבעי שם המשתמש ב-CSS עובדים only לאדמינים/מודרייטורים?

**URL:** https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045
**Category:** Development
**Tags:** css
**Created:** [4 ביולי,‏ 2024,‏ 8:05pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045 "2024-07-04T20:05:38Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [4 ביולי,‏ 2024,‏ 8:05pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/1 "2024-07-04T20:05:39Z")

</div>

I have looked in every thread and tried everything recommended but for whatever reason, the only custom colors that show are for the admin and mod groups. I am not sure what I am doing wrong.

I have been trying to make this work for a few days now and I can’t think of anything else to try.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [4 ביולי,‏ 2024,‏ 8:26pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/2 "2024-07-04T20:26:28Z")

</div>

Hello,

Can you share exactly what you tried?

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [4 ביולי,‏ 2024,‏ 9:42pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/4 "2024-07-04T21:42:27Z")

</div>

I can’t remember all of them, they were found in different threads on here. The current one that is working for admin/mod is this one:

```plaintext
.topic-post .moderator a {
color: #000000;
}

```

and I also have this one on there currently:

```plaintext
.names {
  // This part is works only for users who's primary group
  span.trust_level_0 a {
    background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  // This part is works only for moderators
  span.moderator a::after {
    content:"★";
    margin-left: 2px;
  }
}

```

Which I was just messing around with to see if I could get it to work. Works for admin/mod but again - nothing else.

I also tried:

```plaintext
span.username.staff a {
      color: #000000;
}

```

“Staff” replaced with group names.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [4 ביולי,‏ 2024,‏ 10:18pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/5 "2024-07-04T22:18:39Z")

</div>

Do you use [CSS Classes for Current User's Groups](https://meta.discourse.org/t/css-classes-for-current-users-groups/226068)?  
Or is the group their primary group?

> [@Make staff users more recognizable with customized avatars, posts, and mentions](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794/1):
>
> It is possible to automate this function and customize all posts written by staff users in various ways using CSS. In order to do this, it is necessary to create a **primary custom group** as described above, see the Flair chapter. When your staff members are in a **primary** group you can target their posts with CSS.

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [5 ביולי,‏ 2024,‏ 12:01am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/6 "2024-07-05T00:01:55Z")

</div>

> [@Moin](#):
>
> Do you use [CSS Classes for Current User’s Groups](https://meta.discourse.org/t/css-classes-for-current-users-groups/226068)?  
> Or is the group their primary group?

I am not sure what you mean. I just have the groups as custom names changed from trust\_level\_0 ect. I am just wondering why I can’t use the same code I used for admin/mods to change the username colors in other groups. I can’t get it to work.

I am very new to this forum software lol

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5 ביולי,‏ 2024,‏ 1:07am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/7 "2024-07-05T01:07:08Z")

</div>

If you want to target custom groups, you need to install this theme component, as stated by Moin: [CSS Classes for Current User's Groups](https://meta.discourse.org/t/css-classes-for-current-users-groups/226068). It will insert the current user’s groups into the `body` HTML.

Then, you can target with `.group-NAME`:

```css
.group-NAME {
  .names {
     span a::after {
       content:"★";
       margin-left: 2px;
     }
  }
}

```

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [5 ביולי,‏ 2024,‏ 2:08am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/9 "2024-07-05T02:08:30Z")

</div>

I tried hat and it did not work for groups. I tried it twice now.

Am I meant to change “group-NAME” entirely? I change just the name part and it does not work.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5 ביולי,‏ 2024,‏ 2:10am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/10 "2024-07-05T02:10:58Z")

</div>

You change `NAME` with the group’s name.

If you have a group named “`designers`”, then you write `.group-designers`.

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [5 ביולי,‏ 2024,‏ 2:13am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/11 "2024-07-05T02:13:08Z")

</div>

That is what I thought. It does not work. Am I missing something else? I mean I have tried everything I have come across on this forum and nothing has worked.

The admin/mod groups work for whatever reason but the rest do not.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5 ביולי,‏ 2024,‏ 2:14am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/12 "2024-07-05T02:14:10Z")

</div>

Did you install the theme component? You can follow the guide if you are not familiar with them yet: [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966/1).

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [5 ביולי,‏ 2024,‏ 2:15am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/13 "2024-07-05T02:15:09Z")

</div>

Yup. I just re-enabled it to try again. It still won’t change the username colors.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5 ביולי,‏ 2024,‏ 2:15am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/14 "2024-07-05T02:15:33Z")

</div>

Can you show your CSS for that custom group?

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [5 ביולי,‏ 2024,‏ 2:20am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/16 "2024-07-05T02:20:18Z")

</div>

```plaintext
.group-noob {
  .some-selector {
    color: #d33131;
  }
}

```

I also tried “trust\_level\_0” and “newuser”.

This one works just fine though for the admin group:

```plaintext
.topic-post .admin a {
color: #89f336;
}

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [5 ביולי,‏ 2024,‏ 2:40am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/17 "2024-07-05T02:40:55Z")

</div>

Are you part of the “noob” group?

The group names inserted from the theme component are for the current user session. Only the ones within the “noob” group will see the CSS.

You need another solution if you expect to see anyone else’s group CSS.  
It’s a little more complicated because the full user’s group data is, by default, unavailable in the topic area. I believe you might need a plugin for this.

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [5 ביולי,‏ 2024,‏ 2:43am UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/19 "2024-07-05T02:43:47Z")

</div>

I am not but I have a dummy account that is and it doesn’t show for that either.

And under the dummy account I can see the colored names for admin and mods. Which is why I am confused about this.

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [6 ביולי,‏ 2024,‏ 6:56pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/20 "2024-07-06T18:56:17Z")

</div>

So I was able to figure out how to color usernames with the following:

```plaintext
.first.new-user:not(.staff) a {
    color: #00b0ff;
}

.names>span a {
    color: #ffd966;
    outline-offset: -1px;

}

```

Problem is, the second part of the code colors all usernames that aren’t new or staff (admin, mod). I want to try to figure out how to make it so it targets my trust\_level\_3 group so that one is specifically a different color. Is there any way to do this?

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [6 ביולי,‏ 2024,‏ 10:58pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/21 "2024-07-06T22:58:45Z")

</div>

I did a quick search and came back with this.

> [@CSS Change username color for entire Custom Groups, works sometimes then doesn't?](https://meta.discourse.org/t/css-change-username-color-for-entire-custom-groups-works-sometimes-then-doesnt/249110/7):
>
> Hello, It should work like this arrow_down_small .names span { &.group--GroupName a { color: red; } } But I’ve made a quick theme component for this now. slightly_smiling_face Here you can simple set up this. groupname;color

---

<div class="post-metadata">

### Author: ![kittenkraze44](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kittenkraze44/32/428869_2.png) [@kittenkraze44](https://meta.discourse.org/u/kittenkraze44)
#### Post date: [6 ביולי,‏ 2024,‏ 11:19pm UTC](https://meta.discourse.org/t/css-username-colors-only-working-for-admin-moderators/315045/22 "2024-07-06T23:19:19Z")

</div>

I already looked into that, thanks though.

I am just going to have to make a separate group and manually put people in it for the color change to work. The code above works fine for the defaults but only allows two colors (new users and all other groups outside of staff) which is fine for now.
