Je vous ai laisse hier soir sur un suspens carrement insoutenable quant a l'etude de la partie des elements sub-commentaires; bien que personne n'ait manifeste une impatience excessive en se roulant par terre, je sais que c'est uniquement parce que vous etes bien eleves (merci a vos mamans) mais que vous trepignez en realite sur vos sieges depuis l'aube ...
Chers bloggeurs, je comprends votre soif inextinguible de connaissances CSSiennes, et je m'en vais de ce pas l'apaiser...
(Si les details techniques ne sont pas votre tasse de the, passez directement aux lignes ou est indique la solution, prcedee par un petit , ca marche aussi si on n'a pas compris pourquoi c'est comme ci ou comme ca... d'ailleurs, moi-meme, parfois...)

Voici donc, sous vos yeux ebahis... La partie Trackback !!!

Commencons par le plus simple: la partie
Adresse de trackback pour cet article :
http://admin.over-blog.com/trackback.php?Id=622944

Cet ensemble est gere par l'identifiant #addTrackback { } et contient generalement a la base un contour, defini par l'attribut border.
Si vous souhaitez vous debarrasser d'une ou plusieures de ces bordures, il suffit de modifier la regle de style de facon a avoir:
#addTrackback {
    background:transparent;
    color: #528B8B;
    padding:5px;
    border-bottom: solid #FFDEAD 0px;
    border-right: solid #FFDEAD 0px;
    border-left: solid #FFDEAD 0px;
    border-top: solid #FFDEAD 0px;
}

Si vous modifier la couleur de texte dans cette fonction, ca ne va cependant changer que la partie
http://admin.over-blog.com/trackback.php?Id=622944
Pour modifier la partie Adresse de trackback pour cet article :, il faut ajouter dans le CSS une autre fonction, qui represente le titre de #addTrackback. Cette fonction se construit comme les autres fonctions de titre, c'est-a-dire en appelant le selecteur h2 et en precisant que celui-ci ne doit s'appliquer qu'a #addtrackback, d'ou

#addTrackback h2 {
color:#40E0D0;
}


Jusque la, c'etait facile; pour la partie
Trackbacks Pas de trackbacks pour cet article
il va falloir ruser un peu ... (he ! Revenez... c'est facile aussi, en fait...)

D'abord Trackbacks: c'est un titre aussi. Mais pour pouvoir en determiner les parametres (couleur, taille, etc...), il faut proceder comme pour le titre "Commentaires", il faut utiliser

.h2Trackback {color:#40E0D0;}
Dans les parentheses, vous mettez ce que vous voulez ... (color, background-image... laisser vous aller a votre imagination.)


Pour le texte Pas de trackbacks pour cet article, le code source en Html de la page nous indique qu'il est entoure par les balises
<p class="nocomm"><em> et </em></p>, un peu comme Trackbacks est defini par les balises
<h2 class="h2Trackback">...</h2>

Moralite:  il faut creer la sous-classe
#main1 .nocomm et lui ajouter le selecteur em pour pouvoir changer le texte Pas de trackbacks pour cet article

#main1 .nocomm em {color: #528B8B;}

Il est important d'ajouter que cette fonction gouverne egalement la phrase Pas de commentaires pour cet article: la pas moyen de les differencier... Mais bon, un peu d'uniformite ne fait pas de mal de temps en temps...


Nota Bene: ecrire
p em {color: #528B8B;} donne le meme resultat, mais va changer tout ce qui est entoure des balises <p><em> ... </em></p>, ce qui peut arriver si vous faites un copier/coller d'un article du net en apportant avec ses balises HTML (ce qui est MAL, il ne faut pas faire ca...)





Voili voilou, il ne reste plus pour le prochain article de cette trepidante serie que les liens Ajouter un commentaire/un Trackback... A suivre.

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 !