Vorresti che il tuo banner cookie corrispondesse al tuo tema più da vicino di quanto la vista Stile possa gestire da sola? Tutto ciò di cui hai bisogno è un posto dove inserire alcune righe di CSS.

Questa guida illustra le proprietà CSS personalizzate che WPConsent espone per la sua interfaccia di consenso e ti mostra cosa cambia ciascuna di esse.

Fai clic qui per accettare i cookie di Marketing e caricare questo contenuto

Indice

• Come espone WPConsent gli stili del suo banner?
• Trovare i valori che i tuoi override CSS modificano
• Ristilizzare il banner di consenso
• Ristilizzare il pannello delle preferenze
• Ristilizzare il pulsante delle impostazioni fluttuante
• Corrispondere ai segnaposto dei contenuti bloccati
• Cercare ogni proprietà disponibile
• Domande frequenti

Prima di iniziare, assicurati che WPConsent sia installato e attivato sul tuo sito WordPress.

Come espone WPConsent gli stili del suo banner?

WPConsent disegna la sua interfaccia di consenso all'interno di un contenitore autonomo chiamato shadow root. Quel contenitore ha il suo foglio di stile privato, che impedisce al tuo tema di ristilizzare accidentalmente il banner e impedisce al banner di ristilizzare il tuo tema. Ciò significa anche che una regola del tema ordinaria come .wpconsent-banner { background: black } non raggiunge affatto il banner.

Il modo supportato è un set di proprietà CSS personalizzate. WPConsent legge i suoi colori, spaziature, angoli e dimensioni dei caratteri da queste proprietà, quindi impostarne una dal tuo foglio di stile cambia il banner senza toccare il plugin. Ogni proprietà è denominata con un prefisso --wpconsent-.

Tutte si risolvono rispetto a un singolo elemento, il contenitore con l'ID wpconsent-container, ed è questo il selettore da prendere di mira:

#wpconsent-container { --wpconsent-background: #101820; }

Prendere di mira quel contenitore è importante, perché è l'unico posto dove una regola semplice vince senza bisogno di !important. Le regole scritte contro :root o html sembrano la scelta ovvia e silenziosamente non fanno nulla al banner, poiché WPConsent imposta i propri valori più in basso nella pagina rispetto a quello.

Dove inserire la regola dipende da te. Il foglio di stile del tuo child theme, Aspetto » Personalizza » CSS aggiuntivo, o un plugin per snippet CSS funzionano tutti. La nostra guida su come personalizzare il banner con CSS illustra le opzioni.

Prima di scrivere una regola, vale la pena sapere quali delle proprietà portano già un valore che hai scelto tu stesso.

Trovare i valori che i tuoi override CSS modificano

Per iniziare, mapperemo i campi colore del designer del banner ai loro nomi di proprietà. La maggior parte delle proprietà di colore e tipo sono le impostazioni che hai già salvato lì, pubblicate come CSS, quindi una regola che ne cambia una è in realtà una regola che sovrascrive un campo che puoi vedere.

Dalla barra laterale di amministrazione di WordPress, vai su WPConsent » Banner Design, quindi apri la scheda Style.

La sezione Button Color verso il fondo di questo pannello contiene i valori dietro le proprietà dei pulsanti.

Ogni campo corrisponde a una proprietà:

• --wpconsent-accept-bg e --wpconsent-accept-color provengono da Accept Background e dal suo Font Color.
• --wpconsent-cancel-bg e --wpconsent-cancel-color provengono da Cancel Background e dal suo Font Color.
• --wpconsent-preferences-bg e --wpconsent-preferences-color provengono da Customize Background e dal suo Font Color, che è il pulsante delle preferenze.
• --wpconsent-background, --wpconsent-text e --wpconsent-font-size provengono dalla sezione Banner più in alto nello stesso pannello.

La nostra guida allo styling del banner copre questo pannello per intero. Con la mappatura a portata di mano, puoi iniziare a sovrascriverla.

Ristilizzare il banner di consenso

Il banner è la superficie che la maggior parte delle persone vuole cambiare per prima, e risponde a due gruppi di proprietà: uno per il colore, uno per la forma e il tipo. Ecco il banner come lo disegna WPConsent prima di qualsiasi CSS personalizzato, in modo da avere qualcosa a cui confrontarlo.

