# I want to customize UI based on the users group membership

**URL:** https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786
**Category:** UX
**Created:** [3월 16, 2018, 9:46오전 UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786 "2018-03-16T09:46:12Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [3월 24, 2018, 4:33오후 UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786/4 "2018-03-24T16:33:04Z")

</div>

> [@Hide "NEW" for TL1 and above](https://meta.discourse.org/t/hide-new-for-tl1-and-above/83131/15):
>
> Oh, is this new?

I don’t really know at what version of Discourse the `primary-group` class for the current user started to be added as a class to the `<body>` tag

> [@Hide "NEW" for TL1 and above](https://meta.discourse.org/t/hide-new-for-tl1-and-above/83131/15):
>
> I asked a similar question some time ago and it seemed clear that it would have to be a plugin…

@fefrei was most likely correct there.

**however** ,

your questions here was more directed towards CSS:

> [@Hide "NEW" for TL1 and above](https://meta.discourse.org/t/hide-new-for-tl1-and-above/83131/10):
>
> So the question occurs to me whether it would not be possible to make it so that certain CSS classes can be hidden or shown based on a user’s group membership, i.e. to allow site owners to customize their sites appearance for different users via CSS.

Which would be very, very different from not sending the content to the client. CSS hides stuff, but it does not mean it’s not there if you really look for it.

So, in regards to the question I answered, the answer is still yes.

based on the user’s primary group, you _can_ in fact hide or show CSS classes.

here’s an example from [another post here on meta](https://meta.discourse.org/t/flexfooter-theme-component/77929/27):

* * *

Discourse adds a `primary-group-GROUP_NAME` class which you can use.

For example, if a user’s primary group is Car Owners, here’s what gets added to the `<body>` tag:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/5/f/5fae2d37a9bfd83ffeaf6a9f55a08e90f4642714.PNG)

This class can then be selected with a CSS selector like:

```plaintext
.primary-group-car_owners

```

* * *

because the primary group class is added very early on in the cascade - to the `<body>` tag, you can use it as a base for cascading selectors very easily.

for a **very exaggerated** example, if you have a group called _no emoji_, and it’s set as the user’s **primary group** , _and_ you add this to your theme:

```plaintext
.primary-group-no_emoji .emoji {
	display: none;
}

```

Then, members of the **no emoji** group will _never_ see emojis because all emojis would be hidden from them with CSS.

`

---

_[View the full topic](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786)._
