> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/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 impostare il CSS personalizzato per la barra di annuncio > ℹ️ **Note:** Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto. Vuoi un controllo completo sull'aspetto della tua barra di annuncio? 🎨 Anche se le impostazioni di design integrate soddisfano la maggior parte delle esigenze di personalizzazione, la funzione **Custom CSS** (CSS personalizzato) ti consente di perfezionare lo stile oltre le opzioni standard. È utile per i merchant che desiderano rispettare esattamente le linee guida del proprio brand, regolare la spaziatura, personalizzare la tipografia o risolvere conflitti di stile specifici del tema. --- # **⚠️ Prima di iniziare** Prima di utilizzare **Custom CSS** (CSS personalizzato): * Assicurati che la barra di annuncio sia già stata creata. * Assicurati di avere una conoscenza di base del CSS o l'accesso a uno sviluppatore. * Tieni presente che **Custom CSS** (CSS personalizzato) può sovrascrivere le impostazioni di design standard. ℹ️ La maggior parte dei merchant non ha mai bisogno di **Custom CSS** (CSS personalizzato). Utilizzalo solo quando le opzioni di design integrate non possono ottenere l'aspetto desiderato. --- # **🛠️ Passaggio 1 — Apri la scheda Design** Apri l'app **Hoppy Announcement Bar** e vai alla barra di annuncio che desideri personalizzare. Quindi: ➡️ Fai clic sulla scheda **Design**. Scorri verso il basso fino a individuare la sezione **Custom CSS** (CSS personalizzato). --- # **🎨 Passaggio 2 — Abilita il CSS personalizzato** All'interno della sezione **Custom CSS** (CSS personalizzato): ➡️ Fai clic su **Apply** (Applica). Una volta abilitato, apparirà un editor CSS contenente uno scheletro CSS preconfigurato. Questo scheletro include tutti i selettori supportati, facilitando il targeting di diversi elementi della barra di annuncio senza dover identificare manualmente i nomi delle classi. --- # **✍️ Passaggio 3 — Aggiungi il tuo CSS personalizzato** L'editor fornisce selettori pronti per i principali elementi della barra di annuncio. ### **Selettori disponibili** | Selettore | Descrizione | | ----- | ----- | | `.futureblink-announcement-bar` | Contenitore intero della barra di annuncio | | `.futureblink-announcement-bar .title` | Testo del titolo principale | | `.futureblink-announcement-bar .subheading` | Testo del sottotitolo | | `.futureblink-announcement-bar .cta-button` | Pulsante call-to-action | | `.futureblink-announcement-bar .close-btn` | Icona di chiusura | | `.futureblink-announcement-bar .arrow` | Frecce di navigazione | | `.futureblink-announcement-bar .button-prev` | Pulsante slide precedente | | `.futureblink-announcement-bar .button-next` | Pulsante slide successiva | ### **Selettori specifici per dispositivi mobili** Per targetizzare specificamente i dispositivi mobili, utilizza la variante `.mobile`. Esempi: * `.futureblink-announcement-bar.mobile .title` * `.futureblink-announcement-bar.mobile .cta-button` * `.futureblink-announcement-bar.mobile .close-btn` --- ### **Esempio CSS** Per rendere il titolo in maiuscolo con spaziatura aggiuntiva: `.futureblink-announcement-bar .title {` `text-transform: uppercase;` `letter-spacing: 2px;` `}` Per rendere il pulsante CTA a larghezza piena su dispositivi mobili: `.futureblink-announcement-bar.mobile .cta-button {` `width: 100%;` `}` 💡 Puoi utilizzare qualsiasi proprietà CSS valida all'interno dei selettori forniti. --- # **👀 Passaggio 4 — Anteprima delle modifiche** Dopo aver inserito il tuo CSS: ➡️ Fai clic su **Apply** (Applica). L'anteprima live si aggiorna automaticamente, così puoi rivedere immediatamente le tue modifiche. Se sono necessari aggiustamenti: ➡️ Modifica il CSS direttamente nell'editor. ➡️ Rivedi l'anteprima aggiornata. --- # **⚙️ Come funziona Custom CSS** L'app applica automaticamente un'elaborazione aggiuntiva per garantire che il tuo stile funzioni correttamente. ### **Iniezione automatica di \!important** Tutte le dichiarazioni CSS ricevono automaticamente la priorità `!important` sullo storefront per impedire che gli stili del tema sovrascrivano le tue modifiche. ### **Gestione automatica dei dispositivi mobili** I selettori che utilizzano la variante `.mobile` vengono automaticamente racchiusi all'interno di media query per dispositivi mobili quando vengono renderizzati sul tuo storefront. ### **Priorità di sovrascrittura del design** **Custom CSS** (CSS personalizzato) generalmente ha la precedenza sulle impostazioni di design standard configurate altrove nell'app. --- # **💾 Passaggio 5 — Salva e pubblica** Una volta soddisfatto dello stile: ➡️ Fai clic su **Save** (Salva). ➡️ Fai clic su **Publish** (Pubblica). ⚠️ Il solo salvataggio non aggiorna il tuo storefront. È necessario pubblicare anche la configurazione prima che i clienti possano vedere le modifiche. --- # **🔄 Reimposta Custom CSS** Se desideri tornare alle impostazioni di design predefinite: ➡️ Apri la sezione **Custom CSS** (CSS personalizzato). ➡️ Fai clic su **Reset** (Reimposta). Questo rimuove il tuo CSS personalizzato e ripristina il controllo alle impostazioni di design standard. --- # **💡 Suggerimenti utili** ### **Inizia con piccoli passi** Apporta una modifica alla volta, così è più facile identificare cosa influisce ciascuna regola CSS. ### **Utilizza l'anteprima live** Rivedi sempre le modifiche nell'anteprima prima di pubblicare. ### **Testa i layout mobili** Anche se il tuo CSS sembra corretto su desktop, verifica l'aspetto anche sui dispositivi mobili. ### **Conserva un backup** Per personalizzazioni CSS più estese, considera di conservare una copia del tuo codice al di fuori dell'app. --- # **❓ Risoluzione dei problemi** Se il tuo CSS non viene applicato come previsto: ➡️ Verifica che **Apply** (Applica) sia stato abilitato. ➡️ Conferma che la barra di annuncio sia stata **Saved** (Salvata) e **Published** (Pubblicata). ➡️ Verifica attentamente che i nomi dei selettori corrispondano esattamente ai nomi delle classi forniti. ➡️ Esegui il test in una finestra di navigazione in incognito per eliminare i problemi di cache del browser. Per requisiti di stile avanzati, considera di collaborare con uno sviluppatore Shopify o il team di supporto del tuo tema. --- # **🎉 Risultato finale** ✅ La tua barra di annuncio utilizza uno stile completamente personalizzato. ✅ I conflitti con il tema sono ridotti al minimo grazie alla gestione automatica della priorità CSS. ✅ I layout per dispositivi mobili e desktop possono essere stilizzati in modo indipendente. ✅ La barra di annuncio può essere adattata per corrispondere più precisamente all'identità visiva del tuo brand. **Custom CSS** (CSS personalizzato) offre la massima flessibilità quando le impostazioni di design standard non sono sufficienti, aiutando a creare un'esperienza di storefront più curata e coerente. 🚀