Modifica dei colori

La palette del banner proviene dallo sfondo e dal testo del pannello, più un colore di sfondo e uno di testo per ogni pulsante. Impostarli insieme è ciò che mantiene un banner ridisegnato deliberato piuttosto che mezzo convertito.

#wpconsent-container { --wpconsent-background: #101820; --wpconsent-text: #f3f4f6; --wpconsent-accept-bg: #f8b500; --wpconsent-accept-color: #101820; --wpconsent-cancel-bg: #2b3a46; --wpconsent-cancel-color: #f3f4f6; --wpconsent-preferences-bg: #2b3a46; --wpconsent-preferences-color: #f3f4f6; }

Quella regola trasforma lo stesso banner in un pannello scuro con un'unica azione evidenziata.

Entrambi i gruppi di proprietà possono andare nella stessa regola, e il secondo gruppo è dove le impostazioni si esauriscono.

Modifica della forma e del tipo

Il secondo gruppo governa la geometria: arrotondamento degli angoli, ombra, spaziatura interna, larghezza del pannello e tipo. Nessuno di questi ha un campo equivalente nella vista Stile, quindi il CSS è l'unico modo per raggiungerli.

#wpconsent-container { --wpconsent-border-radius: 0; --wpconsent-shadow: none; --wpconsent-padding: 24px 32px; --wpconsent-min-width: 640px; --wpconsent-font-size: 17px; --wpconsent-line-height: 1.7; }

Il risultato è un pannello squadrato, piatto e più spazioso.

--wpconsent-min-width imposta la larghezza minima consentita per il pannello, e il pannello cresce comunque per adattarsi a testi di avviso più lunghi e si limita alla larghezza dello schermo. Il pannello del banner è solo la metà di ciò che queste proprietà raggiungono.

Ristilizzare il pannello delle preferenze

Il pannello delle preferenze viene disegnato all'interno dello stesso contenitore del banner, quindi eredita ogni proprietà impostata lì. La regola del colore della sezione precedente non necessita di alcuna aggiunta: lo sfondo del pannello, le etichette delle categorie e i pulsanti del pannello stesso seguono tutti.

I pulsanti del pannello riutilizzano le tre coppie di proprietà dei pulsanti anziché avere le proprie:

• --wpconsent-accept-bg e --wpconsent-accept-color stilizzano il pulsante Accetta tutto del pannello.
• --wpconsent-cancel-bg e --wpconsent-cancel-color stilizzano il suo pulsante Chiudi.
• --wpconsent-preferences-bg e --wpconsent-preferences-color stilizzano il suo pulsante Salva e chiudi.

Ecco perché il pannello sopra corrisponde al banner senza una seconda regola.

Una proprietà appartiene specificamente a questo pannello:

• --wpconsent-outline-color disegna le linee orizzontali che separano le righe delle categorie.

WPConsent la imposta dal colore del testo salvato con opacità ridotta, quindi su un pannello scuro queste linee potrebbero risultare più deboli di quanto desiderato. Impostarla esplicitamente restituisce la separazione:

#wpconsent-container { --wpconsent-outline-color: rgba(248, 181, 0, 0.35); }

La nostra guida sul pannello delle preferenze copre cosa fa ogni riga.

Due superfici si trovano al di fuori di questa cascata, e ognuna richiede una breve regola propria.

Ristilizzare il pulsante delle impostazioni fluttuante

Il pulsante flottante delle impostazioni è il piccolo controllo rotondo che consente ai visitatori di riaprire le loro scelte dopo che il banner è scomparso. Trasporta i suoi colori direttamente anziché tramite le proprietà personalizzate, quindi la regola del colore sopra lo lascia invariato. Inoltre, non ha impostazioni di posizione da nessuna parte nell'amministrazione.

WPConsent lo espone al tuo foglio di stile con il nome wpconsent-settings-button, a cui accedi con il selettore ::part(). Questa regola lo sposta in basso a destra, lo arrotonda in un cerchio, gli conferisce un'ombra più profonda e lo ricolora:

#wpconsent-container::part(wpconsent-settings-button) {   left: auto;   right: 28px;   bottom: 28px;   padding: 16px;   border-radius: 999px;   box-shadow: 0 4px 14px rgba(16, 24, 32, 0.35);   background-color: #f8b500 !important; }

