Skip to main content

Banner Customization via CSS

DataGrail Consent has extensive customization options, so you can match the banner user interface to your web app's branding and design system. Within the DataGrail App, you can set the position of the banner and define first-level text and button action labels.

DGApp Settings

For customers that want to have more control over the banner appearance, you can follow this guide to set up your banner to accept custom styles.

Intermediate CSS

We recommend having a front-end developer with intermediate knowledge of CSS use this article to customize the banner UI. You can also reach out to your engagement manager for support.

Experimental Feature

Banner UI customization via CSS is an experimental feature. We may make updates to the style conventions provided here to improve the developer experience, and these updates may cause styling issues for your deployed Banner on a subsequent publish. Should you use this feature, we recommend having a staging setup where you can preview changes before they are pushed to your production web app.

Creating the <style> element​

DataGrail's Consent Banner is rendered using the Shadow DOM. This helps to encapsulate the elements and prevent any JavaScript and CSS on the page from inadvertently affecting its style or functionality. Due to this encapsulation, <link> elements that point to external stylesheets will have no effect on the banner style.

Instead, we provide two options for injecting your CSS and styling the banner:

  1. Add <style> element via Google Tag Manager (GTM)
  2. Add <style> element directly to the <head> of your page
CSS Selectors

Because we are rendering the Banner using the Shadow DOM, you MUST prepend your CSS selectors with :host(.dg-consent-banner) in order for your styling to be applied.

Via Google Tag Manager (GTM)​

In the same GTM container as your DataGrail Consent Banner, add a new Custom HTML tag. This tag can be named whatever you like.

This tag should contain a single <style> element, with id='dg-consent-custom-style'. This allows our consent banner to recognize and apply these styles to the correct elements.

GTM Custom CSS

After saving this Custom HTML tag, you can preview the CSS before publishing by using GTM's "Preview" functionality.

GTM Preview

When you're happy with this CSS, go ahead and publish your changes.

In DataGrail, sync your tags and then assign the "Essential" category to this new tag. This ensures your custom styles are always injected into the page.

DGApp Custom CSS Tag Category

Via static HTML​

Write your custom CSS inside a <style> tag with the same id attribute as the GTM example above. Place this directly within the <head> section of your HTML document.

This method may be simpler if you have the ability to directly edit your site's HTML, but the downside is that previewing these changes before publishing may be difficult or even impossible, depending on your setup. We recommend having a staging site and associated GTM environment for preview purposes.

HTML and Selector Overview​

CSS Priority

Throughout this guide we will be using the !important flag to illustrate changes to the styling in shorthand.

It is best practice for CSS to develop CSS priority with specificity rather than using the !important tag, so we encourage developers to use whatever method they feel fits their specific needs.

CSS Variables​

We have provided a number of semantically named variables with the intent of simplifying common changes. Benefits of using the variables to effect change include having the full confidence that the overall styling will not be affected.

Variables can be overwritten by wrapping them in the host container.

:host(.dg-consent-banner) {
  --dg-button-border: blue 5px solid;
}

General​

These are variables that affect the entirety of the banner.

--dg-primary-font: Determines the font for the application at large.

--dg-secondary-font: Determines the font for the contents of .dg-main-content.

--dg-consent-background-color: Detemines the color of the background of the banner (excluding buttons and the policy categories).

--dg-consent-background-border: Detemines the border of the banner.

--consent-border-radius: Detemines the radius for the borders of the banner.

:host(.dg-consent-banner) {
  --dg-consent-background-color: gray;
}

General CSS Variables

Heading​

This is a collection of variables that effect the content of the .dg-header container.

--dg-heading-font-size: Determines the font size.

--dg-heading-font-weight: Determines the font weight.

--dg-heading-font-color: Determines the font color.

:host(.dg-consent-banner) {
  --dg-heading-font-color: red;
}

Header CSS Variables

DG Explanation​

This is a collection of variables that effect the content of the .dg-main-content-explanation container.

--dg-explanation-font-size: Determines the font size.

--dg-explanation-font-weight: Determines the font weight.

