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

### Panoramica

Gran parte della personalizzazione del brand è più semplice da fare nell'app che con il CSS. Nella scheda **Style** puoi impostare loghi, varianti dei pulsanti, colori, font, superfici (padding, raggio, ombra, **z-index**) e animazioni senza scrivere codice. Vedi [How to customize banner style, colors, logos, and buttons (New Version)](/it/article/come-personalizzare-stile-colori-loghi-e-pulsanti-del-banner-nuova-versione-11j5cp2/).

Usa **Custom styling** solo quando i controlli di Style non bastano per ottenere ciò che ti serve (ad esempio una disposizione specifica dei pulsanti, un trattamento dei bordi o la posizione del widget).

||| **Nuovo banner.** Per i negozi che mostrano il badge **New version** in **Cookie banner**. Se usi il banner Legacy, 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 Legacy: [Custom styling with CSS (Legacy Banner)](/it/article/stile-personalizzato-con-css-banner-legacy-rr52tq/).

||| **Custom styling è disponibile nei piani a pagamento** (ad esempio Plus e superiori). Non è incluso nel piano Basic gratuito. Se l'editor CSS è bloccato, passa a un piano superiore dal selettore dei piani nell'app.

### Dove aprire Custom styling

1. Apri **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Vai su **Cookie banner**.
3. Verifica che il badge **New version** sia visibile nella pagina Banner.
4. Apri la scheda **Style**.
5. Scorri fino a **Custom styling** (accanto al titolo della sezione potresti vedere **Learn more**, che rimanda a questo articolo).
6. In **CSS Rules**, scegli **Desktop** e/o **Mobile** se ti servono regole diverse per ogni viewport.
7. Incolla il tuo CSS, poi clicca su **Save** quando compare la barra delle modifiche non salvate.

Prova sullo storefront in una finestra privata. Se usi **Enable for admins**, durante i test solo lo staff con l'accesso effettuato vedrà il banner.

|| Aggiungi il CSS del banner in **Custom styling** nell'app Pandectes. Il CSS nel tema Shopify di solito **non** modifica il nuovo banner. Usa invece l'editor di questa pagina.

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

| Obiettivo | Usa prima la scheda Style |
| --- | --- |
| Colori e modalità chiara/scura | **Colors** |
| Aspetto dei pulsanti (pieno / con contorno, raggio) | **Buttons** |
| Larghezza, posizione e tipo di dialogo del banner | Scheda **Layout** |
| Famiglia e dimensione del font | **Fonts** |
| Ombra, padding, bordo, sovrapposizione al tema | **Surfaces** (incluso **z-index**) |
| Movimento in apertura/chiusura | **Animations** |
| Posizione di widget e notice | **Layout** (notice / preferences / consent widget) |

Se il banner finisce dietro un header fisso o un'app di chat, aumenta **Surfaces > z-index** prima di aggiungere CSS. Vedi [How to fix the banner hiding behind theme elements (New Version)](/it/article/come-risolvere-il-banner-nascosto-dietro-gli-elementi-del-tema-nuova-versione-b6j65m/).

### CSS di esempio

Incolla le regole in **CSS Rules**, poi clicca su **Save**. Adatta colori e dimensioni al tuo brand.

**Bordo di accento sul cookie notice:**

```css
dialog.dialog.notice {
  border-left: 4px solid #00ffbf;
}
```

**Colori dei pulsanti Accept e Decline:**

```css
button.filled.allow.primary {
  background: #111111;
}

button.filled.deny.primary {
  background: #666666;
}
```

**Sposta leggermente più in alto il consent widget nella pagina:**

```css
button.widget.bottom.left {
  bottom: 24px;
}
```

Per regolazioni avanzate dei colori, l'editor supporta anche le **variabili CSS** (ad esempio `--ai-bg`, `--ai-text`) nei dialoghi notice e preferences. Il tuo team di supporto o il tuo sviluppatore possono aiutarti se usi già le variabili nell'app.

### Suggerimenti

* Inizia con una piccola modifica, salva e controlla lo storefront.
* Usa le **CSS Rules** per **Desktop** e **Mobile** quando ti serve uno stile diverso sugli schermi piccoli.
* Se una modifica non compare, aspetta un minuto e aggiorna la pagina.

|| Il CSS personalizzato del **banner Legacy** **non** viene copiato quando fai l'upgrade. Dopo la migrazione, aggiungi di nuovo le regole qui. 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/).

### Articoli correlati

* [How to customize banner style, colors, logos, and buttons (New Version)](/it/article/come-personalizzare-stile-colori-loghi-e-pulsanti-del-banner-nuova-versione-11j5cp2/)
* [Custom styling with CSS (Legacy Banner)](/it/article/stile-personalizzato-con-css-banner-legacy-rr52tq/)
* [How to fix the banner hiding behind theme elements (New Version)](/it/article/come-risolvere-il-banner-nascosto-dietro-gli-elementi-del-tema-nuova-versione-b6j65m/)