Cookie Consent adds the cookie banner and the Preferences Center to <body>, with fixed ids and classes you target from CSS and JavaScript. Every id and top-level class Cookie Consent adds starts with the prefix termsfeed-com---, and most inner classes start with cc-. Change colors and layout with your own CSS.

For a visitor who has not answered, and on every page load in demo mode, run() inserts the consent banner. Cookie Consent adds the Preferences Center to the end of <body> the first time it opens. Both elements nest with these main classes.

body
├─ div#termsfeed-com---nb.termsfeed-com---reset.termsfeed-com---nb.<palette>.<layout>.termsfeed-com---lang-<code>
│  └─ div.cc-nb-main-container
│     ├─ div.cc-nb-title-container > p.cc-nb-title
│     ├─ div.cc-nb-text-container > p.cc-nb-text > span.cc-nb-text-content (+ span.cc-nb-text-urls)
│     └─ div.cc-nb-buttons-container > button.cc-nb-okagree, button.cc-nb-reject, button.cc-nb-changep
└─ div#termsfeed-com---preferences-center.termsfeed-com---pc-overlay.<palette>.termsfeed-com---reset.termsfeed-com---lang-<code>
   └─ div.termsfeed-com---pc-dialog > div.cc-pc-container
      ├─ div.cc-pc-head > div.cc-pc-head-title, div.cc-pc-head-lang (button.cc-pc-head-close, select.cc-pc-head-lang-select)
      ├─ div.cc-cp-body > div.cc-cp-body-tabs (button.cc-cp-body-tabs-item.cc-cp-body-tabs-item-link > span),
      │                   div.cc-cp-body-content > div.cc-cp-body-content-entry (h3, p, div.cc-custom-checkbox > input + label)
      └─ div.cc-cp-foot > div.cc-cp-foot-byline, div.cc-cp-foot-button > button.cc-cp-foot-save

The interstitial layout wraps the consent banner in div.termsfeed-com---nb-interstitial-overlay. After an answer, the consent banner stays in the page with termsfeed-com---is-hidden, which sets display: none.

Cookie Consent sets fixed id patterns on its own elements and reads one id, open_preferences_center, from your page. Find the id of the element your CSS or script targets, or the id your own link needs.

Id Element
termsfeed-com---nb The consent banner
termsfeed-com---nb-title The consent banner title, p.cc-nb-title
termsfeed-com---nb-text The consent banner text, p.cc-nb-text
termsfeed-com---preferences-center The Preferences Center overlay
termsfeed-com---pc-title The Preferences Center title
termsfeed-com---title_<item> A tab button; <item> is your_privacy, a category ID, or more_information
termsfeed-com---content_<item> A tab panel, with the same <item> values
termsfeed-com---level-<category> The switch input of a category
termsfeed-com---level-<category>_label The label of that switch
open_preferences_center An element of your page; the default target of open_preferences_center_selector

The prefixed classes carry the layout, the palette, the language, and the visibility of both dialogs. Select on them to style one layout or one palette.

Class On
termsfeed-com---reset Both dialogs; scopes the CSS reset of Cookie Consent
termsfeed-com---nb The consent banner
termsfeed-com---nb-simple The consent banner in the simple layout: fixed at the bottom right, at most 50% wide (80% at 600px wide or less)
termsfeed-com---nb-headline The consent banner in the headline layout: full width, in the page flow
termsfeed-com---nb-interstitial The consent banner in the interstitial layout, placed 3vh and 3vw from the edges
termsfeed-com---nb-interstitial-overlay The fixed, full-page wrapper of the interstitial layout, rgba(0, 0, 0, 0.8)
termsfeed-com---nb-standalone The consent banner in the standalone layout: fixed and full screen
termsfeed-com---palette-light, termsfeed-com---palette-dark Both dialogs, from the palette option
termsfeed-com---lang-<code> Both dialogs, from the current language
termsfeed-com---is-hidden The consent banner, or the interstitial wrapper, after an answer
termsfeed-com---is-visible The Preferences Center overlay while it is open
termsfeed-com---pc-overlay The Preferences Center overlay, hidden by default
termsfeed-com---pc-dialog The Preferences Center box

At 320px wide or less, or 480px high or less, every layout becomes a panel fixed at the bottom right, 200px high, that scrolls. At 480px wide or less, the consent banner buttons take the full width. Compare the layouts in Cookie Banner Layouts.

The inner classes of the consent banner name its containers, its text parts, and its 3 buttons, in the order of the markup. Style one part of the consent banner, such as a single button, with its class.

Class Element
cc-nb-main-container The inner wrapper of the consent banner
cc-nb-title-container, cc-nb-title The title wrapper and the title, "We use cookies" in English
cc-nb-text-container, cc-nb-text The text wrapper and the text paragraph
cc-nb-text-content The whole consent banner sentence, including the purposes list
cc-nb-text-purposes, cc-nb-text-purposes-item, cc-nb-text-purposes-separator The purposes list, each purpose, and the separators
cc-nb-text-urls, cc-nb-text-urls-privacy, cc-nb-text-urls-separator, cc-nb-text-urls-impressum The legal links added by notice_banner_insert_legal_urls, and the vertical bar between them
cc-nb-buttons-container The button row
cc-nb-okagree The "I agree" button, or the "OK" button in implied mode
cc-nb-reject The "I decline" button, in express mode only
cc-nb-changep The "Change my preferences" button

Inner classes of the Preferences Center

The Preferences Center classes follow the markup from the head through the tabs, the panels, and the switches to the footer. Restyle one part, such as the save button or the tab list, without touching the rest of the dialog.

