Complianz Privacy Suite

CSS Lesson #4: The Soft Cookie Wall

Aert Hulsebos

Aert Hulsebos


Popular articles

Creating the Legal Hub

Have you seen our new Legal Hub? If not, have a look before reading this instruction article. We created the legal hub to centralize our

Read More

Placeholders for iFrames

From 4.6.11 onwards, you can also use consent shortcode wrappers. An instruction can be found here. You’re able to block iFrames with Complianz with the

Read More
Share on facebook
Share on twitter
Share on linkedin

From 3.1 onwards, Complianz will feature a so-called “Soft” Cookie Wall. Below you can find a short description that explains the difference between the “Soft” Cookie Wall and the regular Cookie Wall as prohibited by GDPR and more privacy laws.

Also, we will have a look at how to enable and change the Soft Cookie Wall, if needed.

“Soft” versus regular Cookie Wall

The regular Cookie Wall will give the user no choice, besides leaving the website or agreeing to third-party cookies. For more legal background on read our article on cookie walls and the GDPR and other privacy regulations:

Cookie Wall as prohibited by GDPR

The “Soft” Cookie Wall will add a new choice, which is dismissing the cookies, before continuing the website visit.

A “Soft” Cookie Wall as shown on a Dutch website with Complianz installed.

Both Cookie Walls will ask for consent before the website is visible. While most Cookie Walls also prohibit reading the Cookie Policy, before any consent. Complianz’ Cookie Wall will change behavior when on the Cookie Policy, so the policy can be read properly.

Editing Complianz’ Soft Cookie Wall

First, you need to enable the Soft Cookie Wall. This can be done under Cookie Banner settings and is available for all templates.

To edit the template, please refer to the current CSS Lessons. To edit the Cookie Wall, and specifically the background, you can use below CSS properties:

rgba(where a is Alpha) will offer you the possibility to add/change color and opacity. RGBA is similar to HEX (#2daee1) in that it has 24 bits for RGB color, but there is an additional 8-bit value for transparency. From HEX to RGBA? We found a tool for you to experiment with.

* styles for cookie wall background */
.cmplz-soft-cookiewall {
background-color: rgba(0, 0, 0, 0.7);

Changing the background of the Soft Cookie Wall

If you want to the change the opacity or color of the background, you can!

We changed the opacity from 0.7 by default to a less opaque 0.5. Where 1 is a solid color and 0 is translucent.
We changed the color to purple, or #693187

The “Soft Cookie Wall with another color and less opacity.
/* styles for cookie wall background with hex color #693187 */
.cmplz-soft-cookiewall {
background-color: rgba(105, 49, 135, 0.5);

Recent articles