CSS Lesson #2: Adding Box-Shadow to your Cookie Notice

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

Box-shadow is now a setting under Cookie banner settings – Appearance

The standard templates and the Custom CSS possibilities make it possible to design your Cookie Notice to suit the style of your website. We will start a weekly lesson on how to add design elements to your Cookie Notice using Custom CSS. Do you want to try it yourself? Visit https://www.w3schools.com/cssref/ for an extensive overview of CSS properties.

You can add Custom CSS in our editor, in your theme’s Custom CSS editor or any plugin that provides CSS control. Because every WordPress website is different we will work with the addition of !important to override any CSS currently loaded on your webpage.

Lesson#2: Adding Box-Shadow to your Cookie Notice

The box-shadow is a great way to put depth on your cookie banner. Complianz comes with a minimal template that adds the box-shadow by default, but if you want to change or add it to another template you will need the following CSS properties:

For the below banner, we used the following CSS properties:

.cmplz-cookiebanner { to add shadow to the entire window (box) }

Copy/Paste the below code and try it yourself!

Recent articles

Download

You can also directly download the demo container with triggers and variables/ Please make sure you know how to import a container.

Menu

Google Consent Mode

You can now enable Google Consent Mode for Tag Manager. How it works, and what you need to configure can be found here.

Client Demo

We have a client demo where we have prepared custom events and the most common tags. If you want access for inspiration, please contact support. You will need a Google Account to get access.

Other articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!