Quand on clique sur "Commentaires"... Part One

S'affiche alors la liste des commentaires pour cet article, plus tout un tas d'information plus ou moins utiles (oui, je pense aux trackbacks, que personne n'utilisent, mais bon, ils sont quand même là, les pauvres, il ne faut pas les spolier...)

Comment modifier tout ça ?
C'est plus ou moins évident, puisque la plupart des fonctions (classes) mises en jeu pour ces éléments n'apparaîssent pas dans le CSS d'origine.

Voici donc un petit répertoire des classes qui permettent de modifier tout ce qu'on voit quand on a cluqué sur "commentaires" :

Je passe sur les encarts qui contiennent les commentaies eux-même, puisque c'est déjà traité là...

Commencons donc pour ce soir par le titre "Commentaires" qui se trouve en haut de la liste:

Il est géré par une sous-classe appelée .h2commentMessage , ce qui montre bien qu'elle régit le titre (h2) de tous les "commentMessage" (les commentaires eux-mêmes) . Cette sous-classe est une "enfant" de l'identifiant #main, ce qui veut dire qu'elle hérite par défaut de tous les attributs de #main, si vous ne spécifiez pas de changements...
Si tous ces détails d'hériatge, typiques de la programmation orientée objet ne vous inspirent pas, retenez seulement que pour modifier le titre "Commentaires", il faut écrire:
#main .h2commentMessage{ }
en appelant le #main qui correspond à votre modèle: #main1 (modèle 1,2,3,4 à deux colonnes de modules), #main2(modèle 1,2,3,4 à une colonne de modules à droite), #main3(modèle 1,2,3,4 à une colonne de modules à gauche), #main (modèle 5)...

En l'occurence, chez moi, ça donne:

#main1 .h2commentMessage {
color: #CC0033;
background: url(http://idata.over-blog.com/.../chat-boite-aux-lettres.gif)
no-repeat bottom left;
padding-top: 45px;
padding-left: 70px;
}

qui modifie le couleur du titre et rajoute l'image du petit chat à la boîte aux lettres  (il est aussi mignon que la petite marchande aux allumettes, mais ça finit moins mal, surtout si vous laissez des coms !) L'image est bien sûr en mode no-repeat et elle se place au bas à gauche du texte grâce à l'attribut bottom left .

Quand je clique sur les propriétés de l'image (clic-droit), celles-ci m'apprennent que le gif fait 44pixels de haut et 69 de large; donc, pour avoir l'image en entier et qui n'interfère pas avec le texte, il faut rajouter un décallage au texte, qui va laisser la place à l'image pour s'exprimer dans toute son ampleur (comment ça, tout ça est bien pompeux pour un chat qui sautille près d'un boîte aux lettres ?!)
D'où la nécessité d'introduire une marge intérieure en haut : padding-top: 45px;
et une marge intérieure à gauche (puisque l'image est à gauche du texte): padding-left: 70px; .

Bien que je ne doutâsse point (et le premier qui me dis que mon subjonctif est mal conjugué se prend un dico de CSS dans l'avatar, même si c'est manifestement vrai, parce qu'on est sur mon blog et que j'ai le droit d'être de mauvaise foi et d'utiliser les subjonctifs comme je trouve que ça fait joli...) de votre intense concentration un dimanche soir à 23h41, ni de votre indubitable capacité à retenir douze informations à la fois, je vais quand même laisser l'analyse de toute la partie qui se trouve après les commentaires (trackback, adresse du trackback, ajouter un commentaire,...etc) pour demain, parce que, c'est pas le temps, mais je me lève tôt, moi, tout à l'heure et c'est déjà assez cruel comme ça !