The Privacy Suite for WordPress

CSS Lesson #17: Copying your Favorite Banner

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.

The new banner is structured in HTML and CSS only. This means, in theory, you can make anything you want. But for more rigorous changes you will need some knowledge of CSS.

I found a cool banner, what now?

Let’s say you have found a banner that looks completely different from the default templates available in Complianz. Can you still create the cool banner you’d like? Yes, you can. The below example is from a client who asked us if we could create this banner in CSS, so she can use it on her websites. So we did.

If you want to challenge us. Leave us a support ticket! We will gladly take you up on it.

 

Changing the default Complianz banner to the above example in two steps

1. Cookie Banner Settings

  • You will need to start in the back-end under Cookie Banner settings and change the texts to the desired text. This is important, as the width of the banner in Complianz is calculated on your button texts.
  • Change the template to Save Preferences. This will make sure that the categories are visible by page load.
  • Change to the desired colours
  • Proceed to enable or disable the required elements. In this case, the button to save preferences, category descriptions are disabled and the title is enabled.
  • You can choose to use capslock for text in the back-end or transform this with CSS after.
  • The icon is loaded with dash icons, make sure this default library in WordPress is loaded. You can use Font-Awesome as well.
  • The width is done with CSS, as we need to force to stack the buttons and calculate the width later.

2. Custom CSS

Add the below CSS, tweak it if needed. That’s it!

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

TTDSG, the New Cookie Law for Germany

As of December 1st, 2021 the Telecommunications-Telemedia Data Protection Act (Telekommunikation-Telemedien-Datenschutz-Gesetz) regulates the handling of cookies, local storage, cookieless tracking,  and other tracking technologies in

Read More

Cookieless Tracking and GDPR

In this article, we will have a closer look at cookieless and server-side tracking and how this affects your website’s configuration regarding privacy laws. The

Read More

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