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