Les règles CSS de votre thème n’ont aucun effet sur votre bannière de cookies ? Tout ce dont vous avez besoin est de quelque part sur votre site pour conserver quelques lignes de CSS.

Ce guide explique où WPConsent conserve ses styles, quels sélecteurs les atteignent et où placer vos propres règles.

Cliquez ici pour accepter les cookies marketing et charger ce contenu

Table des matières

• Pourquoi le CSS de votre thème ne change-t-il pas la bannière ?
• Ajouter votre CSS à WordPress
• Styliser la bannière depuis l’extérieur de la Shadow Root
• Atteindre les éléments de la bannière avec ::part()
• Styliser la page de politique de cookies
• Styliser vos placeholders de contenu bloqué
• Choisir le bon sélecteur
• Questions fréquemment posées

Avant de commencer, assurez-vous que WPConsent est installé et activé sur votre site WordPress.

Pourquoi le CSS de votre thème ne change-t-il pas la bannière ?

WPConsent construit la bannière de consentement et le panneau de préférences à l’intérieur d’une shadow root. Une shadow root est un mini-document autonome attaché à un élément de votre page.

Ce mini-document contient sa propre feuille de style, et la frontière autour de lui fonctionne dans les deux sens. Les styles de bouton de WPConsent ne s’échappent jamais sur votre site, et les styles de votre site n’y pénètrent jamais.

C’est pourquoi une règle telle que .wpconsent-banner { background: black } semble être ignorée. Elle n’est pas surpassée par quelque chose de plus spécifique. Le sélecteur n’a rien à faire correspondre, car l’élément qu’il nomme se trouve de l’autre côté de la frontière.

L’ajout de !important ne change rien, pas plus que l’accumulation de sélecteurs supplémentaires tels que html .wpconsent-banner. Cibler directement les boutons ou le panneau de préférences ne fait aucune différence non plus.

La même frontière explique autre chose que vous avez peut-être remarqué. La feuille de style de la bannière de WPConsent n’est pas répertoriée avec celle de votre thème dans les outils de développement de votre navigateur. WPConsent la charge depuis l’intérieur de la shadow root à la place.

Trois choses traversent la frontière, et chacune a sa propre section ou son propre guide :

• Propriétés héritées définies sur le conteneur. C’est la seule voie qui utilise du CSS ordinaire, et la section suivante la couvre.
• Propriétés personnalisées CSS. C’est ainsi que WPConsent publie ses couleurs, espacements, coins et tailles de caractères pour que vous puissiez les remplacer.
• Le sélecteur ::part(). Il atteint les éléments individuels que WPConsent expose par nom, y compris le bouton flottant des paramètres. La section Atteindre les éléments de la bannière avec ::part() nomme chacun d’eux.

Le reste de WPConsent est une autre histoire. Votre page de politique de cookies, vos placeholders de contenu bloqué et le bouton de préférences sont tous du contenu de page ordinaire. Aucune shadow root ne s’en approche, ils prennent donc du CSS ordinaire.

Ces trois éléments constituent la majeure partie de ce guide, et la première question est de savoir où placer les règles.

Ajouter votre CSS à WordPress

Pour commencer, nous trouverons un emplacement pour vos règles. Elles vont là où vous conservez déjà le CSS personnalisé de votre site. WordPress dispose d'un endroit intégré pour cela, et c'est celui que nous recommandons.

Depuis votre administration WordPress, allez dans Apparence » Personnaliser. De là, ouvrez CSS additionnel et collez votre règle dans l'éditeur.

Les modifications apportées dans le personnaliseur parviennent à vos visiteurs une fois publiées. Jusqu'alors, la bannière conserve son apparence actuelle.

La feuille de style d'un thème enfant fonctionne aussi, tout comme un extrait CSS dans un plugin d'extraits de code. Il y a une raison pratique de préférer CSS additionnel cependant.

