Show/hide themes for specific groups?

Support
1

I’d like to offer a patreon tier that allows users access to particular themes. Is there any way of showing/hiding themes from particular groups?

2

Can you back up and describe your use case? I don’t think that you can limit themes by group but you can have themes that behave differently depending on group.

3 Likes
3

I’d like to offer a subscription for my forums. I would like a subscriber to benefit from:

  • Removal of ads (I think I already have that covered)
  • Access to a number of alternate themes where, specifically, the logo/header changes

As users tend to lurk on my forum at work a lot, they’ve requested alternate headers/logos at the top of the site so it looks like they’re on something work-related. eg: ‘Finance’ or ‘Marketing’ or 'SEO or ‘Photoshop’.

My intention is to set up paid subscriptions to remove ads and for access to these themes so people can lurk at work.

Don’t shoot the messenger - they’ve requested this!

4

You can achieve this in a basic way with CSS… here’s how I’d go about it:

  1. Assign Patreon tiers to groups, these groups must have automatically set as primary group enabled

  2. Add all the user-selectable themes you want to make available

  3. You can now hide theme options from user preferences using CSS because primary groups are appended to the body tag, and you can target theme options in the dropdowns via data attributes. You’ll want to add this CSS to a theme component and add the component to all of your themes.

So for example if I wanted to hide a theme named “Dark Theme” from everyone except those in the Staff group, I could do this:

body:not(.staff) { 
  .user-preferences .select-kit-row[data-name="Dark Theme"] {
      display: none;
  }
}

So now “Dark Theme” wouldn’t appear in the user preferences dropdown unless you’re in the staff group.

Someone could figure out a way to dig around in the web inspector and enable these themes, but I imagine most people wouldn’t even look.

All that being said, for the future I think we should definitely consider some “monetization” features that would enable an admin to easily incentivize support with themes, titles, sets of emoji… etc.

13 Likes
5

Right, and that’s the reason I didn’t suggest this answer. Security. :wink:

Doh! So obvious to hide the theme from the theme selector. Now that you’ve said it. You are an @awesomerobot.

4 Likes
6

If you give someone a hammer everything looks like a nail (CSS is my hammer :stuck_out_tongue_winking_eye:).

7 Likes
7

This is great! I’ll give it a go, thank you so much!

1 Like
8

This works perfectly @awesomerobot but I have one more question: I have the Hamburger Theme Selector enabled for all the themes and can’t work out how I can include these? I promise I’ve used the inspect tool but anything aside from the simplest CSS is definitely not a strong point for me

2 Likes
9

Use this to hide the third and fourth buttons in the hamburger selector:

body:not(.staff) { 
    div.menu-container-footer-links > div:nth-child(1) > ul > li:nth-child(3), div.menu-container-footer-links > div:nth-child(1) > ul > li:nth-child(4) {
        display: none;
    }
}

You can only select by order of buttons as far as I can tell, so you’ll have to name the buttons in an order that works for this. I had some that I only wanted admins to see so I named them zAdmin to keep them at the bottom of the list and I only have two buttons visible to all other users.

1 Like
10

The difficulty of selecting one of the list items in the hamburger theme menu has come up a few times, so I just added a data-name attribute there too… it should be available if you update the theme component.

…so in the case where you want to only show the theme for staff:

body:not(.staff) { 
  .user-preferences .select-kit-row[data-name="Dark Theme"] {
      display: none;
  }
  .menu-container-footer-links li[data-name="Dark Theme"] {
      display: none;
  }
}
4 Likes
11

That’s great thank you @pfaffman I got this to work and covered the themes by adding some extra arguments.

@awesomerobot for some reason I couldn’t get your method working (even though it looks like it should)

1 Like
12

This would be IDEAL. :tada:

4 Likes
13

OK I see the Hamburger Theme Selector got an update and I got it working now, thank you so much for the help everyone!

3 Likes
14

Sorry to drag this up again but I have this argument in my CSS but it is not applying correctly.

eg: I have tested on a user in a specific group (‘Patreon-02’), and also tried using the ‘body:not.(.admin)’ argument to test on myself (‘admin’ group), and the theme is still being hidden. So I think it is something to do with the connection between the group name?

anyone have any ideas?

15

I tried with the ‘staff’ group and it works ok. Doesn’t work with ‘admin’ group.

I tried renaming group to just ‘pat’, still not working. So if it isn’t my naming convention it is something to do with the type of group or some other setting?

I thought it was just built-in groups it was working with, but as ‘admin’ doesn’t work not sure where I can go from here…

16

OMG I fixed it!

I was using the wrong class, there was a prefix (I found it by searching for group name in source).

I also need multiple arguments (for each Patreon tier, otherwise this CSS would have massive duplications) - I fixed both by using the following CSS (so only people in the ‘Patreon-02’ or ‘staff’ group can see the ‘Dark’ theme). The repeated display: none; is so the theme is hidden in both user preferences and hamburger theme selector:

body:not(.primary-group-patreons-02):not(.staff) { 
  .user-preferences .select-kit-row[data-name="Dark"] {
  display: none;
  }
  .menu-container-footer-links li[data-name="Dark"] {
  display: none;
  }
}
3 Likes