GDPR cookie consent plugin allows you to customize the cookie banner in different ways. Following are some of the sample code snippets by which you can customize the cookie banner, settings popup, audit table, etc. to suit the theme of your website.
You can insert the code snippets into the theme file of your website in any of the following manner:
- Insert within the style.css of the theme file OR
- Appearance -> Customize -> Additional CSS
Change the background color and width of cookie bar
/* Cookie Bar */
#cookie-law-info-bar {
width: 100%;
background-color: #ffffff !important;
}
Change the cookie bar heading color
/* Cookie Bar Heading */
#cookie-law-info-bar .cli_messagebar_head {
color: black;
}
Change the alignment of the cookie bar message
/* Cookie Bar Message */
.cli-bar-message {
text-align: left !important;
}
Change the settings button color
/* Cookie Settings Button */
.cli_settings_button {
color : black !important;
}
Change the accept button color
/* Cookie Accept Button */
#cookie_action_close_header {
color: #ffffff !important;
}
Change the reject button color
/* Cookie Reject Button */
#cookie_action_close_header_reject {
color: red !important;
}
Change the color of read more link
/* Readmore Link */
#CONSTANT_OPEN_URL {
color : blue !important;
}
To have curved corners for cookie settings popup
/* Settings Popup */
#cliSettingsPopup .cli-modal-content {
border-radius: 20px;
}
Change the color of ‘show more/show less’ link in settings popup
/* Show more/show less link in Settings popup */
#cliSettingsPopup .cli-privacy-readmore {
color: blue;
}
Change save & accept button color in settings popup
Please add below code snippet to your active theme’s CSS . You can change the hex value in the code to change the color.
#cliSettingsPopup .cli-tab-footer .cli-btn {
background-color: #2196f3;
}
Change color of privacy overview heading in settings popup
/* Privacy overview heading in settings popup */
#cliSettingsPopup .cli-privacy-overview h4 {
color: black;
}
Change the text alignment of privacy overview content in settings popup
/* Privacy overview content in settings popup */
#cliSettingsPopup .cli-privacy-overview .cli-privacy-content {
text-align: left;
}
Change background color of privacy overview – cookie category section
/* Privacy overview - Cookie category section*/
#cliSettingsPopup .cli-tab-header {
background-color: #f2f2f2;
}
Change background color of close button in the settings popup
/* Close button in settings popup */
#cliModalClose {
background-color: #f2f2f2;
}
Change color of Show again tab / Revisit consent
/* Show again tab / Revisit consent */
#cookie-law-info-again {
background-color: #ffffff !important;
}
Change cookie category slider color in settings popup
#cliSettingsPopup .cli-switch input:checked + .cli-slider {
background-color: rgb(45, 148, 203);
}
Change color of cookie audit table
/* Cookie Audit Table */
table.cookielawinfo-row-cat-table {
color: black !important;
}
Change background color and text colour of cookie audit table header
/* Cookie Audit Table Header */
table.cookielawinfo-row-cat-table thead tr th {
background-color: #e2e2e2;
color: black;
}
Change color of cookie audit table body
/* Cookie Audit Table Body */
table.cookielawinfo-row-cat-table tbody tr td {
color: black;
}
For mobile devices
You can enclose the below given code inside the media query for mobile devices.
eg: If the customization of settings button is needed in mobile devices then use the below code,
@media only screen and (max-width: 500px) {
.cli_settings_button {
color : green !important;
}
}
Note:
Try to add !important rule at the end of the line, immediately before the semicolon to override other styles defined for that element.
For eg:
#cookie-law-info-again {
background-color: #ffffff !important;
color: yellow !important;
}
Customise the Do not sell popup (CCPA)
/* cancel button style */
#cLiCcpaOptoutPrompt .cli-modal-dialog button.cli-ccpa-button-cancel{
color : #ffffff !important;
background-color: #00b093 !important;
border: 2px solid #00b093 !important;
}
/* confirm button style*/
#cLiCcpaOptoutPrompt .cli-modal-dialog button.cli-ccpa-button-confirm{
color : #ffffff !important;
background-color: #fc4b05 !important;
border: 2px solid #fc4b05 !important;
}
/* modal background*/
#cLiCcpaOptoutPrompt .cli-modal-dialog .cli-modal-content {
background-color : rgb(196, 239, 218) !important;
}
jose
May 17, 2023
Hello, thanks for this plugin.
I ´d like to add a checkbox to the consent window. I have added a code like but it gets cleaned up. Any help, please? Thanks in advance.
Hema
May 22, 2023
Hello Jose,
Thanks for reaching out.
For this custom code requirement, Kindly contact customer support.
Rob
February 7, 2022
In the privacy overview Our lawyers have said the button “save and accept” should be changed to “save setttings”. How do I change the wording ?
Mark
February 16, 2022
Hi Rob,
As there is no option in the plugin to change this as of now, you may please copy the code snippet here to your active theme’s functions.php
Colin
February 22, 2022
Hey Rob,
Your lawyers aren’t actually correct, because what this button actually does in reality is:
– ‘accept’ necessary cookies (as there’s no possible way to not accept them)
– and then enable / disable additional categories based upon your selection.
So by changing the button to say ‘save settings’ I would actually argue this is worse; because now at no point does a visitor click ‘accept’ at all.
You can see how we have configured ours here: https://www.akikodesign.com/ < we believe this complies with GDPR rules as at the time of writing this message.
Victoria
February 1, 2021
Is there any way to have the cookie bar appear above the header, instead of on top of it?
Mark
February 4, 2021
Please reach out via support with the site URL so that we can check and see if it is possible to help.