CSS username colors only working for admin/moderators?

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

1 Like
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;
     }
  }
}
2 Likes
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.