# Customized CSS based on user role/groups

**URL:** https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766
**Category:** Development
**Tags:** css
**Created:** [October 10, 2023, 2:20pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766 "2023-10-10T14:20:43Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![RBoy](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RBoy](https://meta.discourse.org/u/RBoy)
#### Post date: [October 10, 2023, 2:20pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/1 "2023-10-10T14:20:43Z")

</div>

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

```plaintext
.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?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 10, 2023, 2:22pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/2 "2023-10-10T14:22:48Z")

</div>

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

> [@CSS Classes for Current User's Groups](https://meta.discourse.org/t/css-classes-for-current-users-groups/226068):
>
> discourse2Summary CSS Classes for Current User’s Groups adds the groups that a member is a part of as CSS classes on the \<body\> tag.eyeglassesPreview [Preview on theme-creator.discourse.org](https://discourse.theme-creator.io/theme/Johani/user-groups-css-classes)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-groups-css-classes-in-body](https://github.com/discourse/discourse-groups-css-classes-in-body)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Before: [image] After: [image] Discourse only adds the current us…

[https://github.com/discourse/discourse-groups-css-classes-in-body](https://github.com/discourse/discourse-groups-css-classes-in-body)

like this:

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

```

without the component, you can also use:

```scss
.something {
  display: none;
}
.staff .something {
   display: block;
}

```

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [October 10, 2023, 2:32pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/4 "2023-10-10T14:32:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![RBoy](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RBoy](https://meta.discourse.org/u/RBoy)
#### Post date: [October 10, 2023, 2:59pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/5 "2023-10-10T14:59:50Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 10, 2023, 3:23pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/6 "2023-10-10T15:23:53Z")

</div>

`.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](https://github.com/Lillinator/navigation-menu-display-control/blob/main/common/common.scss).

---

<div class="post-metadata">

### Author: ![RBoy](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RBoy](https://meta.discourse.org/u/RBoy)
#### Post date: [October 10, 2023, 5:34pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/7 "2023-10-10T17:34:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 10, 2023, 6:04pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/8 "2023-10-10T18:04:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Remote\_Selmore](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/remote_selmore/32/484941_2.png) [@Remote\_Selmore](https://meta.discourse.org/u/Remote_Selmore)
#### Post date: [November 22, 2025, 3:11pm UTC](https://meta.discourse.org/t/customized-css-based-on-user-role-groups/281766/9 "2025-11-22T15:11:29Z")

</div>

Thank you. This is great for me.