Complianz Privacy Suite

CSS Lesson #6 How we styled our own Cookie Notice

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
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!
  • Want the same banner? Use floating right, block style, and the slider for categories. Copy/Paste below CSS and you’re almost there.

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:
NB. You cookie banner will inherit your theme styles. For more customization you can add custom CSS as shown below. 

/* Font family, weight and size for cookie message */
.cc-message {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 14px;
}
/* Adding margin for consistency on website */
#cc-window.cc-type-categories.cc-floating .cc-compliance .cc-accept-all.cc-dismiss {
margin: 14px 0 0 0;
}
/* Styling the window to match website */
.cc-window{
z-index:9999;
border-bottom:solid 8px #29b6f6;
border-radius:5px;
box-shadow: /*layered*/
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);
}
/* Font family, weight and size for categories. */
.cc-window .cc-category{
font-size:14px;font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif;font-weight: 300;
}
/* Font family, weight and size for buttons. */
.cc-btn {
border-radius: 50px!important;
font-family: 'Roboto', sans-serif;
font-weight: 400!important;
font-size: 11px;
text-transform: Uppercase!important;
letter-spacing: 1.8px;
}
/* Font color for links. */
.cc-link {
color: #29b6f6!important;
}

@media screen and (max-width: 768px){ /*display on mobile*/
.cc-revoke .cc-bottom {
display: block!important;
}}

Recent articles

Subscribe