Le regole CSS del tuo tema non hanno alcun effetto sul tuo banner per i cookie? Tutto ciò di cui hai bisogno è un posto sul tuo sito per conservare alcune righe di CSS.

Questa guida copre dove WPConsent conserva i suoi stili, quali selettori li raggiungono e dove inserire le tue regole.

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

Indice

• Perché il CSS del tuo tema non cambia il banner?
• Aggiungere il tuo CSS a WordPress
• Styling del banner dall'esterno della Shadow Root
• Raggiungere gli elementi del banner con ::part()
• Styling della pagina della politica sui cookie
• Styling dei segnaposto per contenuti bloccati
• Scegliere il selettore giusto
• Domande frequenti

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

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

WPConsent costruisce il banner del consenso e il pannello delle preferenze all'interno di una shadow root. Una shadow root è un mini documento autonomo collegato a un elemento della tua pagina.

Quel mini documento porta il suo foglio di stile e il confine attorno ad esso funziona in entrambe le direzioni. Gli stili dei pulsanti di WPConsent non fuoriescono mai sul tuo sito, e gli stili del tuo sito non vi entrano mai.

Questo è il motivo per cui una regola come .wpconsent-banner { background: black } sembra essere ignorata. Non viene superata da qualcosa di più specifico. Il selettore non ha nulla da abbinare, perché l'elemento che nomina si trova dall'altra parte del confine.

Aggiungere !important non cambia nulla, né lo fa l'aggiunta di selettori extra come html .wpconsent-banner. Mirare direttamente ai pulsanti o al pannello delle preferenze non fa alcuna differenza.

Lo stesso confine spiega qualcos'altro che potresti aver notato. Il foglio di stile del banner di WPConsent non è elencato accanto a quello del tuo tema negli strumenti per sviluppatori del tuo browser. WPConsent lo carica dall'interno della shadow root invece.

Tre cose attraversano il confine, e ognuna ha la sua sezione o la sua guida:

• Proprietà ereditate impostate sul contenitore. Questo è l'unico percorso che utilizza CSS ordinario, e la sezione successiva lo copre.
• Proprietà personalizzate CSS. Questi sono i modi in cui WPConsent pubblica i suoi colori, spaziature, angoli e dimensioni dei caratteri da sovrascrivere.
• Il selettore ::part(). Questo raggiunge i singoli elementi che WPConsent espone per nome, incluso il pulsante flottante delle impostazioni. La sezione Raggiungere gli elementi del banner con ::part() nomina ognuno di essi.

Il resto di WPConsent è una storia diversa. La tua pagina della politica sui cookie, i tuoi segnaposto per contenuti bloccati e il pulsante delle preferenze sono tutti contenuti ordinari della pagina. Nessuna shadow root si avvicina a loro, quindi prendono CSS ordinario.

Questi tre costituiscono la maggior parte di questa guida, e la prima domanda è dove vanno le regole.

Aggiungere il tuo CSS a WordPress

Per iniziare, troveremo una collocazione per le tue regole. Appartengono ovunque tu conservi già il CSS personalizzato del tuo sito. WordPress ha un posto integrato proprio per questo, ed è quello che raccomandiamo.

Dal tuo pannello di amministrazione di WordPress, vai su Aspetto » Personalizza. Da qui, apri CSS aggiuntivo e incolla la tua regola nell'editor.

Le modifiche apportate nel Personalizza raggiungono i tuoi visitatori una volta pubblicate. Fino ad allora, il banner mantiene il suo aspetto attuale.

Funziona anche il foglio di stile di un tema child, così come uno snippet CSS in un plugin per snippet di codice. C'è un motivo pratico per preferire però CSS aggiuntivo.

WordPress stampa il CSS aggiuntivo dopo ogni foglio di stile di plugin. Quindi, quando la tua regola e una delle regole di WPConsent sono ugualmente specifiche, la tua ha la precedenza.