WordPress imprime le CSS additionnel après chaque feuille de style de plugin. Ainsi, lorsque votre règle et l'une des règles de WPConsent sont également spécifiques, la vôtre a la priorité.

Une feuille de style de thème est imprimée plus tôt dans la page que celle de WPConsent, donc à partir de là, la même règle peut perdre cette égalité. La solution est un seul sélecteur supplémentaire, qui place votre règle au-dessus de celle du plugin, quel que soit l'ordre de chargement. Chaque exemple de placeholder plus bas est écrit de cette façon, de sorte qu'il fonctionne depuis l'un des trois emplacements.

Le guide de WPBeginner sur l'ajout de CSS personnalisé dans WordPress compare les trois emplacements plus en détail.

Avec un endroit pour placer une règle, la bannière elle-même est le premier endroit où essayer une règle.

Styliser la bannière depuis l’extérieur de la Shadow Root

Une famille de propriétés CSS traverse une limite d'ombre par conception : les propriétés héritées, telles que font-family. La feuille de style de WPConsent démarre la racine d'ombre en réinitialisant tout, puis en réactivant l'héritage des polices. C'est pourquoi la bannière reprend déjà la police de caractères que votre page utilise.

Voici cette bannière avant tout CSS personnalisé.

Une règle sur le conteneur remplace ce que la bannière hérite, et la valeur se propage à tout ce qui se trouve à l'intérieur :

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

Le texte de l'avis reprend immédiatement la nouvelle police. L'espacement des lettres est un ajustement fin plutôt qu'un changement visible. Il est là pour montrer qu'une deuxième propriété héritée voyage de la même manière.

Les trois boutons conservent leur police d'origine. Ce sont les navigateurs plutôt que WPConsent : un <button> obtient sa propre police à partir de la feuille de style intégrée du navigateur. La section suivante couvre le sélecteur qui les atteint.

letter-spacing, text-transform, font-weight et font-style atteignent la bannière depuis le conteneur de la même manière. Les couleurs, les arrière-plans, le remplissage et le rayon des coins ne le font pas, car ces propriétés ne sont pas héritées. Ce sont les propriétés personnalisées qui servent à cela.

C'est tout ce que le CSS ordinaire peut faire pour la bannière. Un sélecteur supplémentaire pénètre à l'intérieur, et c'est la réponse à ces trois boutons.

Atteindre les éléments de la bannière avec ::part()

WPConsent donne à la plupart des éléments à l'intérieur de sa shadow root un nom public. Un nom est quelque chose que votre feuille de style peut sélectionner même à travers la frontière, en utilisant le sélecteur ::part().

Le sélecteur est toujours le conteneur, puis le nom de l'élément que vous voulez :

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

C'est ce qui atteint les trois boutons qui ont conservé la police de leur navigateur dans la section précédente. Nommer les trois les met dans la même police serif que le texte de la notification, en petites majuscules :

#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;
}

Chaque nom atteint un type d'élément, et un élément que WPConsent n'a pas nommé ne peut pas être atteint de cette façon du tout. Le reste de cette section est tous les noms existants, regroupés par leur emplacement.

Parties de la bannière

• wpconsent-banner est la bannière elle-même, quelle que soit la disposition que vous lui avez définie.
• wpconsent-banner-body est le bloc contenant le texte de votre avis de cookie.
• wpconsent-banner-footer est la ligne contenant les boutons.
• wpconsent-banner-logo est l'image du logo, et apparaît uniquement lorsque vous avez défini un logo dans les paramètres de votre bannière.
• wpconsent-button-accept, wpconsent-button-cancel et wpconsent-button-preferences sont les boutons Accepter, Refuser et Préférences.

Parties du panneau de préférences