Class Element
cc-pc-container The inner wrapper of the Preferences Center
cc-pc-head The head row
cc-pc-head-title, cc-pc-head-title-text, cc-pc-head-title-headline The title block, the website_name text, and the title "Cookies Preferences Center"
cc-pc-head-lang, cc-pc-head-lang-select The language menu wrapper and the select
cc-pc-head-close The close button, absent with preferences_center_close_button_hide
cc-cp-body The body that holds the tabs and the panels
cc-cp-body-tabs, cc-cp-body-tabs-item, cc-cp-body-tabs-item-link The tab list and each tab button
cc-cp-body-content, cc-cp-body-content-entry The panel area and each panel
cc-cp-body-content-entry-title, cc-cp-body-content-entry-text The heading and the paragraphs of a panel
cc-custom-checkbox The wrapper div of a switch, and the switch input
is-active, is-inactive The switch label in its "Active" or "Inactive" state
cc-cp-foot The footer
cc-cp-foot-byline The credits line "Cookie Consent by TermsFeed", set to display: block !important
cc-cp-foot-button, cc-cp-foot-save The wrapper and the "Save my preferences" button

Cookie Consent marks the open tab, the switches, and the released scripts with attributes you select on. Style the open tab apart from the others, select one switch by its category, or find which category released a script.

Attribute On Value
active Panels "true" on the open panel, "false" on the others
active Tabs "true" on the selected tab; the other tabs carry "false" only after the first tab click
content_layout Panels The id of the panel, termsfeed-com---content_<item>
t Tabs The id of the panel the tab opens
cookie_consent_toggler Switches "true"
name Switches The category ID, so input[name="tracking"] selects one switch
initial-data-cookie-consent Released scripts The category that released the script

Both dialogs are ARIA dialogs with translated accessible names. The interstitial and standalone layouts and the Preferences Center hold the keyboard focus. The lang and dir attributes follow the current language, with dir="rtl" for Arabic and Hebrew.

The consent banner sets these ARIA roles and focus rules.

  • Dialog attributes. The consent banner carries role="dialog", aria-labelledby="termsfeed-com---nb-title", aria-describedby="termsfeed-com---nb-text", lang, and dir, and its buttons carry role="button".
  • Modal layouts. Only interstitial and standalone carry aria-modal="true". In those 2 layouts the first focusable element of the consent banner takes the focus. Tab and Shift + Tab stay inside the consent banner while the Preferences Center is closed.
  • No close control. The consent banner has no close button and ignores Escape, so it waits for an answer.
  • Focus after an answer. An answer given with the focus inside the consent banner returns the focus to the element that had it before the consent banner showed, or to <body>, without scrolling.

The Preferences Center sets its ARIA roles, holds the keyboard focus, and responds to these keys.

  • Dialog attributes. The overlay carries role="dialog", aria-modal="true", aria-labelledby="termsfeed-com---pc-title", tabindex="-1", lang, and dir.
  • Focus trap. On opening, the close button takes the focus, or the language menu when the close button is hidden. Tab and Shift + Tab stay inside the Preferences Center and skip hidden panels and disabled controls.
  • Escape. Escape closes the Preferences Center like the close button and discards unsaved switch changes, unless preferences_center_close_button_hide is on.
  • Focus on close. On close or save, the focus returns to the element that had it before opening, or to <body> when no element had it, or when that element is gone or hidden.
  • Tabs. The tab list carries role="tablist" and the label "Menu"; each tab carries role="tab", aria-selected, and aria-controls, and each panel role="tabpanel". Arrow keys move between tabs and wrap, Home and End jump to the first and last tab, and Enter or Space opens the focused tab.
  • Switches and labels. Each switch is an input[type="checkbox"] labeled by its tab and described by its "Active" or "Inactive" label. The language menu carries the label "Language selection", and the close button the label "Close".

The consent banner, the overlay behind an interstitial consent banner, and the Preferences Center declare z-index values above 2147483647, the largest value Chrome stores. The order in the page then decides which one shows on top.

Element z-index
Preferences Center overlay 999999999999
Consent banner 99999999999
Interstitial overlay 9999999999

Chrome reports the computed z-index of the consent banner and the Preferences Center as 2147483647. The Preferences Center comes last in <body>, so Chrome shows it above the consent banner. A positioned page element with z-index: 2147483647 that comes later in the page covers the consent banner in Chrome.

Cookie Consent appends its <style> element to <head> at run(), after the stylesheets already there, so its rules take precedence over an earlier rule of yours with the same specificity. Give such a rule a more specific selector, such as #termsfeed-com---nb .cc-nb-okagree, or add !important. A style that your framework or bundler inserts later comes after the Cookie Consent <style> element, so the later rules take precedence at equal specificity.

Cookie Consent already uses !important on a few rules, which only an !important rule of yours overrides.

  • Button margins. The margins of .cc-nb-okagree, .cc-nb-reject, and .cc-nb-changep.
  • Tab font. The font family of .cc-cp-body-tabs.
  • Credits line. The display value of .cc-cp-foot-byline.
  • Panel backgrounds. The palette backgrounds of .cc-cp-body, .cc-cp-body-content, and the active tab.

The reset on .termsfeed-com---reset sets the font stack, font-size: 1rem, line-height: 1.5, and color: #212529, and clears margins, padding, borders, and shadows on links, paragraphs, inputs, buttons, and selects. Site rules on bare elements such as button or a still reach inside both dialogs for properties the reset leaves unset, such as letter-spacing. An !important site rule overrides the reset itself. Style the elements most sites change with Cookie Banner Colors and Custom CSS.