# Show/hide themes for specific groups?

**URL:** https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459
**Category:** Support
**Created:** [April 19, 2019, 9:54am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459 "2019-04-19T09:54:38Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [April 19, 2019, 9:54am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/1 "2019-04-19T09:54:39Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 19, 2019, 12:04pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/2 "2019-04-19T12:04:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [April 19, 2019, 6:33pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/3 "2019-04-19T18:33:20Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 19, 2019, 6:56pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/4 "2019-04-19T18:56:18Z")

</div>

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:

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

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 19, 2019, 6:59pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/5 "2019-04-19T18:59:47Z")

</div>

> [@awesomerobot](#):
>
> 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.

Right, and _that’s_ the reason I didn’t suggest this answer. Security. 😉

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 19, 2019, 7:13pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/6 "2019-04-19T19:13:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [April 19, 2019, 7:21pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/7 "2019-04-19T19:21:54Z")

</div>

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

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [April 19, 2019, 9:12pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/8 "2019-04-19T21:12:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [April 20, 2019, 1:25am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/9 "2019-04-20T01:25:19Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 20, 2019, 1:50am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/10 "2019-04-20T01:50:05Z")

</div>

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:

```plaintext
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;
  }
}

```

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [April 20, 2019, 5:51am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/11 "2019-04-20T05:51:28Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [April 20, 2019, 10:22am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/12 "2019-04-20T10:22:58Z")

</div>

> [@awesomerobot](#):
>
> 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.

This would be IDEAL. 🎉

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [April 21, 2019, 5:39pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/13 "2019-04-21T17:39:22Z")

</div>

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

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [May 10, 2019, 1:08pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/14 "2019-05-10T13:08:27Z")

</div>

> [@awesomerobot](#):
>
> body:not(.Patreon-02) {  
> .user-preferences .select-kit-row[data-name=“Dark”] {  
> display: none;  
> }  
> .menu-container-footer-links li[data-name=“Dark”] {  
> display: none;  
> }  
> }

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?

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [May 11, 2019, 3:37pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/15 "2019-05-11T15:37:39Z")

</div>

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…

---

<div class="post-metadata">

### Author: ![WaitroseCarpark](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/waitrosecarpark/32/198599_2.png) [@WaitroseCarpark](https://meta.discourse.org/u/WaitroseCarpark)
#### Post date: [May 12, 2019, 4:18pm UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/16 "2019-05-12T16:18:35Z")

</div>

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;
  }
}

```

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 15, 2022, 7:41am UTC](https://meta.discourse.org/t/show-hide-themes-for-specific-groups/115459/18 "2022-09-15T07:41:51Z")

</div>


