Reprendre à la main le style d’une liste de documents, à coups d’inspecteur
Trouver les bons sélecteurs avant même d’écrire une ligne de style
La liste est en ligne, elle affiche les bons fichiers, et c’est déjà l’essentiel. Reste qu’elle ne ressemble pas au reste du site : le fond des lignes tire vers un gris qui n’est pas celui de vos pages, la bordure est plus marquée que partout ailleurs, et le bouton de téléchargement a des angles droits quand tous vos boutons sont arrondis. Sur une page d’accueil soignée, ça se voit.
Pour y toucher, la manœuvre est toujours la même. Vous ouvrez la page, vous faites un clic droit sur une ligne, vous inspectez. Vous cherchez dans l’arborescence quel bloc porte le fond, lequel porte la bordure, comment s’appelle la classe du bouton. Vous notez trois ou quatre noms de classes, vous les recopiez dans le champ de CSS additionnel de votre thème, et vous rechargez. La couleur ne bouge pas : une autre règle est plus forte que la vôtre. Vous ajoutez un sélecteur, puis un autre, jusqu’à ce que ça prenne.
Ce n’est pas difficile, c’est incertain. Vous ne savez pas à l’avance combien de temps ça va prendre, et vous n’êtes jamais sûr d’avoir attrapé tous les états : le survol du bouton, la ligne sans date, la liste vue sur un téléphone. Chacun se découvre après coup, souvent parce que quelqu’un vous le signale.
Le style écrit dans les fichiers de l’extension disparaît à la mise à jour suivante
L’autre chemin est plus direct et plus coûteux : ouvrir la feuille de style de l’extension et y changer les valeurs sur place. Ça marche tout de suite, et ça tient jusqu’à la mise à jour suivante, qui remet le fichier d’origine. Le style disparaît alors sans prévenir, un jour où vous ne regardiez pas la page.
Le symptôme est reconnaissable : une modification qui « ne tient pas », qu’on refait deux ou trois fois avant de comprendre que c’est la mise à jour qui l’efface. À ce stade, beaucoup renoncent et laissent la liste telle quelle — ce qui est un choix raisonnable, mais qui laisse une page bancale sur un site par ailleurs cohérent. C’est d’autant plus dommage que publier ces documents sans recopier leurs adresses à la main était justement ce qui avait fait gagner du temps au départ.
Régler les couleurs de sa liste de documents depuis l’administration du site
Un aperçu qui montre le résultat avant d’enregistrer
L’Extension WordPress « Liste PDF » réunit ces réglages dans un onglet dédié de son administration, et ils portent sur les trois parties d’une ligne. Pour la ligne elle-même : sa couleur de fond, la couleur de sa bordure et l’arrondi de ses angles. Pour les textes : la couleur du titre du document et celle de la date affichée devant lui — laissée vide, la date reprend la couleur du titre. Pour le bouton de téléchargement : sa couleur de fond, celle qu’il prend au survol, la couleur de son texte et l’arrondi de ses angles.
Chaque réglage s’applique immédiatement à un aperçu affiché à côté, rendu avec les styles réels du site public. Vous voyez donc le résultat avant d’enregistrer, et sans quitter l’écran : plus d’aller-retour entre l’administration et la page pour vérifier une nuance de gris. Les valeurs choisies valent pour toutes les listes produites par les shortcodes ; le module Divi 5, lui, garde son propre panneau de réglages, par instance.
Ce qui sort du cadre des réglages : une feuille de style recopiée dans le thème
Les réglages couvrent les couleurs et les angles, pas la typographie ni les espacements. Pour aller plus loin, l’extension fournit sa feuille de style en copie : un bouton la dépose dans votre thème enfant, dans un dossier qui lui est réservé. C’est cette copie que le site charge ensuite, et c’est elle que vous modifiez.
La différence avec le contournement décrit plus haut tient en une phrase : le fichier vous appartient, il n’est pas remplacé par les mises à jour. Vous n’avez pas non plus à deviner les sélecteurs — ils sont déjà écrits dans la copie, avec leurs valeurs d’origine, et il n’y a qu’à les changer.
Régler les couleurs, les bordures et les arrondis de vos listes de documents fait partie de la formule Essentiel de l’Extension WordPress « Liste PDF », qui comprend aussi la feuille de style recopiable dans votre thème : vous pouvez accorder vos listes de documents à votre charte sans passer par l’inspecteur du navigateur.
Photo par cottonbro studio via Pexels