Perché non riesci a modificare lo stile del banner
Il banner cookie viene generato dinamicamente tramite uno script JavaScript.
Di conseguenza:
- il codice del banner si carica dopo la pagina;
- le regole CSS inserite nel foglio di stile classico non hanno effetto, perché vengono sovrascritte.
Esempio, scrivere:
#cm_inner { font-family: Arial !important; } non produce risultati, dato che il banner viene ricreato dopo il caricamento.
Come applicare stili personalizzati con JavaScript
Per sovrascrivere gli stili, inserisci questo codice JavaScript subito dopo lo script del banner:
window.addEventListener('load', function () {
var style = document.createElement('style');
style.innerHTML = `
#cm_inner { font-family: Arial !important; }
`;
document.head.appendChild(style);
});
Questo codice:
- attende il caricamento completo della pagina;
- crea un nuovo blocco
- inserisce le tue regole CSS;
- le applica al banner.
- inserisce le regole CSS personalizzate;
le applica correttamente al banner.
Quali elementi puoi modificare
Con il metodo JavaScript puoi personalizzare diversi aspetti grafici, ad esempio:
Colore dei testi
color: #333 !important;
Colore di sfondo del banner
background-color: #f5f5f5 !important;
Colori dei bottoni
#cm_btns button { background-color: #007BFF !important; color: white !important; }
Padding (spazio interno)
#cm_inner { padding: 20px !important; }
Dove inserire il codice nel sito
Aggiungi lo script di personalizzazione subito dopo quello del banner cookie, così da assicurare che le regole vengano applicate correttamente.
Come intervenire se usi WordPress
Se utilizzi WordPress, puoi aggiungere il codice tramite il tema:
- Vai su Aspetto → Personalizza.
- Trova la sezione Impostazioni aggiuntive, Custom Code, Header and Footer Scripts o simile (dipende dal tema).
- Incolla il codice nello spazio riservato agli script del footer.
- Salva le modifiche e ricarica il sito.