CSS username colors only working for admin/moderators?

Development

AI-generated summary

In a Dev discussion titled “CSS username colors only working for admin/moderators?”, user kittenkraze44 reports that custom username colors only apply to admin and moderator groups, despite trying multiple CSS snippets. Arkshine and Moin suggest installing the CSS Classes for Current User’s Groups theme component to target custom groups via .group-NAME selectors. kittenkraze44 confirms installing the component but still can’t get group-specific colors to work, even when testing with a dummy account in the target group. Arkshine clarifies that the component only applies CSS to the current user’s own group, not others’ — meaning group-specific styling in topic views requires a plugin. Eventually, kittenkraze44 finds a workaround using .first.new-user:not(.staff) for new users and a broad .names>span a rule for others, but notes it doesn’t allow per-trust-level customization. They conclude they’ll need to manually assign users to a custom group to achieve desired colors, as default selectors only support two color categories: new users and everyone else (excluding staff). ondrej links to a related thread, which kittenkraze44 had already reviewed.

1

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.

2

Hello,

Can you share exactly what you tried?

4

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:

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

and I also have this one on there currently:

.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:

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

“Staff” replaced with group names.

5

Do you use CSS Classes for Current User's Groups?
Or is the group their primary group?

6

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

7

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. It will insert the current user’s groups into the body HTML.

Then, you can target with .group-NAME:

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

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.

10

You change NAME with the group’s name.

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

11

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.

12

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.

13

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

14

Can you show your CSS for that custom group?

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

I also tried “trust_level_0” and “newuser”.

This one works just fine though for the admin group:

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

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.

19

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.

20

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

.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?

21

I did a quick search and came back with this.

22

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.