Common Custom CSS
How to change the order of buttons?
In the script's call back function, grab the elements by their Id and append them in the order that you want back to the button group container
<script type="text/javascript">
function OptanonWrapper() {
// Check if banner div is available
if (document.getElementById('onetrust-banner-sdk')) {
// Get the buttons and container
var acceptBtn = document.getElementById("onetrust-accept-btn-handler");
var declineBtn = document.getElementById("onetrust-reject-all-handler");
var cookieSettingsBtn = document.getElementById("onetrust-pc-btn-handler");
var btnContainer = document.getElementById("onetrust-button-group");
// Set the order you want below...
btnContainer.append(acceptBtn, declineBtn, cookieSettingsBtn)
}
}
</script>
How to change the 'X' button
In your template's Banner Custom CSS section (Template-> Banner -> Styling-> Custom CSS) Add the following CSS.
#onetrust-banner-sdk .ot-close-icon, #onetrust-pc-sdk .ot-close-icon,
#ot-sync-ntfy .ot-close-icon {
background-image: url(YOUR_IMAGE_URL_HERE);
}
Change the colour of Accept all or Reject all cookie Button on the banner
In your template's Banner Custom CSS section (Template-> Banner -> Styling-> Custom CSS) Add the following CSS.
/* Accept button */
button#onetrust-accept-btn-handler {
background-color: green !important;
}
/* Reject button */
button#onetrust-reject-all-handler {
background-color: red !important;
}
Change the colour of Allow all Button from Preference Center
In your template's Preference Center Custom CSS section (Template-> Preference Center -> Styling-> Custom CSS) Add the following CSS.
button#accept-recommended-btn-handler {
background-color: green !important;
}
Change the colour of Confirm My Choices Button from Preference Center
In your template's Preference Center Custom CSS section (Template-> Preference Center -> Styling-> Custom CSS) Add the following CSS.
button.save-preference-btn-handler.onetrust-close-btn-handler {
background-color: blue !important;
}
Remove OneTrust logo from Preference Center
#onetrust-pc-sdk .ot-pc-footer-logo a {
display: none;
}
#onetrust-pc-sdk .ot-pc-logo {
display: none;
}
Updated about 1 month ago