Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Inspecter son code (2)

- Auteur : Si tu suis mon regard

Que de temps j'ai perdu à chercher comment modifier une couleur ou une police sur son blog ! J'ai présenté il y a peu comment inspecter son code (voir lien en bas de page) et j'ai depuis beaucoup utilisé cet outil offert par les navigateurs pour modifier les thème des blogs que je teste sur la nouvelle plateforme.

Je rappelle le principe sur Chrome ou Firefox : clic droit sur un élément, clic sur examiner ou inspecter l'élément. Voilà ce que ça donne avec le titre de ce blog.

Comment inspecter un élément du code

Comment inspecter un élément du code

Dans la partie droite se trouvent les morceaux de code CSS qui correspondent au style du titre. Certaines lignes sont barrées. C'est dû au principe du CSS qu'on peut résumer ainsi.

Le style de l'élément A définit le style de l'élément B si que B est dans A... Mais on peut définir un style pour l'élément B qui annule alors le style de l'élément A pour B.

Ainsi, dans l'exemple ci-dessus, la police du body (tout le blog) - "Helvetica Neue" - n'est pas celle du titre (elle est barrée) car la police 'TeXGyreAdventor' a été choisie pour h1 (élément titre).

Une personne qui n'aurait pas réalisé ce thème et voudrait modifier le titre changerait dans le CSS l'élément h1.

Le style d'un élément n'hérite pas d'une seule balise. Vous remarquerez que les deux premières lettres du titre du blog sont en orange. Grâce à l'inspecteur, on retrouve à droite le code HTML du titre :

<header id="mainheader">
<h1>OB<span>New Plateform</span></h1>
</header>

Partie "OB"

La couleur orange des deux premières lettres vient de #mainheader h1 ; les deux lettres OB héritent de la police de h1.

Style de OB

Style de OB

Partie "New Plateform"

Pour les autres lettres, comme elles sont comprises dans la balise span, elles ont comme couleur celle de #mainheader h1 span (la couleur de #mainheader h1 est barrée) mais toujours la police de h1 parce qu'aucune police n'a été définie pour #mainheader h1 span. C'est le plus petit qui gagne pour une fois.

style de NewPlatform

style de NewPlatform

En cas de doute sur le style d'un élément, c'est un moyen rapide et pratique de savoir de quoi il en retourne.

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Naqine Quinn 07/10/2012 21:48

Hé bien moi je trouve que c'est très compliqué

Jean-Claude 11/10/2012 06:23

Tout simple ...
Il semble qu'il soit nécessaire de ressembler à un informaticien pour pouvoir gérer un blog sur la future plate-forme ; du moins si l'on veut qu'elle ressemble à quelque chose ...
C'est clair : je ne compte pas devenir informaticien ... Plus de mon âge ! J'abandonne et me tourne déjà vers une autre hébergeur de blog, en espérant que lui aussi, un jour proche, ne suive pas la même évolution !

Iv-oam 06/10/2012 09:36

merci Alice.
"approfondie" je ne sais pas. si on connaît un peu le langage CSS, changer un design sur la nouvelle plateforme n'est pas très compliquée, surtout avec cet outil

Alice 05/10/2012 18:45

Bravo pour cette recherche approfondie que tu as entreprise et que tu nous transmets, STSMR ! Tu deviens très calé en progressant à pas de géant, me semble-t-il ! ;-)

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...