Complianz Privacy Suite

CSS Lesson #1 : Styling the “Allow Cookies” button.

Aert Hulsebos

Aert Hulsebos

Categories

Popular articles

TCF for WordPress

The Transparency Consent Framework () is an initiative by IAB Europe and IAB Tech Lab to provide a platform for vendors, publishers, and consent management

Read More

TCF V2.0 release (Update)

Update: Released on October 5th 2020 Since August 15th the Transparency and Consent Framework V2.0 from IAB Europe or V2 has been adapted by Google

Read More
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

The standard templates and the Custom CSS possibilities makes it possible to design your Cookie Notice to suit the style of your website. We will start a weekly lesson how to add design elements to your Cookie Notice using Custom CSS. You want to try 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 #1 : Styling the “Allow Cookies” button.

The button’s color, border color and text color are all available in the quick edit mode under Cookie Banner settings. For more options you can refer to the Custom CSS editor. For this lesson we will style button so it will have a custom font, a smaller font size and a rounded border. For this you will need the following properties:

.cc-allow { to customize the font and font-size } &
.cc-accept-all { to customize the Accept All button }
.cc-btn { to change the border-radius }

For below banner we used the following CSS properties:

Copy/Paste below code and try it yourself!

/* styles for the allow cookies button */
.cc-allow
{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
.cc-btn
{
border-radius: 50px!important;
}

Recent articles

Subscribe