Come personalizzare il banner CMP di UniConsent con il CSS

Se vuoi personalizzare l'aspetto del banner dei cookie della CMP di UniConsent, puoi applicare CSS personalizzato. In questo modo puoi definire lo stile di elementi come pulsanti, sfondi dei popup, font e layout per adattarli meglio al design del tuo sito web.

Cosa sono i selettori CSS?

I selettori CSS sono pattern usati per individuare e applicare stili a specifici elementi HTML di una pagina web. Consentono agli sviluppatori di applicare stili, automatizzare i test o interagire con gli elementi del DOM. I selettori vanno da tipi di base come div e h1 a forme più complesse come ID (#id-selector), classi (.class-selector) o selettori di attributo ([data-attribute="value"]).

Come trovare i selettori CSS

1. Usa gli strumenti per sviluppatori del browser (DevTools)

I browser moderni come Chrome, Edge e Firefox offrono gli strumenti per sviluppatori, che consentono di ispezionare e copiare facilmente i selettori CSS.

• Passaggio 1: fai clic con il pulsante destro del mouse sull'elemento che vuoi personalizzare e seleziona Ispeziona.

  Ispeziona in DevTools

• Passaggio 2: il pannello Elementi evidenzierà il codice HTML selezionato.

  Pannello Elementi

In Google Chrome e Microsoft Edge:

• Fai clic con il pulsante destro del mouse sull'HTML evidenziato e scegli Copia > Copia selettore.

  Chrome ed Edge

In Mozilla Firefox:

• Seleziona l'elemento, fai clic con il pulsante destro del mouse e scegli Copia > Selettore CSS.

  Firefox

Suggerimento: apri rapidamente DevTools con Ctrl + Shift + I (Windows/Linux) o Cmd + Shift + I (Mac).

2. Scrivi manualmente selettori CSS personalizzati

A volte dovrai scrivere i selettori manualmente per ottenere un controllo più preciso:

• Individuare elementi per classe: .unic .powerby
• Individuare elementi univoci per ID: .unic #uniconsent-modal
• Combinare più selettori: .unic .popup > button.accept
• Usare selettori di attributo: .unic [data-testid="submit-btn"]

Best practice per l'uso dei selettori CSS

• Evita selettori generici (ad es. div > span) per prevenire conflitti di stile indesiderati.
• Assicurati che i selettori siano abbastanza specifici da individuare con precisione l'elemento corretto.
• Usa selettori di attributo quando hai a che fare con contenuti generati dinamicamente.
• Testa i tuoi stili su più browser per garantire un comportamento coerente.