> ## 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 CSS personalizzato per Badges & Icons > ℹ️ **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 il controllo completo su come il tuo Trust Badges guarda sul tuo negozio? 🎨 Mentre la scheda Design fornisce ampie opzioni di personalizzazione, **CSS personalizzato** ti dà la flessibilità di effettuare regolazioni di stile avanzate che vanno oltre le impostazioni standard. Che tu stia rifinanziando la spaziatura, abbinando rigide linee guida del marchio, aggiungendo effetti visivi personalizzati, o risolvendo conflitti di stile specifici a tema, Custom CSS fornisce il pieno controllo creativo sul tuo design Trust Badge. --- # **⚠️ Prima di iniziare** Prima di utilizzare Custom CSS: * Assicurati di aver già creato un Trust Badge. * Avere una comprensione di base di CSS o l'accesso a uno sviluppatore. * Capire che Custom CSS può ignorare le impostazioni standard di progettazione. 💡 Se non hai ancora creato un Trust Badge, creane uno prima di procedere con questa guida. --- # **🛠️ Passo 1 — Aprire la scheda di progettazione** Aprire **Hoppy Trust Badges** app e navigare al Trust Badge che si desidera personalizzare. Allora: ➡️ Fare clic su **Design** scheda. Scorrere verso il basso fino a trovare il **CSS personalizzato** sezione. Questa sezione contiene tutti gli strumenti necessari per aggiungere e gestire lo styling personalizzato. --- # **🎨 Fase 2 — Aprire la sezione CSS personalizzata** All'interno **CSS personalizzato** sezione che troverai: * Editor CSS * A **Visualizza la guida** pulsante pulsante * Anonimo **Applicare** pulsante pulsante * Un modello di avvio CSS Il modello di avviamento contiene i selettori disponibili che possono essere personalizzati per il tuo Trust Badge. Questo rende più facile iniziare lo styling senza dover ispezionare manualmente gli elementi di vetrina. --- # **✍️ Passo 3 — Aggiungi il tuo CSS personalizzato** L'editor include diversi selettori preconfigurati che mirano a specifici elementi Trust Badge. ### **Selettori disponibili** #### **contenitore** Selezionatore Descrizione `.futureblink-trust-badge` Contenitore intero Trust Badge --- #### **Titolo** Selezionatore Descrizione `.futureblink-trust-badge .fb-title` Testo del titolo principale `.futureblink-trust-badge.mobile .fb-title` Stile del titolo mobile 💡 Per i distintivi galleggianti, il selettore del titolo utilizza `.title` invece di `.fb-title`. --- #### **Subheading** Selezionatore Descrizione `.futureblink-trust-badge .subheading` Descrizione testo `.futureblink-trust-badge.mobile .subheading` Descrizione mobile styling --- #### **Icone** Selezionatore Descrizione `.futureblink-trust-badge .icon` Icone cattive `.futureblink-trust-badge.mobile .icon` Mobile icona styling --- #### **Pulsante d'azione** Selezionatore Descrizione `.futureblink-trust-badge .cta-button` CTA pulsante `.futureblink-trust-badge.mobile .cta-button` Mobile CTA pulsante styling --- ### **Esempio CSS** Per aggiungere l'imbottitura al contenitore del badge e personalizzare il titolo: `.futureblink-trust-badge {` `padding: 20px;` `}` `.futureblink-trust-badge .fb-title {` `color: #2c3e50;` `font-size: 18px;` `}` 💡 È possibile aggiungere ulteriori selettori CSS, query multimediali, animazioni e regole di styling come necessario. --- # **📱 Passo 4 — Aggiungi mobile-Specific Styling** Per indirizzare specificamente i dispositivi mobili, utilizzare `.mobile` variazione dei selettori. Esempio: `.futureblink-trust-badge.mobile .fb-title {` `font-size: 14px;` `}` L'app si avvolge automaticamente `.mobile` selettori all'interno di una query multimediale mobile quando li rende sul tuo negozio. Se si preferisce scrivere le proprie domande multimediali, saranno conservati esattamente come inserito. --- # **✅ Passo 5 — Applicare il CSS** Una volta aggiunta la CSS: ➡️ Fare clic **Applicare**. L'anteprima live si aggiorna automaticamente, permettendo di rivedere immediatamente i cambiamenti di stile. Se si desidera rimuovere lo styling personalizzato in seguito: ➡️ Fare clic **Ripristino**. Questo rimuove il CSS personalizzato e ripristina le impostazioni standard di progettazione. --- # **👀 Passo 6 — Recensione dell'anteprima** Dopo aver applicato il CSS: ➡️ Rivedere l'anteprima Desktop. ➡️ Recensione dell'anteprima Mobile. Verificare che: * Il testo appare correttamente. * Le icone rimangono ben allineate. * Lo spazio sembra coerente. * I pulsanti mostrano come previsto. Se sono necessarie modifiche: ➡️ Aggiorna il CSS. ➡️ Fare clic **Applicare** Ancora. L'anteprima si rinfresca automaticamente dopo ogni cambiamento. --- # **💾 Passo 7 — Salvare e pubblicare** Una volta soddisfatti del design: ➡️ Fare clic **Salva**. ➡️ Fare clic **Pubblicazione**. ⚠️ Salvare da solo non aggiorna il negozio. Il Trust Badge deve essere pubblicato anche prima che i clienti possano vedere i cambiamenti. --- # **⚠️ Note importanti** ### **Impostazioni standard CSS personalizzate** Custom CSS ha la precedenza sulla maggior parte delle impostazioni della scheda Design. Se un'impostazione di colore, spaziatura o tipografia sembra essere ignorata, è probabile che sia sovraccaricata dal CSS. --- ### **Manipolazione automatica!importante** L'app aggiunge automaticamente `!important` priorità alle dichiarazioni CSS durante il rendering degli stili sul negozio. Non è necessario aggiungere `!important` manualmente. --- ### **Styling Scoped** Custom CSS è automaticamente indirizzato alla specifica Trust Badge che viene modificata. Questo aiuta a prevenire lo styling conflitti con: * Altri deficit di fiducia * Elementi a tema * Altri componenti --- ### **Selettori vuoti sono ammessi** Non è necessario utilizzare ogni selettore fornito nel modello. Aggiungi solo gli stili agli elementi che vuoi personalizzare. --- ### **Convalida CSS** L'editor non convalida la sintassi CSS. Se uno stile non si applica correttamente: ➡️ Controlla i nomi dei selettori. ➡️ Verificare bracci e semicoloni. ➡️ Rivedere il CSS per errori di sintassi. --- # **❓ Risoluzione dei problemi** Se i tuoi stili non appaiono correttamente: ➡️ Confermare che **Applicare** è stato cliccato. ➡️ Verificare che il Trust Badge sia stato **Salvataggio** e **Pubblicato**. ➡️ Controllare che i nomi dei selettori corrispondono esattamente al modello fornito. ➡️ Prova in una finestra del browser Incognito o Privato. ➡️ Aggiorna il negozio per cancellare stili cache. --- # **🎉 Risultato finale** ✅ Il tuo Trust Badge può essere personalizzato oltre le impostazioni standard di progettazione. ✅ Branding, spaziatura, tipografia e stile icona possono essere controllati più precisamente. ✅ I layout desktop e mobili possono essere modellati in modo indipendente. ✅ Gli stili personalizzati rimangono isolati al Trust Badge selezionato. Custom CSS offre un modo flessibile per creare un'esperienza Trust Badge più lucida e coerente, mantenendo la semplicità degli strumenti di design incorporati dell'app. ✨