Miamondo

CMS

  • Modifier le CSS de son site grâce aux outils de développement proposés par les navigateurs

    Bonjour,

    Il y a quelques années, je me suis initié au HTML5 et au CSS3 grâce à l'excellent livre de Mathieu Nebra, fondateur du site Openclassrooms. À l'époque où je l'ai acheté, ça s'appelait encore le Site du Zéro. Ce manuel très pédagogique m'a permis de créer et de mettre en ligne la toute première version de Miamondo. Certes, le site était rudimentaire mais il m'a donné le goût de l'écriture, et cette passion ne m'a plus quitté. 

     

    17208609

     

    En 2014, j'ai abandonné mon site "roulé à la main sous les aisselles" pour en recréer un nouveau sur Wordpress.com. J'en ai profité pour changer de nom de domaine. Mais en début d'année, suite à des problèmes d'extensions plus qu'énervants, j'ai décidé de changer de crèmerie et de migrer sur e-monsite.com, un système de gestion de contenu installé à Amiens, dans les Hauts-de-France. Ce n'est pas open-source mais c'est artisanal (au bon sens du terme) et ça me convient tout à fait. En plus, ils sont les champions du référencement, parait-il.

    e-monsite.com propose toute une palette de thèmes plus ou moins configurables. Malheureusement, il arrive que les options proposées ne suffisent pas à obtenir la personnalisation que l'on souhaite. Il faut alors modifier le CSS. Tout comme chez Wordpress.com, cette option est présente. Le problème, c'est qu'il est difficile de s'y retrouver dans la feuille de style CSS. À quoi correspond tel ou tel id, telle ou telle class? Mystère...

    C'est là qu'interviennent les outils de développement présents dans les navigateurs. Personnellement, j'utilise Brave. Pour accéder à cette fonctionnalité, il faut cliquer sur le menu hamburger, en haut à droite. Ensuite, il faut descendre et cliquer sur Plus d'outils et enfin sur Outils de développement. Une fenêtre latérale va s'ouvrir, qui dévoile le code HTML, c'est-à-dire le fond (contrairement au code CSS3 qui s'occupe de la mise en forme). Et ce qui est intéressant, c'est que lorsqu'on clique sur la petite flèche au début d'une ligne, la zone du site qui lui correspond est mise en surbrillance. Cela permet de localiser précisément l'endroit à modifier.

    Par exemple, le titre du site ne me plait pas. Il n'y a pas d'espace entre le texte Miamondo et la bordure blanche. De plus, la bordure blanche est collée au menu horizontal. C'est vilain comme tout! Le problème, c'est que les options de configuration standard ne me permettent pas de modifier cette partie précise. Je dois donc me coltiner la feuille de style CSS mais j'ignore parfaitement à quoi correspond la zone à modifier. 

     

    Tool5

     

    C'est cet outil de développement qui va me renseigner. Je précise tout de même qu'un minimum de connaissances en HTML5/CSS3 est requis. Il faut connaitre la signification des balises et savoir comment on fait le lien entre le code HTML5 et la feuille de style CSS3 (notamment avec les balises id et class). Cliquez sur l'image ci-dessous pour l'agrandir à sa taille originale. Le code HTML5 est muni de petites flèches que j'ouvre au fur et à mesure de ma progression. Les parties que je déplie sont mises en surbrillance, soit en bleu, soit en orange, soit en vert. Le code couleur n'est par là pour faire joli! J'y reviendrai plus tard. Au bout d'un moment, la zone que je veux modifier est mise en surbrillance. J'ai touché le but. Je sais qu'elle s'appelle .cover-img. Parfait! 

     

    Tool

     

    Quelles sont les modifications que je souhaite apporter à la feuille de style CSS?

    • Je veux un espace de 20px entre la bordure blanche et le titre Miamondo. Ça s'appelle le padding.
    • Je veux également un espace de 20px entre la bordure blanche et le contenant noir. Ça s'appelle le margin.

    Je rajoute ces informations dans la zone du thème qui gère les modifications CSS. Là encore, je vous invite à cliquer sur l'image pour l'agrandir. Les instructions que j'ai rajoutées sont celles qui se trouvent sous la ligne grisée.

     

    Tool6

     

    J'enregistre mes modifications. Un petit coup de F5 pour actualiser la page et le tour est joué! Isn't it marvelousse? Et ce n'est qu'un exemple parmi d'autres.

     

    Tool3

     

    Peut-être que pour vous, ça n'a rien d'extraordinaire. Mais pour moi, c'est une vraie découverte que j'avais envie de partager. Du coup, ça m'a donné envie de me replonger dans le HTML5/CSS3 pour creuser cette fonctionnalité. Dernière chose, dans un précédent paragraphe, je vous ai parlé du code couleurs, non pas celui qui colore le code HTML mais celui du schéma sur la capture d'écran ci-dessous. Eh bien, il permet de visualiser les zones qui correspondent au padding et celles qui correspondent au margin. Encore quelque chose de fort utile!

     

    Tool4

     

    Pour conclure, je dirais que je me suis longtemps posé la question de l'utilité d'un tel outil dans mon navigateur. Je me doutais bien que ça devait servir à quelque chose mais à quoi? Mystère... Maintenant, je sais que ce n'est pas seulement pour faire joli. Cela dit, le système a ses limites puisque sans accès en écriture au code HTML (ce qui est bien évidemment le cas), il n'est pas possible de rajouter des balises id ou class, condition sine qua non pour pouvoir modifier le CSS.