Customized CSS based on user role/groups

Development

AI-generated summary

The discussion revolves around customizing CSS based on user roles or groups in Discourse. RBoy asks how to hide the topics stats on the main page for specific groups. Lilly explains that installing the Discourse Groups CSS Classes in Body component allows targeting user groups with CSS, such as .puorg-ruoy classes. manuel clarifies that while .admins and .moderators aren’t natively supported, the component enables such targeting. RBoy seeks confirmation on available standard group names, and Lilly confirms .anon for anonymous users and notes that the component supports all default groups and trust levels. Remote_Selmore thanks the contributors for the solution.

1

I’m trying to figure out if it’s possible to customize the CSS based on user roles or groups?

For example I want to hide the the number of topics stats on the main page, I was able to this relatively easily by adding

.topics {
    display: none;

to the theme CSS.

However I really want to do is hide this for everyone except for Admin and Moderators, I want this to show up for the Admins group and Moderators group.

Is it possible to determine if the user belongs to a group for CSS customization purposes?

2

If you install this theme component, you can target user groups with CSS:

like this:

body.group-<your-group-name> .some-page-element-class {
    display: none;
}

without the component, you can also use:

.something {
  display: none;
}
.staff .something {
   display: block;
}
4

For admins and moderators a staff class is added to the document body by default. So if that’s all you need, you can just use body.staff out-of-the-box.

5

Thanks, that’s great. For reference what other css groups can be addressed in CSS natively (other than staff)? Anything for anonymous (not logged in) users or admins (without moderators)?

6

.anon is all anonymous users. I don’t think .admins or .moderators works unless you install the component. It’s not a lot of code and can easily be added to another component too. I do this with my related theme components so people don’t have to install both. What’s great about that group CSS component is it allows targeting trust levels as well.

You can see how I use .staff and .anon in one of my theme components here.

7

Great, thanks. I wonder if on the theme component page it can list the set of standard group/role/trust names that can be accessed (which come built into discourse), would be a great ready reference. Or if you can list them here if you know them.

8

if you install the group css component, you can use all the default groups and trust levels on the admin-users-groups page as well as any custom groups you make.

9

Thank you. This is great for me.