Sélectionner une page

Dans cet article de la catégorie « coder soi-même », je vais aborder :

le CSS (ouhhh le gros mot :P)

 

Pour commencer, qu’est-ce que le CSS ?

 

Selon notre cher ami Wikipédia , l’abréviation CSS vient de l’anglais Cascading Style Sheets. C’est un langage informatique “qui décrit la présentation des documents HTML et XML”. En gros, le CSS nous permet de mettre en forme nos pages web. Les couleurs, les polices, les tailles, c’est le CSS qui gère !

Et pour nos sites WordPress, ben c’est pareil ! Lorsque vous voulez modifier la taille ou la couleur de votre texte dans votre partie administration, et bien en fait cela modifie le CSS mais sans avoir besoin de savoir coder. Les joies de WordPress !! 😀

Mais ici je vais aller un peu plus loin et vous montrer où modifier votre CSS. Cela peut vous être utile si vous avez besoin de modifier des choses qui ne sont pas facilement accessible sur l’éditeur de WordPress.

 

Première possibilité : modifier son CSS directement sur WordPress

 

Ici je vais vous montrer des exemples pour le thème DIVI et pour le thème de base twentyseventeen.

RECOMMANDATION IMPORTANTE: je vous conseille de toujours créer un thème enfant avant d’apporter toute modification sur votre thème ! Vous pouvez voir comment le faire dans cet article ! Et surtout, pensez-bien à l’activer dans « apparence », « themes ». 😉

Mais revenons à notre CSS.

Pour modifier le CSS de votre thème, vous avez plusieurs possibilités. Sur votre partie admin, vous pouvez aller dans apparence, puis personnaliser et vous tombez sur l’écran suivant.

 

capture écran

 

Et là vous voyez en bas à gauche un petit onglet CSS additionnel. Lorsque vous cliquez, vous voyez apparaître cette colonne à gauche de votre écran.

 

capture écran

 

Alors chez vous, la colonne sera certainement vide. Pour ma part j’ai modifié déjà un peu mon CSS. C’est pour cela que j’ai quelques lignes de code.

Donc c’est ici que vous pouvez écrire vos lignes de CSS pour modifier votre site selon vos besoins. Moi ici par exemple j’ai fait en sorte que le centrage de mon image d’accueil se fasse sur le centre et sur le bas de ma photo. 😉

 

 

 

 

 

 

Deuxième solution, (cette fois pour le thème Divi), je vais sur l’onglet Divi sur mon tableau de bord et tout en bas de la page j’ai cet écran :

 

capture écran

 

Je peux donc modifier mon CSS ici et on retrouve bien les mêmes choses que lorsque l’on est sur le personnaliseur de thème.

 

Enfin, dernière possibilité, vous revenez sur votre tableau de bord, vous retournez sur apparence et cette fois vous allez dans Editeur. 

Un écran va s’afficher dans lequel WordPress vous prévient qu’il est fortement conseillé d’avoir réalisé un thème enfant avant de modifier cette feuille CSS. Cela évitera, entre autre, que toutes vos modifications soient perdues à la prochaine mise à jour de votre thème. 😉

Donc une fois qu’on a bien tout lu et qu’on a bien fait notre thème enfant, on clique sur “J’ai compris” et là on tombe sur la page style.css de notre thème enfant où l’on peut apporter toutes nos modifications.

 

Deuxième possibilité : modifier son CSS en accédant directement aux fichiers .css

 

Pour cela on a besoin d’un serveur FTP (File Transfert Protocol). Les plus connus sont Filezilla pour Windows et Cyberduck pour MacOS. Pour ma part j’utilise Filezilla et les captures d’écran seront donc issues de ce logiciel.

On ouvre donc Filezilla, et on a ça :

 

capture écran

 

On entre nos codes dans les cases hôte, identifiant et mot de passe (ces codes vous ont été envoyés par votre hébergeur lors de l’achat de l’hébergement de votre site) et on peut laisser la case Port vide. Et on clique sur Connexion rapide.

Et là, dans la partie droite de FileZilla, on voit apparaître tous nos fichiers présents sur notre hébergement.

Pour accéder à la feuille de style principale on suit le chemin wp-content, thème, divi-child (si vous utilisez le thème Divi et que vous avez bien fait un thème enfant 😉 ). Et là on retrouve tous nos fichiers CSS dont le fichier principal style.css.

Il faut ensuite télécharger ce fichier pour pouvoir le modifier (un double-clic dessus et le fichier se téléchargera dans votre répertoire à droite (si le répertoire est votre bureau par exemple, le fichier se téléchargera sur votre bureau). Il faut ensuite aller ouvrir ce fichier avec un éditeur de texte (bloc-notes pour le super basique mais pas assez lisible à mon goût. Je vous conseille plutôt SublimeText en logiciel gratuit. Il met les éléments en couleurs et c’est ainsi plus facilement lisible 🙂 ).

Une fois que vous avez modifié votre fichier avec les éléments que vous vouliez, vous retournez sur Filezilla. Là vous sélectionnez votre fichier et vous le faîtes glisser de la partie gauche à la partie droite de votre écran. Cela le mettra dans le même répertoire qu’auparavant. Vous cliquez ensuite sur “remplacer” pour remplacer l’ancien fichier CSS par le nouveau !

 

Il n’y a plus qu’à actualiser votre site et vous devriez voir les changements apparaître 😀

 

J’espère que je suis suffisamment entrée dans les détails pour cet article “où modifier mon CSS”! Mais sans vous avoir perdu pour autant  😉

 

Maintenant j’ai besoin de vous ! (Ben oui, que je ne sois pas la seule à travailler 😛 )

C’est bien beau d’avoir vu où modifier le CSS, mais encore faut-il savoir quoi modifier et comment ! Et c’est là que vous intervenez ! Qu’aimeriez-vous apprendre à modifier : plutôt des couleurs, plutôt des polices, plutôt des alignements d’éléments, etc. Dites-moi tout et comme ça je ferais mes prochains articles en fonction de vos besoins !

 

Belle semaine à tous et à très vite pour de nouveaux articles !