Fade-Out Effect Above Members-Only Prompts
Styles the members-only and paywall prompts from the WPIDE library with a soft fade over the last lines of the teaser and a clear call-to-action box.
Opens WPIDE on
Code
.wpide-members-only,
.wpide-teaser-box,
.wpide-meter-wall {
position: relative;
margin-top: 2.5em;
padding: 1.25em 1.5em;
border: 1px solid rgba(127, 127, 127, 0.35);
border-radius: 8px;
background: rgba(127, 127, 127, 0.06);
text-align: center;
}
.wpide-members-only::before,
.wpide-teaser-box::before,
.wpide-meter-wall::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 4em;
margin-bottom: 1px;
background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base, #fff));
pointer-events: none;
}
.wpide-members-only a,
.wpide-teaser-box a,
.wpide-meter-wall a {
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.wpide-members-only::before,
.wpide-teaser-box::before,
.wpide-meter-wall::before {
background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base, #111));
}
}Notes
Targets the .wpide-members-only, .wpide-teaser-box and .wpide-meter-wall boxes; change the colours to match your theme.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.