> ## 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). # Come personalizzare stile, colori, loghi e pulsanti del banner (nuova versione) ### Panoramica Il layout (posizione e tipo di dialogo) è trattato a parte. Se arrivi dal banner Legacy, vedi [Migration Guide: Recreating your Legacy Look in New Version](/it/article/guida-alla-migrazione-ricreare-il-tuo-aspetto-legacy-nella-nuova-versione-1ug8150/). La scheda **Style** controlla l'aspetto del banner, del dialogo delle preferences e del consent widget. Puoi caricare loghi, scegliere gli stili dei pulsanti, impostare i colori (anche chiaro e scuro), regolare superfici e font e aggiungere CSS personalizzato. Style non cambia quando i cookie sono consentiti. Le regole di consenso restano in **All settings > Consent model & regions**. ||| **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: [Migration Guide: Recreating your Legacy Look in New Version](/it/article/guida-alla-migrazione-ricreare-il-tuo-aspetto-legacy-nella-nuova-versione-1ug8150/). ### Prima di iniziare * Verifica che la pagina Banner mostri il badge **New version**. * Usa **Enable for admins** se vuoi provare sul negozio live senza mostrare il banner ai visitatori. Vedi [How to enable, disable, or test the banner in admin-only mode (New Version)](/it/article/come-attivare-disattivare-o-provare-il-banner-in-modalita-solo-admin-nuova-versione-pxsjgl/). * Usa l'anteprima nell'app (Desktop / Mobile, Light / Dark) mentre modifichi. ### Apri la scheda Style 1. Apri **Shopify Admin > Apps > Pandectes GDPR Compliance**. 2. Vai su **Cookie banner**. 3. Apri la scheda **Style**. 4. Clicca su **Save** quando compare la barra delle modifiche non salvate. ![Controlli per il caricamento dei loghi del banner e del widget nella scheda Style](https://images.pandect.es/knowledge-base/how-to-customize-banner-style-colors-logos-and-buttons-new-version-2.png =900xauto) ### Loghi Puoi impostare un logo per il banner principale e un logo separato per il consent widget. * **Banner logo**: compare nel cookie notice e nell'header delle preferences (a meno che **Hide header** sia attivo in Layout). * **Widget logo**: compare sul consent widget. Carica un PNG o un JPG, oppure scegli un logo dalla galleria. Dopo il salvataggio, gli aggiornamenti sullo storefront possono richiedere un po' di tempo per comparire. ### Pulsanti Le impostazioni dei pulsanti si applicano alle azioni primarie (Accept / Deny all) e a quelle secondarie (Preferences / Save). Opzioni tipiche: * Varianti piene o con contorno (ghost) * Dimensione e raggio degli angoli * Bordo * Etichette dei pulsanti in grassetto (sezione font) Usa un pulsante **Accept** pieno e un pulsante **Decline** con contorno se vuoi dare risalto ad Accept. I requisiti di Google per il banner richiedono comunque un Decline chiaro e l'accesso alle preferences. Vedi [How to create a banner that meets Google’s banner requirements (New Version)](/it/article/come-creare-un-banner-conforme-ai-requisiti-di-google-nuova-versione-1d1yye4/). ### Colori Scegli una modalità colore (ad esempio chiaro o scuro), un preset oppure i tuoi colori. * I colori **Base, primary, secondary e accent** determinano sfondi, testo e pulsanti. * **Auto calculate** / la regolazione automatica può ricavare una palette dal tuo tema Shopify, così non devi inserire a mano ogni valore esadecimale. * Controlla gli sfondi **Light** e **Dark** nell'anteprima live, in modo che il banner resti leggibile per i visitatori che usano la modalità scura. ### Superfici, font e animazioni * **Surfaces**: padding, raggio degli angoli, float (finestra sospesa), bordo, ombra e **z-index** (come il banner si sovrappone agli altri elementi del tema). * **Fonts**: famiglia e dimensione. Lascia vuoto per seguire il font del negozio. * **Animations**: attiva o disattiva il movimento e imposta la durata. Il tipo di animazione (fade, slide, zoom, grow) si sceglie comunque in Layout. Se il banner finisce dietro un header fisso o un widget di chat, aumenta lo **z-index**. Il valore massimo è `2147483647`. 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/). ### Stile personalizzato (CSS) Per le modifiche che i controlli di Style non permettono, usa **Custom styling** / **CSS Rules** nella stessa scheda. Le regole si applicano all'interno del web component `pandectes-cmp`. Vedi [Custom styling with CSS](/it/article/stile-personalizzato-con-css-bk8138/). || Il CSS personalizzato del banner Legacy **non** viene copiato quando passi al nuovo banner. Aggiungi di nuovo le regole in **Style > Custom styling**. ### Mobile e desktop Molti campi di Style possono essere diversi su mobile. Usa **Mobile same as desktop** oppure **Mobile different from desktop**. Vedi [How to use different banner layouts on mobile and desktop (New Version)](/it/article/come-usare-layout-del-banner-diversi-su-mobile-e-desktop-nuova-versione-a7i45h/). ### Articoli correlati * [Customizing the layout of the banner (New Version)](/it/article/personalizzare-il-layout-del-banner-nuova-versione-xls0ao/) * [How to edit banner texts and links (New Version)](/it/article/come-modificare-i-testi-e-i-link-del-banner-nuova-versione-15or0hr/) * [How to enable and customize the Consent widget (New Version)](/it/article/come-attivare-e-personalizzare-il-consent-widget-nuova-versione-1kp2z5j/) * [Custom styling with CSS](/it/article/stile-personalizzato-con-css-bk8138/)