# 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:** [16 במרץ, 2018, 9:46am 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:** 5
**Page:** 1
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [16 במרץ, 2018, 9:46am UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786/1 "2018-03-16T09:46:12Z")
This reminds me that the issue of wanting to customize the UI based on the users membership in groups has come up in various forms before (can’t find too many topics though, so maybe it was just in my head). For example:
> [@Hide categories from specific groups](https://meta.discourse.org/t/hide-categories-from-specific-groups/58406):
>
> This feature may be useful in other scenarios too, but my use case is a multi-lingual site. A key challenge of a multi-lingual forum is [how to best configure it](https://meta.discourse.org/t/best-practice-to-managing-a-multi-language-community/34664) to allow the use of different languages while not spamming users with posts in languages they don’t understand. At present, I think the best solution is to use language groups and show categories for each language only to members of the respective language group. Like this: But there is a significant problem with this approach: all co…
And then there is, of course, the “Click me” button plugin:
> [@Custom Topic Button (group)](https://meta.discourse.org/t/add-a-button-at-the-bottom-of-a-topic-visible-to-a-specific-group-discourse-topic-group-button/36216):
>
> information_source Deprecated: There is now a #theme-component that provides the same feature: [Topic Footer Buttons](https://meta.discourse.org/t/topic-footer-buttons/116968) Summary: This plugin adds a custom button at the bottom of a topic, visible only to staff or members of a specific group. link GitHub: [https://github.com/discourse/discourse-topic-group-button](https://github.com/discourse/discourse-topic-group-button)arrow_right Install: Follow the [plugin installation guide](https://meta.discourse.org/t/install-a-plugin/19157). Features Configuration From Admin \> Site Settings \> Plugin, modify topic\_group\_button\_url topic\_group\_butt…
Also:
> [@Enable voting just for certain group of people](https://meta.discourse.org/t/enable-voting-just-for-certain-group-of-people/69483):
>
> Hello. I was wondering if there is a way, even if it’s not official, to enable the plugin for just a few users. We have a specific need to enable voting for affiliates, who fulfills certain criteria. Would be nice to be able to create some kind of group and just enable the plugin for them only. Thanks a lot in advance.
In more general terms, this means that on certain forums groups distinguish quite different user groups (esp. on those forums where setting up different discourse instances was an option). 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.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [16 במרץ, 2018, 10:00am UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786/2 "2018-03-16T10:00:04Z")
> [@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.
Yes, this is possible. The current primary group for a user is added as a CSS class on the `` tag. This combined with the fact that Discourse supports SCSS means that you can apply different CSS styles based on the current user’s primary group easily.
If you have an example of something you’d like to do, I’d be happy to chime in.
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [24 במרץ, 2018, 4:03pm UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786/3 "2018-03-24T16:03:50Z")
> [@Hide "NEW" for TL1 and above](https://meta.discourse.org/t/hide-new-for-tl1-and-above/83131/11):
>
> Yes, this is possible.
Oh, is this new? I asked a similar question some time ago and it seemed clear that it would have to be a plugin…
> [@Hide categories from specific groups](https://meta.discourse.org/t/hide-categories-from-specific-groups/58406/2):
>
> This sounds like something that might be doable in a plugin, especially because this doesn’t have to be watertight (because missing a spot where the category shows is just an annoyance, not a security problem).
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [24 במרץ, 2018, 4:33pm UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786/4 "2018-03-24T16:33:04Z")
> [@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 `` 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 `` tag:
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 `` 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.
`
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [24 במרץ, 2018, 5:16pm UTC](https://meta.discourse.org/t/i-want-to-customize-ui-based-on-the-users-group-membership/83786/5 "2018-03-24T17:16:23Z")
Excellent. This really opens some possibilities, at least if you’re willing to sacrifice the primary group for UX purposes (or if UX needs coincide with your existing primary groups).
Apart from hiding categories in other languages on a multi-lingual forum, I’m thinking of setting up a group for users who are overwhelmed by the UI and who might benefit from hiding various buttons.
> [@Hide "NEW" for TL1 and above](https://meta.discourse.org/t/hide-new-for-tl1-and-above/83131/16):
>
> your questions here was more directed towards CSS
Last year, I didn’t ask for a CSS solution in particular because it didn’t really matter to me how it was done.