• wpconsent-preferences-modal est l'élément le plus externe du panneau, et wpconsent-preferences-content est la carte à l'intérieur.
• wpconsent-preferences-header est la bande en haut, portant wpconsent-preferences-title pour le titre et wpconsent-preferences-close pour le contrôle de fermeture.
• wpconsent-preferences-description est le texte d'introduction sous l'en-tête.
• wpconsent-preferences-accordion enveloppe chaque ligne de catégorie.
• wpconsent-preferences-actions est le pied de page, avec wpconsent-preferences-buttons pour la rangée de boutons à l'intérieur.
• wpconsent-preferences-buttons-left est le groupe de gauche de cette ligne, qui contient Accepter tout et Fermer. Le bouton Enregistrer se trouve à l'extérieur.
• wpconsent-preferences-accept-button, wpconsent-preferences-cancel-button et wpconsent-preferences-save-button sont les boutons Accepter tout, Fermer et Enregistrer et fermer du panneau.

Parties de la ligne Catégorie et Service

Chaque ligne développable du panneau partage un ensemble de noms, qu'il s'agisse d'une catégorie ou d'un service unique :

• wpconsent-accordion-item est l'une des lignes.
• wpconsent-accordion-header est la bande sur laquelle vous cliquez, et wpconsent-accordion-toggle est le contrôle dessus.
• wpconsent-accordion-content est la zone qui s'ouvre en dessous.
• wpconsent-checkbox-toggle est l'interrupteur marche/arrêt sur une ligne. Une ligne que les visiteurs ne peuvent pas désactiver, comme les cookies essentiels, porte également wpconsent-checkbox-toggle-disabled.
• wpconsent-cookie-policy-item est la ligne renvoyant à votre politique de cookies, et n'apparaît qu'une fois que vous avez choisi une page de politique de cookies.

Deux des noms sont construits à partir de votre propre contenu, ils varient donc selon le site :

• wpconsent-category- suivi du slug de la catégorie nomme une ligne de catégorie, telle que wpconsent-category-marketing.
• wpconsent-service- suivi du slug du service nomme une ligne de service, telle que wpconsent-service-google-analytics.

Ces deux-là sont à utiliser lorsque vous souhaitez qu'une catégorie ou un service ait un aspect différent des autres.

Parties du tableau des cookies

Développer une ligne révèle les cookies qu'elle couvre, dans un petit tableau propre à cette ligne :

• wpconsent-cookies-list est le tableau.
• wpconsent-cookies-list-header est sa ligne d'en-tête.
• wpconsent-cookies-list-item est chaque cookie listé en dessous.

Partie du bouton de paramètres flottant

• wpconsent-settings-button est le petit contrôle rond qui rouvre le panneau après la disparition de la bannière.

Celui-ci mérite une mention à lui seul, car c'est la seule partie dont la couleur d'arrière-plan nécessite !important pour être modifiée. Notre guide sur la personnalisation de la bannière avec des variables CSS explique comment le déplacer et le recolorer.

Tout à partir d'ici est une partie de WPConsent qui se trouve sur vos pages. Là, le CSS se comporte comme partout ailleurs.

Styliser la page de politique de cookies

Votre page de politique de cookies est construite par un shortcode et rendue comme un contenu de page ordinaire. Il n'y a pas de limite à contourner.

Voici à quoi ressemble l'un de ses tableaux avec uniquement le style propre à WPConsent.

Six classes couvrent tout ce que le shortcode produit :

• .wpconsent-cookie-policy englobe tout le résultat.
• .wpconsent-cookie-category-name est l'en-tête de chaque catégorie de cookies, avec .wpconsent-cookie-category-description pour son texte d'introduction.
• .wpconsent-cookie-service-name et .wpconsent-cookie-service-description font le même travail pour chaque service à l'intérieur d'une catégorie.
• .wpconsent-cookie-policy-table est chaque tableau sur la page.

Cette règle donne aux tableaux un en-tête de ligne sombre, des bordures plus nettes et une bande plus chaude sur les lignes alternées :

.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; }

Rien dans cette règle ne nécessite !important, et c'est délibéré de la part de WPConsent. Ses propres règles de politique de cookies n'ont aucune spécificité, juste pour définir un aspect de départ que toute règle de votre part peut remplacer.

Le style de tableau de votre thème l'emporte pour la même raison. C'est pourquoi une page de politique prend l'apparence du reste de votre site avant que vous n'y touchiez.

Notre guide sur la page de politique de cookies couvre la génération de la page et sa mise à jour.

L'autre surface que vos visiteurs rencontrent sur vos pages est ce qui apparaît à la place d'un contenu intégré bloqué.

Styliser vos placeholders 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é. Cet espace réservé est également une balise de page ordinaire, il prend donc en charge le CSS ordinaire.

Un espace réservé se compose de quatre éléments :

• .wpconsent-iframe-placeholder est la boîte extérieure qui remplace le contenu intégré.
• .wpconsent-iframe-thumbnail contient une image d'aperçu du contenu bloqué.
• .wpconsent-iframe-overlay-content couvre toute la boîte et centre le bouton. C'est l'élément à utiliser lorsque vous souhaitez une teinte sur l'aperçu.
• .wpconsent-iframe-accept-button est le bouton lui-même.

Cette règle arrondit la boîte, supprime la couleur de l'aperçu, y applique une teinte et transforme le bouton en une pilule :

.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); }

Chacune des trois dernières règles nomme l'espace réservé ainsi que l'élément qu'il contient. C'est le sélecteur supplémentaire mentionné précédemment. Il permet à la règle de fonctionner à partir d'une feuille de style de thème enfant ainsi qu'à partir de CSS additionnel.

Il est également possible de cibler un seul service à la fois. Chaque espace réservé porte une seconde classe nommant le service qu'il a remplacé, telle que .wpconsent-iframe-placeholder-google-maps. Il porte également les attributs data-wpconsent-name et data-wpconsent-category.

Un sélecteur tel que [data-wpconsent-category="marketing"] .wpconsent-iframe-accept-button atteint chaque espace réservé de marketing sur votre site et laisse les autres intacts.

La couleur d'arrière-plan et la couleur du texte du bouton sont la seule chose à changer ailleurs. Elles proviennent des deux mêmes propriétés personnalisées que le bouton Accepter tout de la bannière, donc le guide des variables CSS est l'endroit où les définir.

Notre guide sur le blocage de contenu et les espaces réservés explique comment activer la fonctionnalité et choisir le libellé de l'espace réservé.

Cela couvre les trois surfaces, ce qui laisse la question de savoir comment trouver un sélecteur par soi-même.

Choisir le bon sélecteur

Les classes de la politique de cookies, les classes des espaces réservés et le bouton des préférences se comportent tous comme des éléments ordinaires dans l'inspecteur de votre navigateur. La classe dont vous avez besoin se trouve juste là sur le balisage mis en surbrillance.

La bannière se comporte différemment, et il est utile de savoir ce que vous regardez. L'inspecter montre #wpconsent-container avec une ligne #shadow-root (open) imbriquée à l'intérieur. L'étendre révèle toute la bannière, noms de classes compris.

Ces noms de classes sont réels, et l'inspecteur vous montrera les styles qui leur sont appliqués. Une règle écrite contre eux dans votre feuille de style ne les atteindra toujours pas. L'arbre est un moyen de comprendre de quoi est composée la bannière, pas un moyen de la styliser.

Voici tous les éléments WPConsent qui se trouvent en dehors de la shadow root, en un seul endroit :

• #wpconsent-container est l'élément auquel la bannière est attachée, et la cible des propriétés héritées et des propriétés personnalisées.
• .wpconsent-cookie-policy et les cinq classes à l'intérieur sont la page de politique de cookies.
• .wpconsent-iframe-placeholder et les trois classes à l'intérieur sont les espaces réservés de contenu bloqué.
• .wpconsent-open-preferences est le bouton que le shortcode de préférences de WPConsent génère, où que vous l'ayez placé.

