Customize GDPR cookie banner using CSS

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:

1. Insert within the style.css of the theme file OR
2. 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;
}