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?

If you install this theme component, you can target user groups with CSS: [image] CSS Classes for Current User's Groups Theme component discourse2 Summary CSS Classes for Current User’s Groups adds the groups that a member is a part of as CSS classes on the tag. eyeglasses Preview Preview on theme-creator.discourse.org hammer_and_wrench Repository Link https://github.com/discourse/discourse-groups-css-classes-in-body open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Before: [image] After: [image] Discourse only adds the current us… [image] GitHub - discourse/discourse-groups-css-classes-in-body Contribute to discourse/discourse-groups-css-classes-in-body development by creating an account on GitHub. like this: body.group- .some-page-element-class { display: none; } without the component, you can also use: .something { display: none; } .staff .something { display: block; }

[image] RBoy: I want this to show up for the Admins group and Moderators group. 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.

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

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.

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.

Thank you. This is great for me.

Customized CSS based on user role/groups

Development

RBoy (RBoy) October 10, 2023, 2:59pm 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)?

Topic		Replies	Views
Display different content within a topic based on user's groups membership? Development	6	1436	October 21, 2022
Finding CSS selectors for page layout, user groups Development css	6	223	March 12, 2026
I want to customize UI based on the users group membership UX	4	2454	March 24, 2018
CSS classes for group membership? (For simplified UI mode) Product Support	13	2357	December 27, 2020
Theme - identify the trust level? General	2	479	February 1, 2024

Customized CSS based on user role/groups

Related topics