> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom styling with CSS (Legacy Banner)

### Overview

On the Legacy Banner, most appearance options live on **Settings > Banner > Style**: layout (position, width, theme), colors, logo, fonts, **z-index**, and animations. Use **custom CSS** only when those fields are not enough.

||| **Custom CSS / advanced styling is available on paid plans** (for example Plus and higher), not on the free Basic plan.

||| **Legacy Banner.** For stores **without** the **New version** badge on **Settings > Banner**. On the New Banner, see [How to switch to the new banner or switch back to the previous version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

New Banner steps: [Custom styling with CSS](/en/article/custom-styling-with-css-52oqz4/).

### Where to add CSS (Legacy Banner)

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Go to **Settings > Banner**.
3. Confirm you do **not** see the **New version** badge (Legacy UI uses **Behavior**, **Style**, and **Content** tabs).
4. Open the **Style** tab.
5. Use **Layout**, **Colors**, and **Advanced styling** for fonts, **z-index**, and animations.
6. Add custom rules in the **custom CSS** area on the Style tab (included with **Advanced styling** on paid plans).
7. **Save** and test on the storefront in a private window.

### How the Legacy Banner appears in the DOM

Typical roots on the storefront:

* `#pandectes-banner`
* CookieConsent classes: `.cc-window`, `.cc-message`, `.cc-compliance`, `.cc-btn`

Theme CSS **can** affect the legacy banner because it is not inside a shadow root like the New Banner. Still, prefer the **Pandectes Style** custom CSS field so rules travel with your Pandectes settings.

### Prefer app settings before CSS

| Goal | Legacy location |
| --- | --- |
| Bar vs floating vs popup position | **Style > Layout > Position** |
| Width | **Style > Layout > Width** |
| Colors | **Style > Colors** |
| Logo | **Style > Banner logo** |
| Fonts | **Style > Advanced styling** |
| z-index | **Style > Advanced styling > z-index** |
| Button labels | **Content** tab |

### Example selectors (verify on your store)

Scope rules under the banner root when possible:

#### Banner window

```css
#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}
```

#### Message text

```css
#pandectes-banner .cc-message {
  font-size: 14px;
}
```

#### Accept / Decline buttons

```css
#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}
```

#### Preferences popup

Open the preferences panel on your store and inspect class names — they vary by banner type (**Preferences**, **Informative**, etc.). See [Cookie Banner Modes (Legacy Version)](/en/article/cookie-banner-modes-legacy-version-x8jjy1/).

### Inspecting the live banner

1. Open the storefront with the banner visible.
2. Right-click the banner and **Inspect**.
3. Confirm `#pandectes-banner` or `.cc-window` in the DOM.
4. Copy class names from the nodes you want to style — do not paste selectors from the New Banner guide (`dialog.notice`, `pandectes-cmp`).

### Upgrading to the New Banner

Legacy custom CSS **does not migrate automatically**. After upgrade, re-create rules under **Style > Custom styling** on the New Banner. See:

* [How to switch to the new banner or switch back to the previous version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-1r1oqc2/)
* [Custom styling with CSS (New Banner)](/en/article/custom-styling-with-css-52oqz4/)

### Related articles

* [Customizing the layout of the banner (Legacy Version)](/en/article/customizing-the-layout-of-the-banner-legacy-version-hrkyw9/)
* [Cookie Banner Modes (Legacy Version)](/en/article/cookie-banner-modes-legacy-version-x8jjy1/)