Hey Community,
Tonight, I want to share with you an easy way to apply custom CSS to a component based on conditions. I know this use case is frequently requested by the community, so I’d like to show you how I handle it in my clients’ apps.
I’ll walk you through the implementation step by step. As a bonus, I’ll give you the code for a nice Blurred Disabled Component, styled with CSS that activates based on whether the user has a paid subscription.
Let’s dive in and Glide together!
First, you need to be on a paid team that enables custom CSS. Some legacy paid plans might not include this feature. This tutorial won’t work on the free plan.
-
Target the component where you want to apply conditional custom CSS. Add a class name like “only-for-paid-subscriber”.
-
Add a random component just above the target component, like an empty container or text. Set its class names to: “hidden” and “user-is-on-free-tier”.
-
Go to the settings tab, then into Appearance. Scroll down to Custom CSS, enable Preview Custom CSS, and add the following:
.hidden {
display: none;
}
.user-is-on-free-tier + .only-for-paid-subscriber,
.user-is-on-free-tier + .only-for-paid-subscriber * {
cursor: not-allowed;
pointer-events: none;
}
.user-is-on-free-tier + .only-for-paid-subscriber::after {
content: 'Only available on paid membership 🔒';
backdrop-filter: blur(2px);
position: absolute;
width: 100%;
height: 100%;
font-size: 1.2rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 100;
}
.user-is-on-free-tier + .only-for-paid-subscriber::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.3);
z-index: 100;
}
-
Set a visibility condition on the random component. In my example, I check whether the user has the role Paid or not:
-
If the logged-in user is not on a Paid plan, you’ll get this nice visual result:
Fields in the disabled component will be impossible to edit via cursor.
