How To Stylizing Usergroups

I am having some issues trying to style my usergroups on my install. I would like to add background color and change the font color of the group that is displayed.

I currently able to get my username colored.

Here is what I have right now

.names span.ProjectLead a {
    color: red;

Have you tried using this selector: .names .user-title?

EDIT: My mistake. Ignore.


Are you sure about that? I don’t see the span.user-title as child to span.myGroupName but rather peer to it. But it’d be wonderful to do styling based on the specific title used for a user. Just don’t see how it’s possible currently.

I see what you want. Here you go

a.user-group[href*=team] { color: blue; }

team refers to the URL slug for the group you want to style.

What it did here on Meta


Sort of, but that’s mixing apples and oranges a bit. :frowning:

The CSS customization is based on the primary group specified for the user, which may or may not be the title they chose to use on their profile. (You see that in your example above even … the group is “team” but the titles “co-founder” unfortunately get the same styling.)

I’m not sure if that’s a problem or not for OP, but it is for us (trying to do something similar).

1 Like

Thank you, this did the trick.

That’s a bit tricky, as that requires re-opening/altering the rendering of the poster-name widget. Not quite sure how to accomplish that yet.

Would be nice to get a new class added on the title specifically if it comes from a badge and/or a primary group membership.

1 Like

That could be difficult. The primary group is easy enough (or so it seems), but the badge would be difficult as I don’t see anything that indicates the badge_id used for the user title.