Complianz Privacy Suite

An introduction to the New Templates

Aert Hulsebos

Aert Hulsebos

Categories

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
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

From 4.6.0 upwards new templates are available for even more flexibility.

The possible templates available are:

  • DNSMPI/USA/Canada and other opt-out banners. 
  • Accept or Deny banners for opt-in regions.
  • Categorical banners with Deny and Save Preferences.
  • New: Categorical banners, with hidden categories – with Accept All – Deny – View/Save Preferences toggling or saving the preferences with an animation.
  • New: Categorical banners with Accept All and Save Preferences, where categories are directly shown.

New features also include:

Two new toggles to handle the categories

  • Classic checkboxes
  • Toggles – fully customizable

And for floating banners, you can now adjust the width. All these new possibilities come with more settings to customize your banners. To create a good starting point, we have added color schemes:

Below color schemes are available for all templates – we used different configurations so you can have a feel for what is to come!)

Minimalist
Dark Mode - Classic Checkboxes
WordPress Default - Square Checkboxes
Really Simple SSL - Sliders
Complianz - Classic Checkboxes
WP Search Insights - Sliders
ZIP Recipes - Square Checkboxes
Previous
Next

Creating your favorite cookie banner

In previous lessons, we explained how to use the CSS classes to customize the banner even more. These are the additional CSS classes you can use since the new update. You can play around with the customizations if needed, but in this CSS lesson, we will focus on creating a banner with round borders and a different border color.

New properties

  • .cmplz-slider-checkbox{} /* styles for the checkboxes */
  • .cc-accept-all{} /* styles for the accept all button */

 

We need the following classes to achieve below customized banner:

  • .cc-window{} /* styles for the cookie banner window */
  • .cc-btn{} /*styles for the buttons*/
Custom CSS

Custom CSS used:

CSS is used for the bottom border, border-radius on the buttons and window, including box-shadow. Most are available with other templates, like box shadow and border radius. You can choose any template to built upon with our WSIWYG editor, or customize however you want with CSS.

.cc-window
border-bottom: 5px solid #000;
border-radius: 15px;
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
}
.cc-btn {
border-radius:50px;
}

Hope you enjoy the possibilities, leave a comment with a question or ask support!

Recent articles

Subscribe