Edit CSS based on Memberstack

How do you edit CSS based on whether a user is a member or not?

Specifically, I have a list of CMS items in Webflow, and I want to:

a) show/hide div overlay
b) adjust opacity of CMS collection

based on whether a user is a member.

I’ve found this article, and I know you could just create 2 separate versions of the content and show/hide depending on membership status, but I imagine there is a better way (e.g. with custom JS).

1 Like

I think I have a JS free hack for this… but it’s probably easier with JS :sweat_smile:

MemberStack literally removes hidden elements from the page, so you could include your additional styling inside an embed that gets removed for active members.

  1. Create an embed with some custom CSS. This CSS should show the div overlays and adjust the opacity.
  2. Give the embed an ms-hide attribute from the link you shared.
  3. When a member logs in, that additional styling will go away.

P.S. I haven’t actually tested this, and I’m pretty sure you’ll want to place that styling embed at the very top of the page to prevent flickering. If you decide to try this, could you let us know what happens?

Also, is this the sort of thing you’re trying to recreate? https://premium-blog.webflow.io/