Salut tout le monde! Je vais vous parler ici d’un sujet qui doit rendre fou pas mal de personnes car il est difficile de changer un élément sur son site parce que notre thème ne nous le permet pas dans ses possibilités de personnalisation et lorsqu’on essaye de comprendre le CSS de son thème, ça devient littéralement du « chinois ». Alors, je vous explique comment je suis arrivée à changer les éléments qui me dérangeaient sur mon site grâce au CSS, c’est peut-être une explication très basique (je ne suis pas devenue une pro, loin de là) mais avoir enfin compris comment ça marchait m’a littéralement simplifié la vie, donc, je partage avec vous ce qu j’ai réussi à comprendre 😉
Comme vous avez pu le voir mon thème a été largement modifié depuis que j’ai acheté mon hébergeur donc forcément ce tutoriel aidera ceux ou celles qui en ont un aussi! Ce n’est malheureusement pas pour la version gratuite de wordpress, je pense! Voilà un aperçu de ce à quoi il ressemblait avant 🙂

Capture d’écran (18)
J’ai donc longuement chipoté à mon blog à un tel point que j’ai eu un méga souci avec mon tableau de bord où j’ai littéralement paniqué (pour ceux qui s’en souviennent :p ). J’ai cru que c’était à cause de mes modifications du CSS mais rien à voir! C’était dû au fait que j’avais installé un plugin (extension) qui n’était pas compatible avec mon thème et donc cela a créé un gros bug! Donc si vous voulez ajouter un plugin, vérifiez bien cela!

Capture d’écran (17)

A propos de plugin, je vous conseille Easy Google Fonts pour la police de votre blog, il s’installe directement dans la fonction de personnalisation de votre thème. Il permet de modifier l’apparence de votre police et votre couleur et normalement la taille mais ça ne fonctionne pas, j’ignore pourquoi mais j’ai tout de même pu modifier la taille du titre de mon blog que je trouvais trop petite pour l’agrandir un peu grâce au CSS. Alors comment j’ai fait?

J’ai tout d’abord installé Firebug, un module hyper pratique pour t’aider à trouver le CSS qui correspond à la partie que tu aimerais modifier sur ton blog. Ce module est pour Firefox mais normalement, il peut aussi s’installer sur Google Chrome! 🙂

A quoi sert ce module? Comme je l’ai dit à localiser ce que tu voudrais changer sur ton thème. Comment fait-on? C’est tout simple, va sur ta page, clique droit sur ce que tu aimerais modifier et clique sur « Inspecter l’élément Firebug »

Capture d’écran (19)

Ici, j’ai sélectionné le titre. Vous verrez que si on passe sa flèche sur le lien HTML, le titre devient bleu sur le blog, cela vaut pour tous les autres éléments où on passe la flèche sur le HTML correspondant à la partie du blog.

Capture d’écran (20)

Donc, comme vous pouvez le voir Firebug est séparé en deux petites fenêtres, la première la plus grande montre le HTML de ton site et la seconde montre une partie de ton CSS (celle que tu as sélectionnée) sous l’onglet « style ». De plus, on peut voir que si je glisse mon curseur sur la mention « color » avec les chiffres à côté, on me montre un mini rectangle de la couleur du titre de mon blog, c’est très intéressant car vous verrez que parfois votre thème ne propose pas de modifier la couleur d’un titre ou même d’une simple ligne que vous aimeriez changer alors, il faut se tourner vers votre css, donc comme vous le voyez ci-dessous, j’ai changé la couleur de mon titre, je suis passée du noir au rose! Enfin, je préfère mon titre en noir personnellement, c’est juste un test pour vous montrer.

Capture d’écran (21)

Capture d’écran (22)

Mais vu que j’ai voulu changer sa taille voilà ce que j’ai fait

Capture d’écran (23)

Capture d’écran (24)

Vous voyez, je suis passée de « 35px » à « 80px », la taille de mon titre s’est donc largement agrandie, évidemment là, c’est toujours à titre d’exemple que je vous le montre!

Le souci, c’est que une fois que vous fermez Firebug et votre site et bien les modifications que vous avez faites ne sont pas enregistrées. Firebug vous aide à localiser votre CSS et à faire des petits essais mais ne permet pas de changer votre site, pour cela, vous devez vous rendre dans les fichiers de votre hébergeur là où se trouvent les détails du contenu de votre site wordpress. Moi, je suis sur One.com mais vous devez y avoir accès peu importe votre hébergeur à mon avis.