--dg-explanation-font-color: Determines the font color.

:host(.dg-consent-banner) {
  --dg-explanation-font-color: red;
}

DG Explanation CSS Variables

Category Title​

This is a collection of variables that effect the content of the .dg-main-content-policy-option-heading container.

--dg-policy-option-heading-size: Determines the font size.

--dg-policy-option-heading-weight: Determines the font weight.

--dg-policy-option-heading-enabled-color: Determines the color of the heading if the category has been selected.

--dg-policy-option-heading-color: Determines the color of the heading overall.

--dg-policy-option-chevron-size: Determines the size of the Chevron beside the heading, it takes a numerical value, with the default being 20.

:host(.dg-consent-banner) {
  --dg-policy-option-heading-enabled-color: red;
}

Category Title CSS Variables

Category Description​

This is a collection of variables that effect the content of the .dg-main-content-policy-option-description container.

--dg-policy-option-description-font-size: Determines the font size.

--dg-policy-option-description-font-wieght: Determines the font weight.

--dg-policy-option-description-font-color: Determines the font color.

:host(.dg-consent-banner) {
  --dg-policy-option-description-font-color: red;
}

Category Description CSS Variables

Essential Categories​

This is a collection of variables that essential categories - specifically, the text that replaces the input sliders in the headings.

--dg-policy-option-essential-label-font-size: Determines the font size.

--dg-policy-option-essential-label-font-wieght: Determines the font weight.

--dg-policy-option-essential-label-font-color: Determines the font color.

:host(.dg-consent-banner) {
  --dg-policy-option-essential-label-font-color: red;
}

Essential Category CSS Variables

Category Sliders​

This is a collection of variables that effect the content of the .dg-main-content-policy-option-input container.

--dg-slider-primary: Determines the foreground color for categories that are not enabled.

--dg-slider-secondary: Determines the foreground color for categories that are not enabled.

--dg-slider-enabled-primary: Determines the background color for categories that are enabled.

--dg-slider-enabled-secondary: Determines the foreground color for categories that are enabled.

:host(.dg-consent-banner) {
  --dg-slider-primary: yellow;
  --dg-slider-secondary: grey;

  --dg-slider-enabled-primary: red;
  --dg-slider-enabled-secondary: pink;

  /* For Enabled Categories */
  --dg-policy-option-heading-enabled-color: red;
}

Slider CSS Variables

Buttons​

This is a collection of variables that effect the content of the .dg-button container.

--dg-button-font-size: Determines the font size.

--dg-button-font-weight: Determines the font weight.

--dg-button-color: Determines the font color.

--dg-button-background: Determines the background color.

--dg-button-border: Determines the border.

--dg-button-radius: Determines the border radius.

:host(.dg-consent-banner) {
  --dg-button-color: blue;
  --dg-button-background: skyblue;
  --dg-button-border: none;
  --dg-button-radius: 0;
}

Button CSS Variables

HTML Selectors​

The DataGrail Consent Banner has been designed with the following semantic structure.

This list is not inclusive of every html element present within the application; rather it represents the key components that make up the application.

.dg-consent-banner
    .dg-app  // [FLEX container]
        .dg-header
        .dg-main // [FLEX container]
            .dg-main-content // [FLEX container]
                .dg-main-content-explanation
                .dg-main-content-policies
                    .dg-main-content-policy-option
                        .dg-main-content-policy-option-heading
                            .dg-main-content-policy-option-input
                        .dg-main-content-policy-option-description
                .dg-main-content-declaration
        .dg-main-actions // [FLEX container]
            .dg-button

.dg-consent-banner is the root element that contains the Consent Banner. It is used to set the outer bounds of the app container, often in conjunction with .dg-app.

.dg-app [FLEX container]​

dg-app is the container which positions the Consent Banner. It is also a container, allowing the immediate contents some level of control over the direction and alignment of its immediate children.

:host(.dg-consent-banner) .dg-app {
  border: red 5px solid !important;
}

DG App

.dg-header​

dg-header is the container which defines the heading of the application. It is a flex item, due to its parent being a flex box.

