Souhaitez-vous que votre bannière de cookies corresponde mieux à votre thème que ce que la vue Style ne peut gérer seule ? Tout ce dont vous avez besoin est d’un endroit pour placer quelques lignes de CSS.
Ce guide présente les propriétés CSS personnalisées que WPConsent expose pour son interface de consentement et montre ce que chacune d’elles modifie.
Table des matières
- Comment WPConsent expose-t-il les styles de sa bannière ?
- Trouver les valeurs que votre CSS surcharge
- Restyler la bannière de consentement
- Restyler le panneau des préférences
- Restyler le bouton flottant des paramètres
- Faire correspondre vos espaces réservés de contenu bloqué
- Rechercher toutes les propriétés disponibles
- Questions fréquemment posées
Avant de commencer, assurez-vous que WPConsent est installé et activé sur votre site WordPress.
Comment WPConsent expose-t-il les styles de sa bannière ?
WPConsent dessine son interface de consentement à l’intérieur d’un conteneur autonome appelé shadow root. Ce conteneur possède sa propre feuille de style privée, ce qui empêche votre thème de restyler accidentellement la bannière et empêche la bannière de restyler votre thème. Cela signifie également qu’une règle de thème ordinaire telle que .wpconsent-banner { background: black } n’atteint jamais la bannière.
La méthode prise en charge consiste en un ensemble de propriétés CSS personnalisées. WPConsent lit ses couleurs, espacements, coins et tailles de caractères à partir de ces propriétés, de sorte que la définition d’une propriété à partir de votre propre feuille de style modifie la bannière sans toucher au plugin. Chaque propriété est nommée avec un préfixe --wpconsent-.
Elles sont toutes résolues par rapport à un seul élément, le conteneur avec l’ID wpconsent-container, et c’est le sélecteur à cibler :
#wpconsent-container { --wpconsent-background: #101820; }
Cibler ce conteneur est important, car c’est le seul endroit où une règle simple l’emporte sans avoir besoin de !important. Les règles écrites contre :root ou html semblent être le choix évident et ne font discrètement rien à la bannière, car WPConsent définit ses propres valeurs plus loin dans la page que cela.
Note : Les propriétés personnalisées se propagent en cascade, de sorte qu’une règle sur #wpconsent-container couvre ensemble la bannière de consentement et le panneau des préférences. Le bouton flottant des paramètres et vos espaces réservés de contenu bloqué nécessitent chacun leur propre règle, ce que les sections ci-dessous couvrent.
L’endroit où vous placez la règle vous appartient. La feuille de style de votre thème enfant, Apparence » Personnaliser » CSS additionnel, ou un plugin de snippets CSS fonctionnent tous. Notre guide sur la personnalisation de la bannière avec CSS passe en revue les options.
Avant d’écrire une règle, il est utile de savoir quelles propriétés portent déjà une valeur que vous avez choisie vous-même.
Trouver les valeurs que votre CSS surcharge
Pour commencer, nous allons mapper les champs de couleur du concepteur de bannière à leurs noms de propriété. La plupart des propriétés de couleur et de type sont les paramètres que vous avez déjà enregistrés, publiés sous forme de CSS, de sorte qu’une règle qui en modifie une est en réalité une règle qui surcharge un champ que vous pouvez voir.
Depuis la barre latérale d'administration de WordPress, allez à WPConsent » Conception de la bannière, puis ouvrez l'onglet Style.
La section Couleur du bouton, près du bas de ce panneau, contient les valeurs derrière les propriétés du bouton.
Chaque champ correspond à une propriété :
--wpconsent-accept-bget--wpconsent-accept-colorproviennent de Arrière-plan d'acceptation et de sa Couleur de police.--wpconsent-cancel-bget--wpconsent-cancel-colorproviennent de Arrière-plan d'annulation et de sa Couleur de police.--wpconsent-preferences-bget--wpconsent-preferences-colorproviennent de Arrière-plan de personnalisation et de sa Couleur de police, qui est le bouton des préférences.--wpconsent-background,--wpconsent-textet--wpconsent-font-sizeproviennent de la section Bannière plus haut dans le même panneau.
Notre guide sur la conception de la bannière couvre ce panneau en détail. Avec le mappage en main, vous pouvez commencer à le remplacer.
Restyler la bannière de consentement
La bannière est la surface que la plupart des gens veulent changer en premier, et elle répond à deux groupes de propriétés : un pour la couleur, un pour la forme et le type. Voici la bannière telle que WPConsent la dessine avant tout CSS personnalisé, pour que vous ayez quelque chose à comparer.
Changer les couleurs
La palette de la bannière provient de l'arrière-plan et du texte du panneau, plus une couleur d'arrière-plan et une couleur de texte pour chaque bouton. Les définir ensemble permet de garder une bannière restylée délibérée plutôt que partiellement convertie.
#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;
}
Cette règle transforme la même bannière en un panneau sombre avec une seule action mise en évidence.
Les deux groupes de propriétés peuvent figurer dans la même règle, et le second groupe est là où les paramètres s'épuisent.
Changer la forme et le type
Le second groupe régit la géométrie : l'arrondi des coins, l'ombre portée, l'espacement interne, la largeur du panneau et le type. Aucun de ces éléments n'a de champ équivalent dans la vue Style, donc le CSS est le seul moyen d'y accéder.
#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;
}
Le résultat est un panneau plat, plus spacieux, aux coins carrés.
--wpconsent-min-width définit la largeur minimale autorisée pour le panneau, et le panneau continue de grandir pour s'adapter aux textes de notification plus longs et se limite à la largeur de l'écran. Le panneau de la bannière ne représente que la moitié de ce que ces propriétés atteignent.
Restyler le panneau des préférences
Le panneau des préférences est dessiné dans le même conteneur que la bannière, il hérite donc de toutes les propriétés que vous y définissez. La règle de couleur de la section précédente n'a rien à y ajouter : le fond du panneau, les étiquettes des catégories et les propres boutons du panneau suivent tous.
Les boutons du panneau réutilisent les trois paires de propriétés de boutons au lieu d'avoir les leurs :
--wpconsent-accept-bget--wpconsent-accept-colorstylisent le bouton Accepter tout du panneau.--wpconsent-cancel-bget--wpconsent-cancel-colorstylisent son bouton Fermer.--wpconsent-preferences-bget--wpconsent-preferences-colorstylisent son bouton Enregistrer et fermer.
C'est pourquoi le panneau ci-dessus correspond à la bannière sans règle supplémentaire.
Une propriété appartient spécifiquement à ce panneau :
--wpconsent-outline-colordessine les règles horizontales qui séparent les lignes de catégories.
WPConsent la définit à partir de la couleur de texte enregistrée, avec une opacité réduite. Ainsi, sur un panneau sombre, ces règles peuvent apparaître plus pâles que souhaité. La définir explicitement vous redonne la séparation :
#wpconsent-container { --wpconsent-outline-color: rgba(248, 181, 0, 0.35); }
Notre guide sur le panneau des préférences explique ce que fait chaque ligne.
Deux surfaces se situent en dehors de cette cascade, et chacune prend une courte règle propre.
Restyler le bouton flottant des paramètres
Le bouton flottant des paramètres est le petit contrôle rond qui permet aux visiteurs de rouvrir leurs choix une fois la bannière disparue. Il porte ses couleurs directement plutôt qu'à travers les propriétés personnalisées, donc la règle de couleur ci-dessus le laisse tranquille. Il n'a pas non plus de réglage de position dans l'administration.
WPConsent l'expose à votre feuille de style sous le nom wpconsent-settings-button, que vous atteignez avec le sélecteur ::part(). Cette règle le déplace en bas à droite, le rend circulaire, lui donne une ombre plus profonde et le recolore :
#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;
}
Notez le !important sur la couleur de fond et uniquement sur la couleur de fond. WPConsent écrit cette valeur directement sur le bouton afin qu'il puisse suivre les couleurs de votre bannière enregistrée, et !important est ce qui permet à votre règle de prendre le dessus. La position, le rembourrage, les coins et l'ombre prennent tous effet sans cela.
L'icône du bouton est choisie dans l'administration plutôt qu'en CSS, et notre guide sur le bouton flottant de consentement couvre sa sélection. La dernière surface est celle que vos visiteurs rencontrent sur vos pages plutôt que dans un coin.
Faire correspondre vos espaces réservés de contenu bloqué
Lorsque le blocage de contenu est activé, un contenu intégré auquel un visiteur n'a pas consenti est remplacé par un espace réservé portant son propre bouton d'acceptation. Ce bouton réutilise deux propriétés que vous avez déjà rencontrées :
--wpconsent-accept-bgest l'arrière-plan du bouton de l'espace réservé.--wpconsent-accept-colorest son texte.
L'espace réservé se trouve sur votre page plutôt qu'à l'intérieur du conteneur de consentement, il a donc besoin des deux propriétés définies là où il peut les voir.
Limiter la règle à l'espace réservé lui-même est la manière la plus propre de procéder :
.wpconsent-iframe-placeholder {
--wpconsent-accept-bg: #f8b500;
--wpconsent-accept-color: #101820;
}
Le bouton de l'espace réservé correspond alors au bouton d'acceptation de votre bannière.
La répétition des deux valeurs dans une seconde règle est délibérée : l'espace réservé et la bannière sont des parties distinctes de la page, et les conserver dans des règles séparées vous permet de donner un traitement différent à l'espace réservé si vous le souhaitez. Notre guide sur le blocage de contenu et les espaces réservés explique comment activer la fonctionnalité et choisir le texte de l'espace réservé.
Cela couvre les quatre surfaces, ce qui laisse les propriétés elles-mêmes.
Rechercher toutes les propriétés disponibles
Voici toutes les propriétés personnalisées que l'interface de consentement de WPConsent lit, regroupées par ce qu'elles contrôlent. Toutes s'appliquent à #wpconsent-container.
Propriétés de couleur
Celles-ci tirent leurs valeurs de départ de l'onglet Style, donc une règle ici remplace ce que vous y avez enregistré.
--wpconsent-backgroundest l'arrière-plan du panneau, sur la bannière et le panneau des préférences.--wpconsent-textest la couleur du texte du corps, ainsi que la couleur de l'icône du sélecteur de langue lorsque vous avez activé plus d'une langue.--wpconsent-outline-colorest la règle horizontale entre les lignes de catégories dans le panneau des préférences, que WPConsent définit à partir de votre couleur de texte avec une opacité réduite.--wpconsent-accept-bget--wpconsent-accept-colorsont l'arrière-plan et le texte du bouton Tout accepter.--wpconsent-cancel-bget--wpconsent-cancel-colorsont l'arrière-plan et le texte du bouton Rejeter, partagés avec le bouton Fermer du panneau.--wpconsent-preferences-bget--wpconsent-preferences-colorsont l'arrière-plan et le texte du bouton Préférences, partagés avec le bouton Enregistrer et fermer du panneau.
Propriétés de mise en page et de type
Celles-ci n'ont pas de champ dans l'administration, donc le CSS est le seul moyen de les définir.
--wpconsent-border-radiusest l'arrondi des coins du panneau de la bannière.--wpconsent-shadowest l'ombre portée derrière le panneau, et accepte toute valeurbox-shadowvalide, y comprisnone.--wpconsent-paddingest l'espace entre le bord du panneau et son contenu, et accepte toute valeurpaddingvalide.--wpconsent-min-widthest la largeur minimale autorisée pour le panneau de la bannière.--wpconsent-font-sizeest la taille du texte de la notification, que l'onglet Style définit également.--wpconsent-line-heightest l'espacement des lignes du texte de la notification.--wpconsent-borderest la couleur de la bordure de la liste déroulante du sélecteur de langue, et s'applique lorsque vous avez activé plus d'une langue dans une version payante.--wpconsent-z-indexest l'ordre d'empilement de l'interface de consentement, pour les sites où un autre élément fixe se superpose à la bannière.
Bouton de fermeture et propriétés de focus
Celles-ci s'appliquent à l'icône de fermeture de la bannière et à l'anneau de focus que les visiteurs naviguant au clavier voient.
--wpconsent-close-sizeest la taille de l'icône de fermeture de la bannière, sur les bannières qui en affichent une.--wpconsent-close-colorest la couleur de cette icône.--wpconsent-focus-outline-colorest la couleur de l'anneau de focus sur les boutons et les cases à cocher.--wpconsent-focus-outline-widthest l'épaisseur de cet anneau.--wpconsent-focus-outline-offsetest l'espace entre l'anneau et l'élément qu'il entoure.
Et voilà ! Vous savez maintenant comment retoucher toutes les surfaces de l'interface de consentement WPConsent depuis votre propre feuille de style. Pour les réglages que vous pouvez modifier sans écrire de CSS, consultez notre guide sur les options de disposition de la bannière.
Questions fréquemment posées
Pourquoi le CSS de mon thème ne modifie-t-il pas la bannière ?
L'interface de consentement est dessinée à l'intérieur d'une shadow root avec sa propre feuille de style privée, donc les sélecteurs qui correspondent aux éléments internes de la bannière ne les atteignent jamais de l'extérieur. Les propriétés personnalisées sont la voie d'accès prise en charge, et le sélecteur ::part() couvre le bouton flottant des paramètres. Voir la section Comment WPConsent expose-t-il les styles de sa bannière ? ci-dessus.
Puis-je mettre la règle sur :root à la place ?
Pas pour la bannière. WPConsent définit ses propres valeurs sur un wrapper plus bas dans la page que html, donc une règle :root perd face à elles, quelle que soit la spécificité que vous lui donnez. Les espaces réservés pour le contenu bloqué sont la seule exception, et le ciblage de .wpconsent-iframe-placeholder les gère de toute façon plus précisément.
Ai-je besoin de !important sur ces règles ?
Seulement sur la background-color et la color du bouton flottant des paramètres, car WPConsent écrit ces deux valeurs sur le bouton lui-même. Chaque propriété personnalisée sur #wpconsent-container prend effet sans cela, tout comme tout le reste dans la règle ::part().
Mon CSS survivra-t-il à une mise à jour du plugin ?
Oui. Les règles résident dans votre thème ou votre plugin CSS plutôt que dans WPConsent, donc la mise à jour du plugin les laisse intactes. Les propriétés personnalisées sont également l'interface que WPConsent publie à cet effet, ce qui en fait la chose la plus stable à cibler.
Le panneau de préférences a-t-il besoin de sa propre règle ?
Non. Il est dessiné à l'intérieur du même conteneur que la bannière et réutilise les mêmes propriétés, donc une seule règle sur #wpconsent-container redessine les deux. Voir la section Retoucher le panneau de préférences ci-dessus.
Puis-je changer l'icône du bouton des paramètres avec CSS ?
L'icône provient de la grille Icône du bouton dans l'onglet Style, qui vous permet également de télécharger votre propre image. C'est là qu'il faut la changer, et notre guide sur le bouton de consentement flottant vous explique comment faire.
Quelles sont les valeurs de départ des propriétés ?
Les propriétés de couleur et de taille de police commencent à partir de ce que vous avez enregistré dans l’onglet Style, c’est pourquoi la section Trouver les valeurs que votre CSS surcharge affiche d’abord ce panneau. La mise en page, le bouton de fermeture et les propriétés de focus proviennent de la feuille de style propre à WPConsent, et les outils de développement de votre navigateur vous montrent leurs valeurs actuelles sur #wpconsent-container.
Ces règles fonctionneront-elles sur toutes les mises en page de bannière ?
Les propriétés de couleur, de taille de police et de hauteur de ligne s’appliquent à toutes les mises en page. Ces quatre éléments façonnent le panneau, ils sont donc destinés aux mises en page Flottante et Modale, qui affichent la bannière sous forme de carte :
--wpconsent-border-radius--wpconsent-shadow--wpconsent-padding--wpconsent-min-width
La mise en page Longue affiche une barre pleine largeur et définit ses propres coins, son ombre et son espacement pour s’adapter à cette forme. Notre guide sur les options de mise en page de bannière couvre les mises en page.