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:
hide a number of elements that they don’t need to accomplish what I need them to do
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: enable group class for custom CSS
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>
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?
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.)
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.
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.
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…)
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”
getting default “large text”.