Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
## OneTrust styles and UI implementation on Cartoon Network site.
In order to integrate One Trust UI elements with the current look and feel of Cartoon Network's site, we perfomed the following actions:
### UI Elements
#### Preference Centre link on footer's site.
- In order to get access to the **Preference Centre** a html tag was added to the footer (`src\client\src\components\Footer\Footer.js`):
> `<a className="optanon-toggle-display">Preference Centre</a>`
- Translations for the footer link is obtained trough this variable:
> `window.OneTrust.GetDomainData().AlertMoreInfoText`
### Style criteria:
According to the OneTrust [documentation](https://support.onetrust.com/hc/en-us/articles/360000070738-Customizing-the-Cookie-Banner-and-Preference-Center-Styling) the current way to customize the interface is through an attached CSS file on the **Custom CSS** field on the Preference Center Styling section on the OneTrust panel (attached CSS file inserted).
- Main colors and styles:
- Font family: `Avenir`
- Colors:
- blue text and background: `#009bdf`
- Rounded corners:
- window: `10px`
- buttons: `6px`
- Replaced:
- Close icon svg on Preference Centre
- Selector: `#optanon #optanon-popup-top .optanon-close`
- Hidden:
- Close button on the banner
- Selector: `.optanon-alert-box-button .optanon-button-close`
- Logo OneTrust
- Selector: `#optanon # optanon-popup-bottom-logo`
- Icons:
- Verification (Accept button)
- Selector: `.optanon-alert-box-wrapper .optanon-button-allow .optanon-alert-box-button-middle button: before`
- arrow (Preference Centre button)
- Selector: `.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle button: before`
## Bug fixing:
- Close button on Preference Center do not close the `greyout` skin when banner is also closed.
- We've found that the `greyout` skin where not closing by close the Preference Centre pop-up, though, we implemented a function to check the `OneTrust.IsAlertBoxClosedAndValid()` value and base the skin display on that (`CookiesJar.js:63`).
### Related links
* Mockup:
> https://support-dmti.atlassian.net/browse/CNI-3266
* Confluence doc:
> https://support-dmti.atlassian.net/wiki/spaces/CNI/pages/375881754/One+Trust+Documentation
* OneTrust
> - https://support.onetrust.com/hc/en-us/articles/360000070738-Customizing-the-Cookie-Banner-and-Preference-Center-Styling
> - https://support.onetrust.com/hc/en-us/sections/360000134198-Cookies-CSS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.