Nota il !important sul colore di sfondo e solo sul colore di sfondo. WPConsent scrive questo valore direttamente sul pulsante in modo che possa seguire i colori salvati del tuo banner, e !important è ciò che consente alla tua regola di avere la precedenza. Posizione, padding, angoli e ombra hanno tutti effetto senza di esso.

L'icona del pulsante viene scelta nell'amministrazione anziché nel CSS, e la nostra guida sul pulsante flottante del consenso copre come sceglierla. L'ultima superficie è quella che i tuoi visitatori incontrano sulle tue pagine anziché in un angolo.

Corrispondere ai segnaposto dei contenuti bloccati

Quando il blocco dei contenuti è attivato, un embed a cui un visitatore non ha acconsentito viene sostituito con un segnaposto che contiene il proprio pulsante di accettazione. Quel pulsante riutilizza due proprietà che hai già incontrato:

• --wpconsent-accept-bg è lo sfondo del pulsante segnaposto.
• --wpconsent-accept-color è il suo testo.

Il segnaposto si trova sulla pagina anziché all'interno del contenitore del consenso, quindi necessita di entrambe le proprietà impostate dove possa vederle.

Limitare la regola al segnaposto stesso è il modo più ordinato per farlo:

.wpconsent-iframe-placeholder {   --wpconsent-accept-bg: #f8b500;   --wpconsent-accept-color: #101820; }

Il pulsante segnaposto corrisponde quindi al pulsante di accettazione sul tuo banner.

Ripetere i due valori in una seconda regola è intenzionale: il segnaposto e il banner sono parti separate della pagina e mantenerli in regole separate ti consente di dare al segnaposto un trattamento diverso, se lo desideri. La nostra guida su blocco dei contenuti e segnaposto illustra come attivare la funzionalità e scegliere il testo del segnaposto.

Questo copre tutte e quattro le superfici, lasciando le proprietà stesse.

Cercare ogni proprietà disponibile

Ecco tutte le proprietà personalizzate che l'interfaccia di consenso di WPConsent legge, raggruppate per ciò che controllano. Tutte vanno su #wpconsent-container.

Proprietà Colore

Queste prendono i loro valori iniziali dalla scheda Stile, quindi una regola qui sovrascrive ciò che hai salvato lì.

• --wpconsent-background è lo sfondo del pannello, sia del banner che del pannello delle preferenze.
• --wpconsent-text è il colore del testo del corpo, e anche il colore dell'icona del selettore della lingua quando hai più di una lingua abilitata.
• --wpconsent-outline-color è la linea orizzontale tra le righe delle categorie nel pannello delle preferenze, che WPConsent imposta dal colore del tuo testo a opacità ridotta.
• --wpconsent-accept-bg e --wpconsent-accept-color sono lo sfondo e il testo del pulsante Accetta tutto.
• --wpconsent-cancel-bg e --wpconsent-cancel-color sono lo sfondo e il testo del pulsante Rifiuta, condivisi con il pulsante Chiudi del pannello.
• --wpconsent-preferences-bg e --wpconsent-preferences-color sono lo sfondo e il testo del pulsante Preferenze, condivisi con il pulsante Salva e Chiudi del pannello.

Proprietà Layout e Tipo

Questi non hanno un campo nell'amministrazione, quindi il CSS è l'unico modo per impostarli.

• --wpconsent-border-radius è l'arrotondamento degli angoli sul pannello del banner.
• --wpconsent-shadow è l'ombra proiettata dietro il pannello e accetta qualsiasi valore valido di box-shadow, incluso none.
• --wpconsent-padding è lo spazio tra il bordo del pannello e i suoi contenuti e accetta qualsiasi valore valido di padding.
• --wpconsent-min-width è la larghezza minima consentita per il pannello del banner.
• --wpconsent-font-size è la dimensione del testo dell'avviso, che viene impostata anche dalla scheda Stile.
• --wpconsent-line-height è l'interlinea del testo dell'avviso.
• --wpconsent-border è il colore del bordo del menu a discesa del selettore della lingua e si applica quando hai più di una lingua abilitata su una versione a pagamento.
• --wpconsent-z-index è l'ordine di sovrapposizione dell'interfaccia di consenso, per siti in cui un altro elemento fisso si sovrappone al banner.

Pulsante di chiusura e proprietà di focus

Queste si applicano all'icona di chiusura del banner e all'anello di focus che i visitatori che usano la tastiera vedono.

• --wpconsent-close-size è la dimensione dell'icona di chiusura del banner, sui banner che ne mostrano una.
• --wpconsent-close-color è il colore di tale icona.
• --wpconsent-focus-outline-color è il colore dell'anello di focus su pulsanti e caselle di controllo.
• --wpconsent-focus-outline-width è lo spessore di tale anello.
• --wpconsent-focus-outline-offset è lo spazio tra l'anello e l'elemento che circonda.

Questo è tutto! Ora sai come ridefinire lo stile di ogni parte dell'interfaccia di consenso di WPConsent dal tuo foglio di stile. Per le impostazioni che puoi modificare senza scrivere alcun CSS, dai un'occhiata alla nostra guida alle opzioni di layout del banner.

Domande frequenti

Perché il CSS del mio tema non cambia il banner?

L'interfaccia di consenso viene disegnata all'interno di una shadow root con il suo foglio di stile privato, quindi i selettori che corrispondono agli elementi interni del banner non li raggiungono mai dall'esterno. Le proprietà personalizzate sono il percorso supportato per l'ingresso, e il selettore ::part() copre il pulsante mobile delle impostazioni. Vedi la sezione Come espone WPConsent gli stili del suo banner? sopra.

Posso mettere la regola su :root invece?

Non per il banner. WPConsent imposta i propri valori su un wrapper più in basso nella pagina rispetto a html, quindi una regola :root perde contro di essi, indipendentemente dalla specificità che le assegni. I segnaposto per contenuti bloccati sono l'unica eccezione, e lo scoping a .wpconsent-iframe-placeholder li gestisce comunque in modo più preciso.

Ho bisogno di !important su queste regole?

Solo sul background-color e color del pulsante mobile delle impostazioni, perché WPConsent scrive questi due valori direttamente sul pulsante. Ogni proprietà personalizzata su #wpconsent-container ha effetto senza di essa, così come tutto il resto nella regola ::part().

Il mio CSS sopravvivrà a un aggiornamento del plugin?

Sì. Le regole risiedono nel tuo tema o nel tuo plugin CSS anziché in WPConsent, quindi l'aggiornamento del plugin le lascia invariate. Le proprietà personalizzate sono anche l'interfaccia che WPConsent pubblica a questo scopo, il che le rende la cosa più stabile su cui puntare.

Il pannello delle preferenze necessita di una regola propria?

No. Viene disegnato all'interno dello stesso contenitore del banner e riutilizza le stesse proprietà, quindi una singola regola su #wpconsent-container ridefinisce lo stile di entrambi. Vedi la sezione Ridefinire lo stile del Pannello Preferenze sopra.

Posso cambiare l'icona sul pulsante delle impostazioni con CSS?

L'icona proviene dalla griglia Icona pulsante nella scheda Stile, che ti consente anche di caricare la tua immagine. Quella griglia è il posto dove cambiarla, e la nostra guida su il pulsante mobile di consenso la illustra.

Da quali valori partono le proprietà?

Le proprietà del colore e della dimensione del carattere partono da ciò che hai salvato nella scheda Stile, motivo per cui la sezione Trovare i valori sovrascritti dal tuo CSS mostra prima quel pannello. Il layout, il pulsante di chiusura e le proprietà di focus provengono dal foglio di stile di WPConsent e gli strumenti per sviluppatori del tuo browser ti mostrano i loro valori correnti su #wpconsent-container.

Queste regole funzioneranno su ogni layout del banner?

Le proprietà del colore, della dimensione del carattere e dell'altezza della linea si applicano a ogni layout. Queste quattro definiscono il pannello, quindi sono per i layout Floating e Modal, che disegnano il banner come una scheda:

• --wpconsent-border-radius
• --wpconsent-shadow
• --wpconsent-padding
• --wpconsent-min-width

Il layout Long disegna una barra a larghezza intera e imposta i propri angoli, ombreggiatura e spaziatura per adattarsi a quella forma. La nostra guida alle opzioni di layout del banner copre i layout.