Cascading Style Sheet - 2
Par silken le vendredi 31 août 2007, 00:30 - Trucs et astuces du bloggeur - Lien permanent

Passons à présent aux choses sérieuses et amusantes...
Premier exemple : Changer la couleur du texte d'un billet
Au risque de me répéter, je voudrai juste signaler qu'il vous est nécessaire d'avoir pris connaissance des bases du langage HTML, d'avoir compris en gros ce qu'est une balise, ce qu'est une classe (et éventuellement une identité), d'avoir jeté un oeil aux tutoriaux :) . Bref, je vais supposer que vous avez ces bases.
Un exemple : Couleur du texte d'un billet
Allez, c'est parti, vous vous lancez dans la reconfection de votre feuille CSS ! mais par où la prendre cette feuille ? par quel coin, quel côté ?
Prennons donc pour commencer quelque chose d'assez simple : la couleur du contenu des billets.
Repérer la class
Première chose à faire : il vous faut repérer la CLASS qui gère les paramètres du texte des posts (billets).Plus facile à dire qu'à faire ??
Que Nenni, mes amis. C'est assez trivial :
Click droit dans la page et faites en sorte d'afficher la source (le code HTML) de votre document. Recherchez à l'intérieur du code source un des titres de vos billets (notez que la combinaison Pomme+F (ou CTRL+F pour les PC) qui lance l'outil de recherche est extrêmement utile ici). Prenons pour mon exemple le titre du billet "Spotlight, mon Amour"
La première fois où vous le rencontrerez dans le code, cela sera probablement dans une ligne similaire à celle-ci :
Recherchez plutôt quelque chose qui ressemble à celà :
En jetant un oeil attentif, vous verrez que le contenu de votre billet suit de peu cette ligne de code. On est donc bien dans ce qui concerne l'affichage du billet (le mot post revient un peut partout).
Au passage, on peut faire un tout petit peut de déchiffrage de code, même si ce n'est pas nécessaire à l'instant même. Repérez que la balise <a> </a> est la balise de lien en langage HTML. Votre titre de billet est donc un lienhypertext qui pointe sur la page du contenu global de votre billet (dans mon exemple, la page est "http://vreboul.blog.sudouestjob.com/ index.php/post/2007/08/12/Spotlight-mon-Amour). Cette adresse est l'URL spécifique qui a été attribuée à votre billet (lors de sa création) dans l'espace admin de votre blog (dans colonne de droit lors de la gestion de vos billet (création ou modification), il y a une ligne "URL spécifique" protégée par un petit cadenas. C'est là qu'est rangée cette adresse).
Revenons à nos moutons !
Ce qui nous interesse c'est la couleur du contenu du billet.
Un peu au dessous de la ligne de titre du billet, vous allez trouver balise : <div class="post-content">.
Nous y sommes ! Entre les deux éléments de cette balise div se trouve le contenu de votre bille (<div class="post-content">ContenuDuBillet</div>. Notez que "ContenuDuBillet" peut contenir d'autres types de balise telles que <p></p>, <img />, <br/> et autres. On ne s'en préoccupe pas ici).
L'information essentielle dont nous avions besoin nous est données : la class du contenu des billest a pour nom "post-content"
Modification de la CSS
Maintenant que vous avez repéré ce qui "gère" l'affichage du contenu d'un billet, il va être aisé d'aller le modifier à votre guise. Ouvrez la partie administration de votre blog. Allez dans paramètres des thèmes
, sélectionnez "Custom Theme" > Configuration du thème (page dans laquelle vous avez pris soin de coller auparavant le code CSS de votre thème favori).un petit coup de "Pomme+F" (ou CRTL+F pour les PC - Bref, d'outil de recherche de mot) vous permet de reperer très facilement dans le code l'endroit ou se trouver "post-content".
Cela ne sera pas tout à fait ce code là chez vous. Mais cela y ressemblera. Vous reperez alors la ligne "color:#XXXXXX;" . C'est cette ligne qui est à modifier pour changer la couleur du texte de vos billets. Pour trouver le code HTML de la couleur de votre choix, voyez par exemple Zefree.com.
- Attention : n'oubliez ni le ";" à la fin de la ligne de code, ni le # avant le code couleur
Vous pourriez aussi bien à cet instant décider de modiffier la taille du texte (font-size), la largeur des lignes de bordure (border-width),...
C'est à vous de jouer.
>Cette technique (Rechercher dans le code HTML reçu par votre navigateur l'élement qui vous intéresse, puis dans le modifier dans la page de code CSS) est finalement applicable à presque tout. Je veux dire que si vous souhaitez maintenant modifier, non pas la couleur du contenu du billet, mais n'importe quel paramètre de "Archives" (par exemple) dans la colone de navigation, vous pourrez repérer que l'affichage de "Archives" est géré par
class="topnav-arch"
A vous d'aller modifier cela dan la CSS ^^.
BON COURAGE
PS : les mots en rouge sont des éléments de vocabulaire du HTML ou des mots issus de l'anglais utilisés dans la page CSS par les créateur des thèmes de RGJ (Régionsjob). N'hésitez pas à jeter un oeil dans les tutoriaux HTML (voir le billet Premier Conseil)

Commentaires
C'est très clair, tu es très pédagogue contrairement à beaucoup de développeurs !
Tu pourrais rappeler la définition précise d'une classe et d'une identité ...
Dans la CSS que j'ai reprise "pink", je ne comprends pas ce qu'est Prélude, wrapper, cho, tu sais toi ? j'ai encore du pain sur la planche ! surtout que j'ai l'impression que mon blog ne s'ouvre pas correctement, il s'affiche tout noir dans un 1er temps...
Merci à toi ! et tiens-nous au courant pour l' ENSIMAG
Carole
Merci :)
Contente si c'est ce dont tu peux avoir besoin comme info.
C'est il me semble des choses que les vrais developpeurs ne pensent pas à expliquer car cela paraît "évident".. mais en fait, si personne ne vous l'a montré ou du moins expliqué, cela ne s'invente pas !
bon courage pour tes modifs :)
pour ce qui est de "wrapper, cho etc" .. je n'en sais guere plus que toi. j'interprete certaines choses mais je n'en sais pas d'avantage.
Bonjour,
Mon compagnon m'a créé un superbe design pour personnaliser mon blog, mais lorsque nous l'appliquons, toute la colonne de droite disparaît !
On n'arrive pas à résoudre ce problème... Une idée ?
Merci !
Problème résolu ! Merci beaucoup pour les précieux conseils de ton blog !