[WordPress] Personnaliser son thème en éditant les styles CSS

Les options de personnalisation des thèmes WordPress sont parfois un peu limitées (surtout dans les versions gratuites). Je vous partage ci-dessous quelques vidéos et astuces pour comprendre les fonctionnalités de base pour personnaliser la feuille de style CSS. Bienvenue dans le monde merveilleux du langage HTML…!

CSS: qu’est-ce que c’est ?

Comment ça marche ?

Repérez les lignes de codes à ajouter :

  • Faites des recherches à partir de votre navigateur Internet préféré (comme Lilo 🙂 ), ou directement dans des « bibliothèques » telles celle-ci.
  • Utilisez l’outil d’inspection :
    • rendez-vous sur votre site Internet via votre navigateur Internet (comme le ferait n’importe quel internaute),
    • Sélectionnez l’élément de votre site que vous aimeriez changer (par exemple diminuer la taille des titres), faites un clic droit dessus avec votre souris et sélectionnez « Inspecter », ça ouvre une fenêtre avec pleins de codes,
    • Dans la partie « style » à droite (entouré en rouge sur l’image ci-dessous) vous pouvez essayer de modifier des éléments pour voir ce qu’il se passe et repérez ainsi la ligne de code que vous devrez copier-coller dans votre feuille CSS.

Puis ajoutez votre ligne de codes :

  • Soit dans la partie « CSS additionnel » dans la section « personnaliser » de votre thème si votre thème propose cette fonctionnalité.
  • Soit en créant un thème enfant.

Pour aller plus loin

Comprendre les bases des langages :

  • HMTL :
    • élément: (p, a, h1, h2
    • balise : autour de l’élément <p>
    • attributs : <p style= »text-align: center; »>

  • CSS :
    • sélecteur : à quel élément le style s’applique
    • propriété : quel style va être appliqué
    • valeur : quel comportement de style

Remarques :

Class & id

les attributs « class » et « id » sont furent créés pour pouvoir appliquer différents styles à des éléments de même type. On attribue « class » à certains éléments et ensuite on applique des styles à cette « class ». On met un « point » (.) devant le nom de la « class » et un dièse (#) pour les « id ». La seule différence entre les « class » et les « id » est que vous ne pourrez utiliser qu’un seul id par page. Les « id » sont donc à réserver pour des éléments uniques. Voir la vidéo par ici.

* (étoile) et sélecteurs avancés

L’étoile est un sélecteur universel. Il permet d’appliquer un style à tous les éléments d’une page. Il existe aussi d’autres possibilités pour appliquer un style à certains éléments en fonction de critères, etc… Voir la vidéo ici pour en savoir plus.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *