CSS classes for group membership? (For simplified UI mode)


(Christoph) #1

I’m posting this under support but suspect it will become a feature request.

I have a couple of users who are a bit reluctant to use discourse and who could use some subtle on-boarding assistance. I say “subtle” because any tutorial or step-by-step instructions would have the adverse effect of overwhelming them even more.

So what I’d like to do is tweak the CSS for these users in two ways:

  1. hide a number of elements that they don’t need to accomplish what I need them to do
  2. add some hint elements here and there to provide further guidance

So my question is: are there any group-based classes that I can use for this? If so, I would create a technophobes simple-mode-group for these people and create custom CSS for that group.

Or is there another way? Maybe javascript?

I understand that it would be something of an overkill to have a class for every group, but this could be something to enable in the group settings: [x] enable group class for custom CSS


(Dean Taylor) #2

There might be something that exists in Discourse already - but I personally don’t know of it…

Here is some code I wrote a long time ago and it still appears to work…
… however there is probably a far better way.

It may / may not help you.

For a specific username

<script>
if (window.jQuery) {
    window.jQuery(function ($) {
        var u = Discourse.User.current();
        if (u && (u.username === 'DeanMarkTaylor' || u.username === 'BobTheBuilder')) {
	    // Here is where you could add a CSS class to the HTML / body tag
        }
   });
});
</script>

For a user in a specific group

This has the downside of making an additional HTTP request for the initial page load to get the user’s details.

<script>
if (window.jQuery) {
    window.jQuery(function ($) {
        var u = Discourse.User.current();
        u.findDetails().then(function(u) {
            // Output the groups for the user
            console.log(u.groups);
	     // Here is where you could add a CSS class to the HTML / body tag
    });
});
</script>

(Christoph) #3

This is great! The username-based way might work as long as I have only a few users in that mode but it also has a downside: it makes public who is using simplified mode. Also, I don’t have a UI to move users into and out of simple mode. So I’d be curious to know what an extra http request means in terms of loading time. Will it almost double the time or is it really only a few milliseconds?

I don’t know JavaScript, so I’m unsure how to use the second example: doesn’t it also need an if-clause before I can add the CSS class?


(Christoph) #4

Actually, it just occurs to me that this question has become obsolete with the new native themes. I can just create a simplified UI theme and set it as default for dedicated users.

The only disadvantage is that I cannot set the simple UI to be in place when they first login. (This would be possible if groups could be linked to themes so that a users primary group defines their default theme.)


(Sam Saffron) #5

Not really, but it would be interesting to allow you to assign a default theme to a group, I can see that used in certain scenarios. There is not facility at the moment for setting up a default theme for a group.

Eg: “over 40” group :older_man: getting default “large text”.

Disclaimer, I am over 40


(Christoph) #6

Why not? (Being over 40, I am much slower to understand things, you know)


(Sam Saffron) #7

Because selection of “default theme” is in a client side cookie, it is not even associated to a user.


(Christoph) #8

Okay, what I meant is: I can just create a simplified UI theme and set that as the preferred theme for dedicated users, i.e. by changing the “Theme” setting in their preferences.


(Sam Saffron) #9

No, you can not do that… the preference is only tied to the browser that is visiting the pref pages. It does not apply to the user.


(Christoph) #10

Oh, I see. But since the setting is under user preferences, I I’d suggest that this should be specified, i.e. Theme (applies only to current browser) or something like that.

But how about classes for groups then? (As always, in my youthful senile naivity, I believe it can be done in no time…)


(David Taylor) #11

Why is this? Having to set the theme on every new browser seems like unnecessary effort for the user?


(Sam Saffron) #12

We can revisit this at some point, but just cause you changed it to night mode on your mobile does not mean you want it on night mode when you get to the office.

The team felt pretty strongly about tying this to the browser, regardless this discussion deserves a topic of its own, with UI mockups of how you would set it “everywhere” vs “only on this browser”


(Bart) #13

Going back to the original question of group-specific CSS, I noticed that the body tag has the primary group in it:

<body class="primary-group-moderators">

Is there a way to add non-primary groups here too that doesn’t involve an additional HTTP request like @DeanMarkTaylor’s solution?