Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

14.04.2009

Créer un style pour les commentaires

Cette note a d'abord été publiée le 10 mars dernier, mais elle méritait d'être revue compte tenu des évolutions récentes imposées aux commentaires. Et elle le sera peut-être bientôt puisque cela va encore bouger de ce côté d'après la dernière newsletter de la plateforme.

Pour la personnalisation des commentaires, j'avais préconisé la modification du modèle de la page "lien permanent", l'insertion d'une instruction Html pour appeler un style disctinct à créer dans la feuille de style. Cela n'est plus nécessaire aujourd'hui, car la plateforme a modifié ses modèles et utilise d'emblée des styles distincts pour le contenu de la note, les commentaires, et selon qu'ils ont été proposés par des invités ou par l'auteur du blog (du moins une personne ayant donné l'adresse de courrier électronique que ce dernier a enregistré dans son compte Hautetfort). D'une certaine façon cela nous facilite les choses, à condition de retirer ses moufles avant de modifier la feuille de styles.

Je pars du principe que vous avez suivi les manipulations exposées dans la note du Blog.Hautetfort pour Distinguer ses réponses au sein des commentaires.



La feuille de styles de votre blog, si vous en êtes restés au style par défaut, contient dorénavant les instructions suivantes.

.commentparent, .commentchild {
line-height: 150%;
margin: 10px 0px;
padding: 0px;
-moz-border-radius: 1% 1% 1% 1%;
-webkit-border-radius: 1% 1% 1% 1%;
background: none; border-bottom: none; }

.commentparent.author, .commentchild.author {
background-color: #dddddd;
}

.commentparent .gravatar, .commentchild .gravatar {
float: left;
margin: 0 5px 5px 0;
}

.commentparent p.posted, .commentchild p.posted {
border-bottom: none; background: none;
margin: 5px 5px 5px 0;
padding: 0;
}

.commentparent p, .commentchild p {
margin-top: 0px;
margin-bottom: 0px;
}

.commentparent {
padding: 3px;
}

.commentchild {
margin: 4px 0px 4px 40px;
padding: 3px;
}

Comment personnaliser ce code ?

Nous devrions commencer par analyser ensemble tous les différents éléments appelés, mais je préfère attendre que les commentaires soient stabilisés sur la plateforme avant de le faire. Rien ne vous empêche de bricoler un peu en attendant, avec prudence. Rappelez-vous que les feuilles de styles sont toujours à la même adresse, il suffit de changer le nom du blog : http://geemee.hautetfort.com/style.css

Si vous intervenez dans la feuille de styles, je vous incite à d'abord insérer deux lignes

/*** code d'origine

et

/code d'origine ***/

. Vous copierez le code d'origine de la partie de la feuille de style que vous entendez modifier, puis vous le collerez entre ces deux lignes. Cela vous sera ainsi plus facile de revenir en arrière. Dans une CSS, les commentaires commencent par /** et finissent par **/.

 

Mettons que vous voulez passer en police arial, en vert, sur fond jaune pour les commentaires des invités, avec une police courrier en jaune sur fond vert pour la signature. Vous modifierez votre code ainsi :

.commentparent p.posted, .commentchild p.posted {
border-bottom: none;
font-family: courier
color:#EEEE00
background-color:#99CC33;
margin: 5px 5px 5px 0;
padding: 0;
}

.commentparent p, .commentchild p {
margin-top: 0px;
margin-bottom: 0px;
font-family : arial
color : #99CC33
background-color: #EEEE00;
}

Personnellement, j'ai surtout créé un décalage sur la gauche pour mes réponses, avec un fond marron.

.commentparent.author, .commentchild.author {
background-color: #ddB866;
margin:1px 32px 16px;
padding-left:0;
}

Et pour tous les commentaires, il y a l'appel d'une image de fond en guise de séparation (dont l'alignement n'est pas parfait, je sais, merci ;-)

.commentparent p.posted, .commentchild p.posted {
border-bottom: none; background: none;
margin:5px 5px 5px 0;
padding:1px 1px 1px 16px;
background: transparent url(images/aspire/message-number-center.gif) center bottom no-repeat ;
}

 

13:00 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (1) | Tags : hautetfort, aspire, commentaire, css | |  del.icio.us | | Digg! Digg |  Facebook

Commentaires

[ Gee Mee a modifié ce commentaire :
Je vous invite à mépriser "jogos-vestir.net", site de jeux en ligne, qui pratique le blogsquatting en déposant de faux commentaires pour laisser un hyperlien (que j'ai retiré) vers un site commercial.]

Même si des fois je ne suis pas toujours d'accord avec tous les articles que l'on peut-y trouver, je tenais à vous remercier pour votre formidable site.

Merci pour ton article et bonne année à toutes et à tous !

Écrit par : Jogos de vestir | 07.01.2010

Répondre à ce commentaire

Les commentaires sont fermés.