> ## 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).

# Stile personalizzato con CSS (banner Legacy)

### Panoramica

Nel banner Legacy, la maggior parte delle opzioni di aspetto si trova in **Cookie banner > Style**: layout (posizione, larghezza, tema), colori, logo, font, **z-index** e animazioni. Usa il **CSS personalizzato** solo quando quei campi non bastano.

||| **Il CSS personalizzato / lo stile avanzato è disponibile nei piani a pagamento** (ad esempio Plus e superiori), non nel piano Basic gratuito.

||| **Banner Legacy.** Per i negozi **senza** il badge **New version** in **Cookie banner**. Se usi il nuovo banner, vedi [How to switch to the new banner or switch back to the previous version](/it/article/come-passare-al-nuovo-banner-o-tornare-alla-versione-precedente-1jz12qe/).

Procedura per il nuovo banner: [Custom styling with CSS](/it/article/stile-personalizzato-con-css-bk8138/).

### Dove aggiungere il CSS (banner Legacy)

1. Apri **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Vai su **Cookie banner**.
3. Verifica di **non** vedere il badge **New version** (l'interfaccia Legacy usa le schede **Behavior**, **Style** e **Content**).
4. Apri la scheda **Style**.
5. Usa **Layout**, **Colors** e **Advanced styling** per font, **z-index** e animazioni.
6. Aggiungi le regole personalizzate nell'area del **custom CSS** nella scheda Style (inclusa in **Advanced styling** nei piani a pagamento).
7. Clicca su **Save** e prova sullo storefront in una finestra privata.

### Come appare il banner Legacy nel DOM

Radici tipiche sullo storefront:

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

Il CSS del tema **può** influire sul banner Legacy perché non si trova dentro uno shadow root come il nuovo banner. Preferisci comunque il campo CSS personalizzato di **Pandectes Style**, così le regole viaggiano insieme alle tue impostazioni Pandectes.

### Usa prima le impostazioni dell'app, poi il CSS

| Obiettivo | Posizione in Legacy |
| --- | --- |
| Posizione barra, flottante o popup | **Style > Layout > Position** |
| Larghezza | **Style > Layout > Width** |
| Colori | **Style > Colors** |
| Logo | **Style > Banner logo** |
| Font | **Style > Advanced styling** |
| z-index | **Style > Advanced styling > z-index** |
| Etichette dei pulsanti | Scheda **Content** |

### Selettori di esempio (verifica sul tuo negozio)

Quando possibile, limita le regole alla radice del banner:

#### Finestra del banner

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

#### Testo del messaggio

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

#### Pulsanti Accept / Decline

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

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

#### Popup delle preferences

Apri il pannello delle preferences nel tuo negozio e ispeziona i nomi delle classi. Variano in base al tipo di banner (**Preferences**, **Informative**, ecc.). Vedi [Cookie Banner Modes (Legacy Version)](/it/article/modalita-del-banner-dei-cookie-versione-legacy-lz06xo/).

### Ispezionare il banner live

1. Apri lo storefront con il banner visibile.
2. Clicca con il tasto destro sul banner e scegli **Inspect**.
3. Verifica la presenza di `#pandectes-banner` o `.cc-window` nel DOM.
4. Copia i nomi delle classi dai nodi che vuoi stilizzare. Non incollare i selettori della guida del nuovo banner (`dialog.notice`, `pandectes-cmp`).

### Passare al nuovo banner

Il CSS personalizzato di Legacy **non viene migrato automaticamente**. Dopo l'upgrade, ricrea le regole in **Style > Custom styling** nel nuovo banner. Vedi:

* [How to switch to the new banner or switch back to the previous version](/it/article/guida-alla-migrazione-ricreare-il-tuo-aspetto-legacy-nella-nuova-versione-1ug8150/)
* [Custom styling with CSS (New Banner)](/it/article/stile-personalizzato-con-css-bk8138/)

### Articoli correlati

* [Customizing the layout of the banner (Legacy Version)](/it/article/personalizzare-il-layout-del-banner-versione-legacy-14aftk9/)
* [Cookie Banner Modes (Legacy Version)](/it/article/modalita-del-banner-dei-cookie-versione-legacy-lz06xo/)