Search
Close this search box.

CSS Lesson #22: The Soft Cookiewall No Scroll or Blur Effect

The Soft-Cookiewall can also be adjusted with some CSS and/or Javascript to create a No Scroll on the body until the banner has been dismissed, or a blur effect on the body until the banner has been dismissed. Below you will find the needed snippets and an example.

The Blur Effect

The current Soft Cookiewall adds a darkened overlay to highlight the Cookie Banner, to nudge for consent directly after a page load. Instead of a darkened overlay, you can also blur your website before consent. There’s a simple addition in CSS:

.cmplz-soft-cookiewall {
    backdrop-filter: blur(10px);
}

No Scroll on Body

It’s possible to block scrolling when the Cookie Banner is loaded. You will need some Javascript to add/remove classes on the body to get the desired effect. We recommend using an MU plugin to add the below snippet. To add an MU plugin you can follow this handy guide.

Join 1M+ users and install The Privacy Suite for WordPress locally, automated or fully customized, and access our awesome support if you need any help!

Complianz has received its Google CMP Certification to conform to requirements for publishers using Google advertising products.