Skip to main content

CSS Customization

Legacy CSS Documentation

This document references updated styles and classes as part of the redesigned Layouts experience in 2025. If you need to reference the legacy documentation, you can find that here. You can also check out our migration guide here

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 construct unique layouts that, in turn, have different layers that appear to Data Subjects with varying levels of detail with regards to their privacy rights and the actions they can take.

DGApp Settings

For customers that want to have more control over their banner layout and layer appearances, you can follow this guide to set up your layout to accept custom styles.

CSS Development Support

Most CSS changes will take only a few minutes to implement. For more advanced customizations, 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.

CSS Convention Updates

Changes to CSS styles and conventions may occur as we evolve the base of the banner notice. You will be informed well in advance of any changes, as well as given ample time to migrate. You can test how your banner appears on your website using this guide.

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

Set the firing trigger to all pages. 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 "secondary" contents.

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

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

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

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

General CSS Variables

Body​

These variables affect "Body" style text elements.

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

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

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

--dg-body-line-height: Determines the line height.

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

DG Explanation CSS Variables

Heading​

These variables affect "Heading" style text elements.

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

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

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

--dg-heading-line-height: Determines the line height.

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

Header CSS Variables

Title​

These variables affect "Title" style text elements.

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

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

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

--dg-title-line-height: Determines the line height.

Category Title​

This is a collection of variables that affect 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 affect 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-weight: 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-weight: 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 affect 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 affect 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​

DataGrail's layout editor allows elements to be positioned in any order and on any layer. The HTML structure of the Consent Banner is therefore flexible and will depend on your specific configuration.

However, there are a few key elements (and CSS classnames) that are present in every configuration, as detailed below.

.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 flex 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 includes both the first element (assumed to be the banner title), and the "close" button, if configured.

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

DG Header

.dg-header-close​

dg-header-close is the element containing the close icon, if the banner has been configured to have a close button. If it is not configured to have a close button, this element will not exist.

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

DG Header Close

.dg-main-content-explanation​

Future Updates

This classname may be updated in future to be simpler and more semantically correct, e.g. .dg-text

dg-main-content-explanation is the base class for all text elements.

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

DG Main Content Explanation

.dg-text-body​

dg-text-body is the class applied to all text elements with "body" style.

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

DG Text Body

.dg-text-title​

dg-text-title is the class applied to all text elements with "title" style.

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

DG Text Title

.dg-text-header​

dg-text-header is the class applied to all text elements with "header" style.

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

DG Text Header

.dg-button​

dg-button is the container for the user call to actions in the Consent Banner.

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

DG Button

dg-links is the container element that holds all links, if links have been configured.

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

DG Links

dg-link is the anchor element that holds each individual link, if links have been configured.

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

DG Link

.dg-main-content-policies​

dg-main-content-container is the container for the cookie consent categories.

: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 each individual consent category.

: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 each consent category - not including the category description.

: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 descriptive 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

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">
  :host(.dg-consent-banner) {
    .dg-app, .dg-app > *, .dg-button, .dg-link, .dg-main-content-explanation {
      background: black;
      color: white;
    }

    .dg-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

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.dg-right) {
    top: unset !important;
    width: 100%;
    max-height: unset;
  }

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

  :host(.dg-consent-banner) .dg-main-content-explanation,
  :host(.dg-consent-banner) .dg-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 {
    font-size: 14px;
  }
  :host(.dg-consent-banner) .dg-links {
    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-button {
    width: fit-content;
  }
}

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.