Capture d’écran (7)

Vous devez tomber sur ces fichiers ci-dessous, ensuite cliquez sur « wp-content » et ensuite sur « themes »

Capture d’écran (8)

Capture d’écran (25)

Alors là vous devez cliquer sur le nom de votre thème que vous avez choisi, si vous en avez installé plusieurs (pour les essayer comme moi) et bien défilez jusqu’à trouver le votre que vous avez activé 🙂

Capture d’écran (28)

Une fois dans les fichiers de votre thème, vous cliquez sur « style.css »

Capture d’écran (29)

Double-cliquez ou cliquez dessus puis sur modifier pour voir ceci

Capture d’écran (30)

Maintenant que fait-on? On est face à un fichier rempli de codes qui semblent ne rien vouloir dire et pourtant on sait que pour notre site chaque code à sa signification, en fait c’est son apparence en version codée, donc il faudra modifier cela avec BEAUCOUP de précautions!! Il faut donc chercher ce qu’on veut modifier. Oui mais comment? Tout d’abord revenons à Firebug et à ce qu’on a essayé de changer

Capture d’écran (23)

Si on regarde plus près qu’est-ce qu’on voit dans ce que j’ai entouré? « .site-title… » On note donc ça quelque part, c’est un petit un mot-clé pour nous repérer et ensuite, on revient sur le fichier codé du CSS. Au lieu de défiler tout le fichier, on utilise la technique très simple du « ctrl + f »

Capture d’écran (31)

Alors là, on te montre le premier « site-title » que ton fichier trouve donc tu glisses jusqu’à trouver exactement le même code que tu as vu sur Firebug

Capture d’écran (32)

Mais que vois-je?!! C’est exactement la même chose, alors, avec précaution toujours, on change le chiffre du px à celui qu’on avait trouvé à notre goût sur Firebug donc pour l’exemple, c’était 80px

.site-title {
font-size: 35px;
line-height: 24px;
}

va devenir

.site-title {
font-size: 80px;
line-height: 24px;
}

On enregistre tout et vous pourrez aller voir sur votre site que la taille de votre police a changée! 😀

Un autre exemple important à vous montrer, c’est si vous voulez changer quelque chose qui a avoir avec un plugin comme Jetpack. J’ai voulu changer la taille de l’image de mon profil Gravatar (jetpack) car je la trouvais trop grande, alors au lieu d’aller dans le dossier « thèmes » de vos fichiers il faut aller sur « plugins »

Capture d’écran (9)

Capture d’écran (10)

Capture d’écran (11)

Capture d’écran (12)

donc après avoir cliqué sur « jetpack.css », vous tomberez sur ça

Capture d’écran (14)

N’ayez crainte, c’est le même processus sauf qu’il n’y a pas de paragraphes ici, retrouvez ce que vous voulez changer grâce à « ctrl + f » et changez le! Moi, c’était ceci

.grofile-thumbnail {
    max-width: 100%;
    width: 300px;
}
J’ai changé le chiffre 500 en 300 et voilà, l’image était moins grande du coup 🙂
Voilà les gars, j’espère ne pas trop vous avoir ennuyé avec toutes mes photos mais en cherchant de mon côté, je me suis rendue compte que pour les explications les images valent milles mots!
Si vous en savez d’avantages sur le sujet, n’hésitez pas à me dire quoi! A très vite les loulous 😉

 

 

 

10 thoughts on “Customiser son thème grâce au CSS!”

    1. Merci! 🙂 Oui, tu verras ça t’aidera car ce customiser son thème wordpress.org, ce n’est pas aussi simple qu’on le croit mais bon, en cherchant un peu y a moyen ^^

  1. J’aurai tellement aimé tomber sur ton article plus tôt ! Ça m’aurait faciliter la tâche pour la création de mon blog « ladamechocolat.com ». C’est vrai qu’il y a beaucoup d’infos sur le net, donc c’est pas toujours facile de si retrouver. Et surtout de trouver une méthode à la fois facile, bien expliquée et avec des exemples visuels 😉 Merci pour cet article

    1. C’est gentil ^^ Oui, c’est pour ça que j’ai écris cet article car moi aussi j’aurais aimé tomber sur un article comme le mien! :p J’ai fini par comprendre un peu en cherchant à gauche et à droite et finalement par moi-même, c’est très compliqué à trouver et finalement pour changer des trucs de base, ce n’est pas aussi difficile à faire, il suffit juste de savoir comment 🙂

Laisser un commentaire