I want to customize UI based on the users group membership

ux
1

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:

And then there is, of course, the “Click me” button plugin:

Also:

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.

5 Likes
2

Yes, this is possible. The current primary group for a user is added as a CSS class on the <body> 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.

3 Likes
3

Oh, is this new? I asked a similar question some time ago and it seemed clear that it would have to be a plugin…

4

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

@fefrei was most likely correct there.

however,

your questions here was more directed towards 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:

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
Capture.PNG826×169 12.9 KB

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

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

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

`

5 Likes
5

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.

Last year, I didn’t ask for a CSS solution in particular because it didn’t really matter to me how it was done.

2 Likes