Cookie Banner Colors and Custom CSS in Free Cookie Consent

Match the cookie banner and Preferences Center to the colors of your site

TermsFeed Free Cookie Consent offers 2 color palettes, light and dark, and every other color change is a CSS rule of your own. Put your rules in your site stylesheet, so the consent banner matches your brand without a modified copy of the script.

The styling takes 5 steps and about 20 minutes. You need access to the page template that holds the Cookie Consent snippet and to a stylesheet that loads on every page.

Step 1: Choose the light or dark palette

Set palette to "light" or "dark" in the configuration object. Cookie Consent uses light when the option is missing or holds an unknown value. The TermsFeed generator preselects the dark palette, so a generated snippet holds "palette": "dark" until you change it.

<script type="text/javascript" charset="UTF-8">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
  "notice_banner_type": "headline",
  "consent_type": "express",
  "palette": "light",
  "language": "en"
});
});
</script>

The palette colors the consent banner and the Preferences Center together. Keep its hex values at hand for any rule that changes only part of the design.

Step 2: Write CSS rules that override the built-in styles

Write a selector that starts with the id of the consent banner or the Preferences Center, such as #termsfeed-com---nb .cc-nb-okagree, or add !important to the declaration. Cookie Consent adds its styles as one <style> element at the end of <head>, after your stylesheets, so its rules take precedence over a rule of yours with the same specificity. A selector with an id outranks the palette rules that use 2 classes and no !important.

Add rules like these to a stylesheet that loads on every page. The example gives the consent banner a navy background and gives the "I agree" and "I decline" buttons the same blue, so neither button stands out over the other.

/* Consent banner background, text, and font */
#termsfeed-com---nb {
  background-color: #162942;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
}

#termsfeed-com---nb .cc-nb-title,
#termsfeed-com---nb .cc-nb-text,
#termsfeed-com---nb .cc-nb-text a {
  color: #ffffff;
}

/* "I agree" and "I decline" share one style */
#termsfeed-com---nb .cc-nb-okagree,
#termsfeed-com---nb .cc-nb-reject {
  background-color: #1a54a9;
  color: #ffffff;
  border-radius: 6px;
}

/* "Change my preferences" */
#termsfeed-com---nb .cc-nb-changep {
  background-color: #ffffff;
  color: #162942;
  border-radius: 6px;
}

/* "Save my preferences" in the Preferences Center */
#termsfeed-com---preferences-center .cc-cp-foot-save {
  background-color: #1a54a9;
  color: #ffffff;
}

/* Preferences Center content panel: the palette sets this background with !important */
#termsfeed-com---preferences-center .cc-cp-body-content {
  background-color: #f5f8fd !important;
}

A few built-in rules already carry !important, and only another !important declaration overrides them. They set the margins of the 3 consent banner buttons and the Arial font of the Preferences Center tabs. The palette backgrounds of the Preferences Center body, its content panel, and the active tab are among them.

Your own site styles reach inside the dialogs too. Cookie Consent resets the margins, padding, borders, and fonts of links, paragraphs, buttons, and form fields inside them. A site rule for button or a reaches the dialogs for a property the reset leaves unset. For a property the reset sets, it reaches them only when it carries !important or a selector that outranks the reset class. Scope such rules to your own containers when the consent banner buttons change shape or color unexpectedly.

Step 3: Find the class of any element of the consent banner

Right-click any part of the consent banner or the Preferences Center and choose Inspect to read its id and classes in the Elements tab of Chrome DevTools. Every id and top-level class Cookie Consent adds starts with termsfeed-com---. Most inner elements use classes that start with cc-nb- on the consent banner and cc-pc- or cc-cp- in the Preferences Center.

These selectors cover the elements most sites restyle, and each one outranks the built-in rules that do not carry !important. Find every other id, class, and state attribute of both dialogs in the DOM and CSS reference.

Step 4: Keep the "I decline" button visible

Restyle the "I decline" button as freely as the "I agree" button, but never hide it, shrink it, or give it a color that blends into the background. A visitor refuses with that button in 1 click. A consent banner that makes refusing harder than accepting weakens the consent you collect. Read why the button stays in Reject All Button and Cookie Walls.

The line "Cookie Consent by TermsFeed" in the Preferences Center footer stays in place, because no option removes it. Cookie Consent sets it to display: block !important. Change its color or size with a rule on #termsfeed-com---preferences-center .cc-cp-foot-byline where it clashes with your design.

Step 5: Check the new colors in Chrome DevTools

Your normal window keeps your earlier answer, and that saved answer hides the consent banner, so start the checks from a fresh window.

1. Deploy the stylesheet, and clear your page cache if your site has one. Close every private window, open a new one, open Chrome DevTools on the Network tab, and load your site. Confirm that the stylesheet with your color rules loads with status 200.
2. Select the Elements tab, select div#termsfeed-com---nb, and open the Styles pane. Confirm the Styles pane shows your rule ahead of the built-in rule, and that the built-in declaration is struck through.
3. Click the "Change my preferences" button, select div#termsfeed-com---preferences-center, and repeat the check for the Preferences Center rules.
4. Confirm that the footer line of the Preferences Center stays readable, then close the Preferences Center. Confirm that the "I decline" button stays readable against its new background. Move through the consent banner buttons with the Tab key, and confirm each one shows a visible focus ring.

Cookie Consent styles under a Content Security Policy

Cookie Consent copies the nonce from the script tag that loads it onto its <style> element, so a nonce-based Content Security Policy (CSP) allows the styles without 'unsafe-inline'. A policy that blocks inline styles and does not give any script a nonce blocks the element, and both dialogs render unstyled. Your own override rules live in your stylesheet and follow the policy you already set for it. Set up the policy and the nonce with Content Security Policy (CSP).