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.
https://www.youtube.com/watch?v=yCdbqqY2Evw
Générez, installez et activez 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.