Custom Common CSS and JavaScript

To change the color of Accept All or Reject All cookie button on the banner

1. Navigate to Cookie Consent > Setup > Templates.
2. Click the link in the Name column for the template that you want to edit.
3. In your template's Banner Custom CSS section (Cookie Consent > Templates > Banner > Styling > Custom CSS), add the following:

/* Accept button */  
button#onetrust-accept-btn-handler {
  background-color: green !important;
}

/* Reject button */
button#onetrust-reject-all-handler {
  background-color: red !important;
}

4. Click the Apply Custom CSS button.
5. Click the Save Template button. For the changes to reflect on your site, the respective domain's production or testing script must be republished.

To customize the persistent Cookie Settings button

To change the color

1. Download the transparent .png file.
2. Navigate to Cookie Consent > Setup > Templates.
3. Click the link in the Template Name column for the template that you want to edit.
4. Select Preference Center > Styling > Button Logo.
5. Click the Upload button and select the file.
6. In your template's Preference Center Custom CSS section (Cookie Consent > Setup > Templates > Preference Center > Styling > Custom CSS), add the following:

#ot-sdk-btn-floating .ot-floating-button__front { background-color: #140b75 !important; }

📘

Ensure that the !important property is not missed from the CSS above or it will default to light blue color.

7. Update the HEX value #140b75 above to the HEX color code you want on the page.

📘

You can use the built-in Colour picker functionality typing "hex colour picker" on Google.

8. Click the Apply Custom CSS button.
9. Click the Save Template button. For the changes to reflect on your site, the respective domain's production or testing script must be republished.

📘

For the changes to reflect on your site, the respective domain's production or testing script must be republished.

To change the cookie icon to a shield icon adding a custom color

1. Download the transparent .png file.
2. Navigate to Cookie Consent > Setup > Templates.
3. Click the link in the Template Name column for the template that you want to edit.
4. Select Preference Center > Styling > Button Logo.
5. Click the Upload button and select the file.
6. In your template's Preference Center Custom CSS section (Cookie Consent > Setup > Templates > Preference Center > Styling > Custom CSS), add the following:

#ot-sdk-btn-floating .ot-floating-button__front { background-color: #140b75 !important; box-shadow: 5px 5px 8px 0 rgb(0 0 0 / 20%) !important; border-radius: 10px !important; }

📘

Ensure that the !important property is not missed from the CSS above or it will default to light blue color and be circular instead of a rounded-edged square.

7. Update the HEX value #140b75 above to the HEX color code you want on the page.

📘

You can use the built-in Colour picker functionality typing "hex colour picker" on Google.

👍

For more information, see Customizing the Preference Center Template.

8. Click the Apply Custom CSS button.
9. Click the Save Template button. For the changes to reflect on your site, the respective domain's production or testing script must be republished.
10. Navigate to Cookie Consent > Integration > Scripts.
11. Click the link in the Name column for the script that you want to publish.
12. Click the Publish Test or the Publish Production button to commit the changes.

👍

For more information on script settings and configuration, see Publishing and Implementing Cookie Consent Scripts.

To change the contrast ratio of background color on banner buttons

OneTrust banner buttons' text-to-background colour contrast should be a minimum of 4.5:1 when focused or hovered over (default behavior is to reduce the opacity to 0.9). Follow the steps below to ensure that the required contrast ratio is met:

1. Navigate to Cookie Consent > Setup > Templates.
2. Click the link in the Template Name column for the template that you want to edit.
3. In your template's Banner Custom CSS section (Cookie Consent > Setup > Templates > Banner > Styling > Custom CSS), add the following to override the opacity settings:

#onetrust-banner-sdk .ot-sdk-button:hover,
#onetrust-banner-sdk :not(.ot-leg-btn-container)>button:not(.ot-link-btn):hover,
#onetrust-banner-sdk :not(.ot-leg-btn-container)>button:not(.ot-link-btn):focus,
#onetrust-pc-sdk .ot-sdk-button:hover,
#onetrust-pc-sdk :not(.ot-leg-btn-container)>button:not(.ot-link-btn):hover,
#onetrust-pc-sdk :not(.ot-leg-btn-container)>button:not(.ot-link-btn):focus,
#ot-sdk-cookie-policy .ot-sdk-button:hover,
#ot-sdk-cookie-policy :not(.ot-leg-btn-container)>button:not(.ot-link-btn):hover,
#ot-sdk-cookie-policy :not(.ot-leg-btn-container)>button:not(.ot-link-btn):focus {
    opacity: 1;

4. Click the Apply Custom CSS button.
5. Click the Save Template button. For the changes to reflect on your site, the respective domain's production or testing script must be republished.

📘

This will cancel the buttons' opacity settings when focused or hovered to match the applied coloring configurations in the template styling section. Please note that the code above is for example purposes only, and you will need to manage and maintain it or make any further edits.

Extra CSS settings may be required to add extra coloring configurations for buttons when hovered/focused if needed.

👍

For more information on template configurations and banner publication, see Customizing the Banner Template and Publishing and Implementing Cookie Consent Scripts.

To change the color of the Allow All button on the preference center

1. Navigate to Cookie Consent > Setup > Templates.
2. Click the link in the Name column for the template that you want to edit.
3. In your template's preference center Custom CSS section (Cookie Consent > Setup > Templates > Preference Center > Styling > Custom CSS), add the following:

button#accept-recommended-btn-handler {
  background-color: green !important;
}

4. Click the Apply Custom CSS button.
5. Click the Save Template button. For the changes to reflect on your site, the respective domain's production or testing script must be republished.

To change the color of the Confirm My Choices button on the preference center

1. Navigate to Cookie Consent > Setup > Templates.
2. Click the link in the Name column for the template that you want to edit.
3. In your template's preference center Custom CSS section (Cookie Consent > Setup > Templates > Preference Center > Styling > Custom CSS), add the following:

button.save-preference-btn-handler.onetrust-close-btn-handler {
  background-color: blue !important;
}

To remove the OneTrust logo from the preference center

1. Navigate to Cookie Consent > Setup > Templates.
2. Click the link in the Name column for the template that you want to edit.
3. In your template's preference center Custom CSS section (Cookie Consent > Templates > Preference Center > Styling > Custom CSS), add the following:

#onetrust-pc-sdk .ot-pc-footer-logo a {
  display: none;
}

#onetrust-pc-sdk .ot-pc-logo {
  display: none;
}

4. Click the Apply Custom CSS button.
5. Click the Save Template button.

To customize preference centers using Custom CSS

You can customize the appearance of your preference center with custom CSS. Your CSS customizations will be applied on top of the existing layout provided by OneTrust. The following Custom CSS classes for preference centers table details the CSS classes that can be adjusted for each respective preference center template type.

👍

CSS files for the Original, Enhanced, and Multi Page preference center templates can be downloaded here: Preference Center CSS Files.