Search

CCM Advanced Customization

Controlling Banner Template Customization

If you requested that we clear out all styling for your banner implementation, here is the HTML in the backend that you can refer to when creating your own style sheet (CSS).

<div id="truste-consent-track" class="tc-track tc-hide" role="banner">
    <div id="truste-consent-content" class="tc-content">
        <div id="truste-consent-text" class="tc-left-2">
            <div class="tc-repop-msg tc-hide">
                <i class="tc-warning"></i>
                <p id="truste-repop-msg"></p>
            </div>
            <div id="tc-verbiage">
                <span>{{[This site uses cookies and related technologies, as described in&nbsp;our&nbsp;]}}<a href="{{[https://trustarc.com/privacy-policy/]}}" target="_blank" id="truste-cookie-button" style="cursor:pointer;" class="truste-cookie-link">{{[privacy&nbsp;policy]}}</a>{{[, for purposes that may include site operation, analytics, enhanced user experience, or advertising. You may choose to consent to our use of these technologies, or manage your own preferences.]}}</span>
            </div>
        </div>
        <div id="truste-consent-buttons" class="tc-right">
            <button id="truste-consent-button" class="tc-btn-primary tc-btn-icon" type="button">
                <i class="tc-icon tc-icon-accept"></i>
                <span>{{[Accept All]}}</span>
            </button>
            <button id="truste-consent-required" class="tc-btn-primary tc-btn-icon" type="button">
                <i class="tc-icon tc-icon-decline"></i>
                <span>{{[Decline All]}}</span>
              </button>
            <button id="truste-show-consent" class="tc-btn-secondary tc-btn-icon"
                aria-haspopup="true" type="button">
                <i class="tc-icon tc-icon-more-info"></i>
                <span>{{[More Information]}}</span>
            </button>
            <div id="truste-powered-by" class="tc-powered-by">
                <span>{{[Powered by]}}</span>
                <i class="tc-icon tc-ta-icon" role="img" aria-label="TrustArc"></i>
            </div>
        </div>
    </div>
</div>
IDs Breakdown
•  #truste-consent-track: controls the background color for the banner
•  #truste-consent-content: controls the banner width/height, margins, overflow, etc
•  #truste-consent-text: controls the banner verbiage/text
•  #truste-cookie-button: controls the privacy policy link styling
•  #truste-consent-buttons: controls the set of buttons in the banner
•  #truste-consent-button: controls the button that when clicked consents the user to all trackers (ie. user agree button)
•  #truste-consent-required: controls the button that when clicked consents the user to Required Trackers only
•  #truste-show-consent: controls the button that opens the Consent Manager Modal
📋 NOTE
These may change depending on the setup/customization of your banner and its verbiage. Please confirm with your Technical Account Manager if you plan on overriding certain CSS.
TrustArc  ·  Cookie Consent Manager — UI Customization Guide  ·  www.trustarc.com