:host(.dg-consent-banner) .dg-header {
  border: red 5px solid !important;
}

DG Header

.dg-header-close​

dg-header-close is the container which contains the close symbol, if the banner has been configured to have a close button. If it is not configured to have a close button the container will not show up.

:host(.dg-consent-banner) .dg-header-close {
  border: red 2px solid !important;
}

DG Header Close

.dg-main [FLEX container]​

dg-main is the container for the dynamic content of the Consent Banner. It is also a flex container, allowing the immediate contents some level of control over the direction and alignment of its immediate children, as well as itself being a direct child of a flex container.

:host(.dg-consent-banner) .dg-main {
  border: red 5px solid !important;
}

DG Main

.dg-main-content [FLEX container]​

dg-main-content is the container for the description portion of the Consent Banner product; excluding the actionable buttons. It is also a flex container, allowing the immediate contents some level of control over the direction and alignment of its immediate children, as well as itself being a direct child of a flex container.

:host(.dg-consent-banner) .dg-main-content {
  border: red 5px solid !important;
}

DG Main Content

.dg-main-content-explanation​

dg-main-content-explanation is the container for the description portion of the Consent Banner product; excluding the expandable sections that appear when the customer chooses to customize their selection.

:host(.dg-consent-banner) .dg-main-content-explanation {
  border: red 5px solid !important;
}

DG Main Content Explanation

.dg-main-content-policies​

dg-main-content-container is the container for the privacy policy declaration (if it is set) and the cookie consent categories. This is only viewable and available when the end user selects to Customize their selection

:host(.dg-consent-banner) .dg-main-content-policies {
  border: red 5px solid !important;
}

DG Main Content Policies

.dg-main-content-policy-option​

.dg-main-content-policy-option is the container for the individual consent categories.

:host(.dg-consent-banner) .dg-main-content-policy-option {
  border: red 5px solid !important;
}

DG Main Content Policy Option

.dg-main-content-policy-option-heading​

.dg-main-content-policy-option-heading is the container for the header portion of the consent categories only - not including the body.

:host(.dg-consent-banner) .dg-main-content-policy-option-heading {
  border: red 5px solid !important;
}

DG Main Content Policy Option Heading

.dg-main-content-policy-option-input​

.dg-main-content-policy-option-input is the container for the input slider for each individual consent category. It also defines the clickable area for selecting the consent category.

:host(.dg-consent-banner) .dg-main-content-policy-option-input {
  border: red 5px solid !important;
}

DG Main Content Policy Option Input

.dg-main-content-policy-option-description​

.dg-main-content-policy-option-description is the container for the information text that can be exposed by expanding an individual consent category.

:host(.dg-consent-banner) .dg-main-content-policy-option-description {
  border: red 5px solid !important;
}

DG Main Content Policy Option Description

.dg-main-content-declaration​

.dg-main-content-declaration is the container for the policy declaration link that is exposed if the end user decides to Customize their selection.

:host(.dg-consent-banner) .dg-main-content-declaration {
  border: red 5px solid !important;
}

DG Main Content Declaration

.dg-main-actions [FLEX container]​

.dg-main-actions is the container for all the user call to actions. It is also a flex container, allowing the immediate contents some level of control over the direction and alignment of its immediate children, as well as itself being a direct child of a flex container.

:host(.dg-consent-banner) .dg-main-actions {
  border: red 5px solid !important;
}

DG Main Actions

.dg-button​

.dg-button is the container for the user call to actions in the Consent Banner. Each one is the direct child of a flex container.

:host(.dg-consent-banner) .dg-button {
  border: red 5px solid !important;
}

DG Button

Advanced Modifications​

The intention of this section is to offer a few common modifications that might be desirable for restructuring the Consent Banner. This is not intended to be an inclusive list of possible modifications, and will not replace understanding of CSS.

To illustrate the changes necessary to perform certain actions, we provide an example of what the Consent Banner looks like unedited.

Unedited Banner

Dark Mode​

A common modification is adding a dark mode option to the banner. Here's some sample code as a baseline:

<style id="dg-consent-custom-style">
  .dark-mode :host(.dg-consent-banner) .dg-app, .dg-app > *, button, .dg-main-content-explanation {
    background: black;
    color: white;
  }

  .dark-mode :host(.dg-consent-banner) button {
    border: 1px solid white;
  }
</style>

Dark Mode Banner

By manipulating the selector .dg-app we can override the dimensions of the Consent Banner.

warning

This will have major ramifications for sizing in all forms. Be sure to thoroughly test this new customized view.

:host(.dg-consent-banner) .dg-app {
  width: 600px !important;
  height: 400px !important;
}

Resize Example

Flexbox Layout​

The Consent Banner uses flexbox to help control the layout of the product, and with a little understanding of its core concepts allows you to dramatically update the layout of the Banner.

warning

This will have major ramifications for behavior of flex items in all forms. Be sure to thoroughly test this customized view.

The existing flex containers are:

  • .dg-app
  • .dg-main
  • .dg-main-content
  • .dg-main-actions
:host(.dg-consent-banner) .dg-app {
  width: 600px !important;
  height: 400px !important;
}

/*
Sets the direction of the buttons to a row,
and removes all the padding and gaps between them
*/
:host(.dg-consent-banner) .dg-main-actions {
  flex-direction: row !important;
  width: 100% !important;
  padding: 0px !important;
  gap: 0px !important;
}

/*
This sets the initial painting of the buttons to eql the
content of the buttons, but ensures all buttons are relatively equally presented
*/
:host(.dg-consent-banner) .dg-main-actions .dg-button {
  flex: 1 1 content;
}

Flexbox Example

Responsive Design (Media queries and Responsive Web Applications)​

We use Media Queries to make the banner responsive at a variety of different screen sizes. The breakpoints we have are:

  • @media only screen and (max-width: 350px) and (min-width: 1px)
  • @media only screen and (max-width: 480px) and (min-width: 351px)
  • @media only screen and (max-width: 768px) and (min-width: 481px)
  • @media only screen and (max-height: 600px)

Using media queries, you can customize and resize the banner at different screen sizes.

@media only screen and (width <=480px) and (width >=351px) {
  :host(.dg-consent-banner),
  :host(.dg-consent-banner.position-right),
  :host(.dg-consent-banner.position-right) {
    top: unset !important;
    width: 100%;
    max-height: unset;
  }

  :host(.dg-consent-banner) .dg-header,
  :host(.dg-consent-banner) .essential_only,
  :host(.dg-consent-banner) .dg-main-content-declaration {
    display: none;
  }

  :host(.dg-consent-banner) .dg-main-content-explanation,
  :host(.dg-consent-banner) .dg-main-content-link,
  :host(.dg-consent-banner) .dg-button,
  :host(.dg-consent-banner) .dg-main-content-policy-option-heading,
  :host(.dg-consent-banner) .dg-main-content-policy-option-input,
  :host(.dg-consent-banner) .dg-main-content-policy-option-description,
  :host(.dg-consent-banner) .dg-main-content-declaration {
    font-size: 14px;
  }
  :host(.dg-consent-banner) .dg-main-content-link-container {
    padding: 0 32px 0px;
  }

  :host(.dg-consent-banner) .dg-main-content-policy-option-heading {
    height: 30px;
  }

  :host(.dg-consent-banner) .dg-main-content-explanation {
    padding: 15px;
  }

  :host(.dg-consent-banner) .dg-main-actions button {
    width: fit-content;
  }

  :host(.dg-consent-banner) .dg-main-actions {
    gap: unset;
    align-items: center;
    border-top: none;
    padding: 0;
  }

  :host(.dg-consent-banner) .dg-customization-button {
    border: none;
    text-decoration: underline;
    font-size: 12px;
  }
}

Responsive Design Responsive Design

 

Need help?
If you have any questions, please reach out to your dedicated CSM or contact us at support@datagrail.io.

Disclaimer: The information contained in this message does not constitute as legal advice. We would advise seeking professional counsel before acting on or interpreting any material.