Un foglio di stile del tema viene stampato prima nella pagina rispetto a quello di WPConsent, quindi da lì la stessa regola può perdere quel pareggio. La soluzione è un singolo selettore aggiuntivo, che eleva la tua regola al di sopra di quella del plugin, indipendentemente dall'ordine di caricamento. Ogni esempio di placeholder più in basso è scritto in quel modo, in modo che funzioni da una qualsiasi delle tre posizioni.

La guida di WPBeginner per aggiungere CSS personalizzato in WordPress confronta le tre posizioni in modo più dettagliato.

Con un posto dove inserire una regola, il banner stesso è il primo posto dove provarne una.

Styling del banner dall'esterno della Shadow Root

Una famiglia di proprietà CSS attraversa un confine ombra per progettazione: quelle ereditate, come font-family. Il foglio di stile di WPConsent avvia la shadow root resettando tutto e poi riabilitando l'ereditarietà dei font. Ecco perché il banner riprende già il tipo di carattere utilizzato dalla tua pagina.

Ecco quel banner prima di qualsiasi CSS personalizzato.

Una regola sul contenitore sostituisce ciò che il banner eredita, e il valore si trasmette a tutto ciò che contiene:

#wpconsent-container { font-family: Georgia, serif; letter-spacing: 0.01em; }

Il testo dell'avviso riprende subito il nuovo tipo di carattere. La spaziatura tra le lettere è una regolazione fine piuttosto che un cambiamento visibile. È lì per mostrare che una seconda proprietà ereditata viaggia nello stesso modo.

I tre pulsanti mantengono il loro font originale. Quello è dovuto ai browser piuttosto che a WPConsent: un <button> ottiene il proprio tipo di carattere dal foglio di stile predefinito del browser. La sezione successiva copre il selettore che li raggiunge.

letter-spacing, text-transform, font-weight e font-style raggiungono il banner dal contenitore nello stesso modo. Colori, sfondi, padding e raggio degli angoli no, perché quelle proprietà non sono ereditate. Quelle sono per cosa servono le proprietà personalizzate.

Questo è tutto ciò che il CSS ordinario può fare per il banner. Un altro selettore raggiunge l'interno, ed è la risposta a quei tre pulsanti.

Raggiungere gli elementi del banner con ::part()

WPConsent assegna a molti degli elementi all'interno della sua shadow root un nome pubblico. Un nome è qualcosa che il tuo foglio di stile può selezionare anche attraverso il confine, usando il selettore ::part().

Il selettore è sempre il contenitore, poi il nome dell'elemento che desideri:

#wpconsent-container::part(wpconsent-button-accept) { font-family: Georgia, serif; }

Questo raggiunge i tre pulsanti che hanno mantenuto il loro font del browser nella sezione precedente. Nominare tutti e tre li inserisce nello stesso font serif del testo dell'avviso, in minuscolo maiuscolo:

#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences) {
  font-family: Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

Ogni nome raggiunge un tipo di elemento, e un elemento che WPConsent non ha nominato non può essere raggiunto in questo modo. Il resto di questa sezione contiene tutti i nomi esistenti, raggruppati per posizione.

Parti del Banner

• wpconsent-banner è il banner stesso, qualunque sia il layout impostato.
• wpconsent-banner-body è il blocco che contiene il testo del tuo avviso sui cookie.
• wpconsent-banner-footer è la riga che contiene i pulsanti.
• wpconsent-banner-logo è l'immagine del logo, e appare solo quando hai impostato un logo nelle impostazioni del tuo banner.
• wpconsent-button-accept, wpconsent-button-cancel e wpconsent-button-preferences sono i pulsanti Accetta, Rifiuta e Preferenze.

Parti del Pannello Preferenze

• wpconsent-preferences-modal è l'elemento più esterno del pannello, e wpconsent-preferences-content è la scheda al suo interno.
• wpconsent-preferences-header è la striscia in alto, che contiene wpconsent-preferences-title per l'intestazione e wpconsent-preferences-close per il controllo di chiusura.
• wpconsent-preferences-description è il testo introduttivo sotto l'intestazione.
• wpconsent-preferences-accordion racchiude ogni riga di categoria.
• wpconsent-preferences-actions è il piè di pagina, con wpconsent-preferences-buttons per la riga di pulsanti al suo interno.
• wpconsent-preferences-buttons-left è il gruppo di sinistra di quella riga, che contiene Accetta tutto e Chiudi. Il pulsante Salva si trova al di fuori di esso.
• wpconsent-preferences-accept-button, wpconsent-preferences-cancel-button e wpconsent-preferences-save-button sono i pulsanti Accetta tutto, Chiudi e Salva e chiudi del pannello.