Ce dernier prend son apparence de votre thème, comme tout autre bouton sur vos pages. Une courte règle lui donne sa propre apparence :

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

Notre guide sur l'ouverture du panneau de préférences avec un lien personnalisé explique comment ajouter ce bouton à une page ou à un menu.

C'est tout ! Vous savez maintenant quelles parties de WPConsent acceptent le CSS ordinaire, lesquelles nécessitent une approche différente, et où conserver les règles. Pour modifier les couleurs, l'espacement et les coins de la bannière, consultez notre guide sur la personnalisation de la bannière avec des variables CSS.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus courantes sur la stylisation de WPConsent avec votre propre CSS.

Pourquoi ma règle sur .wpconsent-banner est-elle ignorée ?

Cet élément vit à l’intérieur d’une shadow root, donc un sélecteur dans votre feuille de style n’a rien à trouver. Cela est vrai, quelle que soit la spécificité de votre sélecteur, et que vous ajoutiez ou non !important. La section Pourquoi le CSS de votre thème ne change-t-il pas la bannière ? ci-dessus explique ce qu’il faut utiliser à la place.

Puis-je mettre la règle sur :root à la place ?

Pas pour la bannière. Votre thème déclare des propriétés héritées telles que font-family sur body, qui est plus proche de la bannière que html. Les valeurs des propriétés personnalisées de WPConsent sont encore plus proches, utilisez donc #wpconsent-container.

Ai-je besoin de !important sur l’une de ces règles ?

Non. Aucun des exemples de ce guide ne l’utilise, y compris les règles de politique de cookies et de placeholders. Le seul endroit où il est vraiment nécessaire est la couleur d’arrière-plan du bouton de paramètres flottant, que le guide sur les variables CSS couvre.

Puis-je styliser l’icône de fermeture de la bannière avec ::part() ?

Non. L’icône de fermeture est le seul élément de la bannière auquel WPConsent ne donne pas de nom public, il n’y a donc pas de partie à sélectionner. Sa taille et sa couleur proviennent de deux propriétés personnalisées, que notre guide sur la personnalisation de la bannière avec des variables CSS couvre.

Où dois-je conserver le CSS ?

Apparence » Personnaliser » CSS additionnel est l’option la plus simple. WordPress l’imprime après les feuilles de style des plugins, vos règles l’emportent donc en cas d’égalité de spécificité. Une feuille de style de thème enfant ou un plugin d’extraits de code fonctionnent également, avec un sélecteur supplémentaire ajouté à toute règle qui fait égalité.

Mon CSS survivra-t-il à une mise à jour du plugin ?

Oui. Les règles résident dans votre thème, le personnaliseur ou votre plugin d’extraits de code plutôt qu’à l’intérieur de WPConsent. La mise à jour du plugin les laisse intactes.

Puis-je changer le texte de la bannière avec du CSS ?

Le texte est un paramètre plutôt qu’une chose à styliser, et WPConsent a des champs pour tout cela. Notre guide sur le contenu et le texte de la bannière explique la notification, les libellés des boutons et les titres des panneaux.

Où trouver la feuille de style de la bannière de WPConsent ?

Elle est chargée depuis l’intérieur de la shadow root plutôt que depuis la page elle-même. Les feuilles de style WPConsent que vous verrez sur la page sont celles pour les placeholders de contenu bloqué et celle pour les tableaux de politique de cookies. Celle de la politique de cookies ne se charge que sur les pages qui contiennent le shortcode.

Ai-je besoin d’une licence payante pour tout cela ?

Non. La shadow root, le sélecteur de conteneur, les classes de politique de cookies et les classes de placeholder fonctionnent de la même manière à tous les niveaux de licence. Toutes les règles de ce guide s’appliquent à n’importe quel site WPConsent.