Modification du CSS du site

Le thème graphique disponible peut être modifié à votre guise par les CSS (Cascading Style Sheets). WordPress propose dans le menu Apparence/Custom CSS de surcharger le thème actif. C’est à dire que  vos modifications vont prendre le pas sur le thème de base.

Personnaliser son site en modifiant ces CSS

css

Par exemple, l’image ci-dessus est présenté dans l’article en back-office ne pleine largeur et sans alignement particulier. Grace aux CSS, nous pouvons réduire l’image et la centrer en saisissant la le cadre réservé aux Custom CSS:

.entry-content img {
  1. width: 300px;
  2. display: block;
  3. margin-left: auto;
  4. margin-right: auto;
  5. float: none;

}

Bien sur il ne s’agit pas ici de donner un cours de CSS mais des pistes et des outils pour que vous puissiez au maximum vous débrouiller seul dans des modifications simple.

Décryptons le bloc d’instructions CSS:

Un bloc d’instruction CSS est toujours constitué de la manière:

nom_du_selecteur{
instructions: valeur;
}

.entry-content img donne au navigateur le nom de l’élément HTML à modifier en suivant les instruction qui suivent. Ensuite vient le moment de dire au navigateur ce qu’il doit faire pour afficher la page correctement.

Ici, nous demandons à ce que toutes les images (img) présentes dans la div possédant la classe entry-content aient une largeur de 300px et soient centrées. mais nous pourrions imaginer changer les couleurs, les tailles de police ainsi que les largeurs de colonne par exemple.

Comment savoir sur quel sélecteur intervenir?

Nos navigateurs modernes embarquent nativement des outils pour les développeurs. Il suffit en général (au moins sous Mozilla Firefox et Google Chrome) d‘appuyer sur la touche F12 de votre clavier pour activer ces fonctionnalités. Par habitude et préférence nous utiliserons Chrome pour cette partie.

css-tool

Votre écran est maintenant divisé en 3 parties:

  • La partie supérieure où vous visualisez votre page.
  • La partie inférieure gauche où vous visualisez le code HTML généré par WordPress pour afficher votre site
  • La partie inférieure droite où vous trouverez un onglet « Styles » comprenant tous les styles CSS chargés par WordPress. En effet, vous avez le style de votre thème mais aussi ceux de tous les plugins qui sont ajoutés.

css-tool-name

Il y a 2 outils important qui sont représentés ci dessus par une loupe et une sorte de Smartphone. La loupe va permettre d’inspecter le code/la page à la recherche du sélecteur miracle tandis que l’icone smartphone ouvrira votre page dans la résolution de la plupart des appareils du moment.

L’outils qui nous intéresse est la Loupe:

css-tool-visu

Concrètement, les images de nos articles sont situé dans la division ayant la classe « entry-content »:

css-tool-html

Dorénavant nous savons que pour modifier l’apparence d’une image a l’intérieur d’un article il faudra jouer avec .entry-content (le point signifie class) et img. Les CSS étant des feuilles de styles en cascade, nous utilisons donc le sélecteur .entry-content img. Si vous utilisiez que img, vos modifications CSS auraient un impacte sur toutes les images. Afin de ne pas avoir d’effet de bord, il faut au maximum être le plus précis possible.

L’illustration précédente vous montre le code HTML de la page que vous pouvez modifier (rien que pour vous et tester le rendu directement) en double cliquant sur la ligne choisie.

Sur la partie de droite:

css-tool-css

Vous pourrez modifier le style attribué par les CSS en place pour tester vos modifications avant de les copier/coller dans la fenetre « Custom CSS » de votre thème.

Exemple: décochez « width: 90% » et les images a l’écran vont reprendre la totalité de leur espace en passant à 100%. Attention si vous attribuez une largeur (width) en px… ceci risque fortement de casser le responsive du site.

Une fois vos Custom CSS écris n’oubliez pas de les sauvegarder:

css-tool-save