Parti della riga di categorie e servizi

Ogni riga espandibile nel pannello condivide un set di nomi, sia che si tratti di una categoria o di un singolo servizio:

• wpconsent-accordion-item è una qualsiasi riga.
• wpconsent-accordion-header è la striscia su cui si fa clic, e wpconsent-accordion-toggle è il controllo su di essa.
• wpconsent-accordion-content è l'area che si apre sotto.
• wpconsent-checkbox-toggle è l'interruttore on/off su una riga. Una riga che i visitatori non possono disattivare, come i cookie essenziali, porta anche wpconsent-checkbox-toggle-disabled.
• wpconsent-cookie-policy-item è la riga che rimanda alla tua cookie policy e appare solo dopo aver scelto una pagina per la cookie policy.

Due dei nomi sono creati dai tuoi contenuti, quindi variano da sito a sito:

• wpconsent-category- più i nomi degli slug delle categorie nominano una riga di categoria, come wpconsent-category-marketing.
• wpconsent-service- più lo slug del servizio nomina una riga di servizio, come wpconsent-service-google-analytics.

Questi due sono ciò che si usa quando si vuole che una categoria o un servizio abbiano un aspetto diverso dal resto.

Parti della tabella dei cookie

Espandere una riga rivela i cookie che copre, in una piccola tabella a sé stante:

• wpconsent-cookies-list è la tabella.
• wpconsent-cookies-list-header è la sua riga di intestazione.
• wpconsent-cookies-list-item è ogni cookie elencato sotto di essa.

Parte del pulsante Impostazioni fluttuante

• wpconsent-settings-button è il piccolo controllo rotondo che riapre il pannello dopo che il banner è scomparso.

Quello merita una menzione a sé, perché è l'unica parte il cui colore di sfondo necessita di !important per cambiare. La nostra guida su come personalizzare il banner con le variabili CSS copre come spostarlo e ricolorarlo.

Tutto da qui in poi fa parte di WPConsent che si trova sulle tue pagine. Lì, il CSS si comporta come ovunque altro.

Styling della pagina della politica sui cookie

La tua pagina della cookie policy è creata da uno shortcode e renderizzata come normale contenuto della pagina. Non ci sono limiti da aggirare.

Ecco come appare una delle sue tabelle con solo lo stile di WPConsent.

Sei classi coprono tutto ciò che lo shortcode produce:

• .wpconsent-cookie-policy racchiude l'intero output.
• .wpconsent-cookie-category-name è l'intestazione di ogni categoria di cookie, con .wpconsent-cookie-category-description per il suo testo introduttivo.
• .wpconsent-cookie-service-name e .wpconsent-cookie-service-description svolgono lo stesso lavoro per ogni servizio all'interno di una categoria.
• .wpconsent-cookie-policy-table è ogni tabella nella pagina.

Questa regola conferisce alle tabelle una riga di intestazione scura, bordi più ordinati e una striscia più calda sulle righe alternate:

.wpconsent-cookie-policy-table th {   background-color: #101820;   color: #f8b500;   text-align: left;   text-transform: uppercase;   letter-spacing: 0.06em;   font-size: 13px; }

.wpconsent-cookie-policy-table tbody tr:nth-child(odd) td {   background-color: #fbf7ec; }

Nessuna parte di questa regola necessita di !important, e questo è intenzionale da parte di WPConsent. Le sue regole per la cookie policy non hanno alcuna specificità, puramente per impostare un aspetto iniziale che qualsiasi tua regola può sostituire.

Lo stile delle tabelle del tuo tema prevale per lo stesso motivo. Ecco perché una pagina delle policy assume l'aspetto del resto del tuo sito prima che tu la tocchi.

La nostra guida sulla pagina della cookie policy copre la generazione della pagina e il suo mantenimento aggiornato.

L'altra superficie che i tuoi visitatori incontrano nelle tue pagine è ciò che appare al posto di un embed bloccato.

Styling dei segnaposto per contenuti bloccati

Quando il blocco dei contenuti è attivo, un embed a cui un visitatore non ha acconsentito viene sostituito con un segnaposto. Anche quel segnaposto è un normale markup della pagina, quindi accetta un normale CSS.

Un segnaposto è composto da quattro elementi:

• .wpconsent-iframe-placeholder è la scatola esterna che prende il posto dell'embed.
• .wpconsent-iframe-thumbnail contiene un'anteprima dell'immagine del contenuto bloccato.
• .wpconsent-iframe-overlay-content copre l'intera scatola e centra il pulsante. Questo è l'elemento da usare quando si desidera una tinta sull'anteprima.
• .wpconsent-iframe-accept-button è il pulsante stesso.

Questa regola arrotonda la scatola, rimuove il colore dall'anteprima, vi applica una tinta e trasforma il pulsante in una pillola:

.wpconsent-iframe-placeholder {   border: 2px solid #d8dde2;   border-radius: 12px; }

.wpconsent-iframe-placeholder .wpconsent-iframe-accept-button {   padding: 14px 26px;   border-radius: 999px;   font-size: 16px;   font-weight: 600;   box-shadow: 0 4px 14px rgba(16, 24, 32, 0.35); }

Ciascuna delle ultime tre regole nomina il segnaposto oltre all'elemento al suo interno. Questo è il selettore aggiuntivo menzionato in precedenza. Permette alla regola di funzionare sia da un foglio di stile di un tema figlio sia da CSS aggiuntivo.

È anche possibile indirizzare un servizio alla volta. Ogni segnaposto ha una seconda classe che nomina il servizio che ha sostituito, come .wpconsent-iframe-placeholder-google-maps. Ha anche gli attributi data-wpconsent-name e data-wpconsent-category.

Un selettore come [data-wpconsent-category="marketing"] .wpconsent-iframe-accept-button raggiunge ogni segnaposto di marketing sul tuo sito e lascia gli altri invariati.

Il colore di sfondo e del testo del pulsante sono l'unica cosa da cambiare altrove. Provengono dalle stesse due proprietà personalizzate del pulsante Accetta tutto del banner, quindi la guida alle variabili CSS è il posto dove impostarli.

La nostra guida su blocco dei contenuti e segnaposto copre l'attivazione della funzionalità e la scelta del testo per i segnaposto.

Questo copre tutte e tre le superfici, il che lascia la domanda su come trovare un selettore da soli.

Scegliere il selettore giusto

Le classi della policy sui cookie, le classi dei segnaposto e il pulsante delle preferenze si comportano come elementi ordinari nell'ispettore del tuo browser. La classe di cui hai bisogno si trova proprio lì sul markup evidenziato.

Il banner si comporta diversamente, ed è utile sapere cosa stai guardando. Ispezionandolo mostra #wpconsent-container con una riga #shadow-root (open) annidata all'interno. Espandendola rivela l'intero banner, nomi di classi inclusi.

Quei nomi di classi sono reali e l'ispettore ti mostrerà gli stili su di essi. Una regola scritta contro di essi nel tuo foglio di stile ancora non li raggiungerà. L'albero è un modo per capire di cosa è fatto il banner, non un modo per stilizzarlo.

Ecco ogni elemento WPConsent che si trova al di fuori della shadow root, in un unico posto:

• #wpconsent-container è l'elemento a cui è collegato il banner e il target per le proprietà ereditate e le proprietà personalizzate.
• .wpconsent-cookie-policy e le cinque classi al suo interno sono la pagina della policy sui cookie.
• .wpconsent-iframe-placeholder e le tre classi al suo interno sono i segnaposto dei contenuti bloccati.
• .wpconsent-open-preferences è il pulsante che lo shortcode delle preferenze di WPConsent produce, ovunque tu l'abbia posizionato.

Quest'ultimo prende il suo aspetto dal tuo tema, nel modo in cui qualsiasi altro pulsante nelle tue pagine fa. Una breve regola gli conferisce un aspetto proprio:

.wpconsent-open-preferences {   background-color: #101820;   color: #f8b500;   border-radius: 999px;   padding: 12px 22px; }

La nostra guida su come aprire il pannello delle preferenze con un link personalizzato copre l'aggiunta di quel pulsante a una pagina o a un menu.

Questo è tutto! Ora sai quali parti di WPConsent accettano CSS ordinario, quali necessitano di un percorso diverso e dove conservare le regole. Per cambiare i colori, lo spazio e gli angoli del banner, dai un'occhiata alla nostra guida su come personalizzare il banner con variabili CSS.

Domande frequenti

Di seguito, abbiamo risposto ad alcune delle domande più comuni sullo stile di WPConsent con il tuo CSS.

Perché la mia regola su .wpconsent-banner viene ignorata?

Quell'elemento risiede all'interno di una shadow root, quindi un selettore nel tuo foglio di stile non ha nulla da abbinare. Questo vale indipendentemente da quanto specifico rendi il selettore e se aggiungi o meno !important. La sezione Perché il CSS del tuo tema non cambia il banner? sopra copre cosa usare al suo posto.

Posso mettere la regola su :root invece?

Non per il banner. Il tuo tema dichiara proprietà ereditate come font-family su body, che si trova più vicino al banner rispetto a html. I valori delle proprietà personalizzate di WPConsent si trovano ancora più vicini, quindi usa #wpconsent-container.

Ho bisogno di !important su una di queste regole?

No. Nessuno degli esempi in questa guida lo utilizza, comprese le regole per la policy dei cookie e i segnaposto. L'unico posto in cui è veramente necessario è il colore di sfondo del pulsante delle impostazioni fluttuanti, che la guida alle variabili CSS copre.

Posso stilizzare l'icona di chiusura del banner con ::part()?

No. L'icona di chiusura è l'unico elemento del banner a cui WPConsent non assegna un nome pubblico, quindi non c'è una parte da selezionare. Le sue dimensioni e il suo colore derivano invece da due proprietà personalizzate, che la nostra guida su come personalizzare il banner con variabili CSS copre.

Dove dovrei tenere il CSS?

Aspetto » Personalizza » CSS aggiuntivo è l'opzione più semplice. WordPress lo stampa dopo i fogli di stile dei plugin, quindi le tue regole vincono qualsiasi parità di specificità. Anche un foglio di stile di un tema child o un plugin per snippet di codice funzionano, con un selettore aggiuntivo aggiunto a qualsiasi regola che sia in parità.

Il mio CSS sopravvivrà a un aggiornamento del plugin?

Sì. Le regole risiedono nel tuo tema, nel Personalizzatore o nel tuo plugin per snippet anziché all'interno di WPConsent. L'aggiornamento del plugin le lascia intatte.

Posso cambiare il testo del banner con il CSS?

Il testo è un'impostazione piuttosto che qualcosa da stilizzare, e WPConsent ha campi per tutto. La nostra guida su contenuti e testo del banner illustra l'avviso, le etichette dei pulsanti e le intestazioni del pannello.

Dove trovo il foglio di stile del banner di WPConsent?

Viene caricato dall'interno della shadow root anziché dalla pagina stessa. I fogli di stile di WPConsent che vedrai nella pagina sono quello per i segnaposto di contenuto bloccato e quello per le tabelle della policy dei cookie. Quello della policy dei cookie viene caricato solo nelle pagine che contengono lo shortcode.

Ho bisogno di una licenza a pagamento per qualcuna di queste cose?

No. La shadow root, il selettore del contenitore, le classi della policy dei cookie e le classi dei segnaposto funzionano allo stesso modo a ogni livello di licenza. Ogni regola in questa guida si applica a qualsiasi sito WPConsent.