Complianz Privacy Suite

CSS Lesson #6 How we styled our own Cookie Notice

Aert Hulsebos

Aert Hulsebos


Popular articles

AMP Integrated with Complianz

From 4.1 onwards, we have integrated with AMP for WordPress. The integration is with the following free AMP plugin Another plugin called AMP for

Read More
Share on facebook
Share on twitter
Share on linkedin
Have you seen our banner? Not yet, please revoke the settings and show the banner by clicking the floating button on the bottom of the window, on the right-hand side. Or look at this!    

For this simple, but elegant banner we changed a couple of things:

  • Our buttons for example all have Uppercase letters with a bit more letter spacing than our body text.
  • Our fonts are not inherited from our theme, so we needed to add the correct family and weight to the fonts.
  • We changed to a more rounded banner to inherit the style from our website
  • We added a border to the bottom with our color.
  • The read more link is now blue!

As you can see, the banner templates are flexible and even simple banners have more changes than you might think. Here is what we did:

/* styles for the entire window, including fonts and bottom border */

.cc-window {
z-index: 9999;
border-bottom: solid 8px #29b6f6;

/* styles for the save preferences button, including uppercasing the font and rounding the borders */

.cc-btn {
border-radius: 50px; 
font-weight: 400;
font-size: 14px;
text-transform: Uppercase;
letter-spacing: 1.8px;

/* styles for the read more hyperlink */

.cc-link {
color: #29b6f6;

Related articles

Leave a Reply

Your email address will not be published.