Customized CSS based on user role/groups

Dev
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 Likes
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.

2 Likes
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.

1 Like
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.

1 Like