Personnaliser les commentaires

Avant de commencer, voici une petite liste de sélecteurs pour les commentaires. (Voir la liste complète)

 Sélécteurs   Notes
.comment_normal Commentaire en général
 .comment_admin Commentaire de l'admin
 div.commentheader  En-tête des commentaires (Date, N°, pseudo)
 .commentnumber Numéro du commentaire
 .commentpseudo Pseudo
 .commentdate Date du commentaire
 div.commentbody Contenu du commentaire
 .commentavatar Le bloc où se trouve votre avatar
 .commentavatar img
 Avatar
 .comment-reply>a Bouton "répondre"
 .block-reply div.commentbody Réponses aux commentaires
.show-replies ou (a.show-replies) "Voir les réponses"

 

1- .comment_normal,  .comment_admin (Commentaires)

Pour bien vous montrer à quoi correspondent ces sélecteurs, j'ai mis une bordure rouge. Comme vous pouvez le voir, .comment_normal et comment_admin correspondent à chaque commentaire avec Header, contenu, avatar etc... Bref, le bloc commentaire en entier. C'est également avec ces sélecteurs que l'on peut définir la largeur des commentaires, moi j'ai mis 90%.

2- div.commentheader (en-tête)

L'en-tête de vos commentaires. Si vous souhaitez que votre en-tête soit différente de celle de vos visiteurs il faut ajouter .comment_admin devant le sélécteur. Ce qui donne .comment_admin div.commentheader

Pour moi, l'en-tête de mes commentaires est plus foncé que ceux des visiteurs.

div.commentheader {propriété: valeur;}   

.comment_admin div.commentheader {propriété: valeur;}   

 

3- Éléments dans l'en-tête (Numéro, date, Pseudo)

.commentnumber {propriété: valeur;}  / n° du commentaire /

.commentpseudo {propriété: valeur;} / Pseudo /

.commentpseudo a {propriété: valeur;} / Pseudo lien (pour ceux qui on un compte ekla) /

.commentdate {propriété: valeur;}  / Date du commentaire /

 

4- div.commentbody (contenu de vos commentaires)

Là, rien de compliqué non plus.

div.commentbody {propriété: valeur;}

Si vous voulez que vos commentaires (donc l'admin) soient différents, comme pour l'en-tête, il faut ajouter .comment_admin devant

.comment_admin div.commentbody {propriété: valeur;}

5- Avatar

Pour définir la taille de l'avatar: {width: xpx;}

.commentavatar / Zone où se trouve votre avatar / 

.commentavatar img / l'avatar, image /

 

6- Bouton "Répondre"

 .comment-reply>a

 

7- Commentaire réponse.

Si vous voulez personnaliser les commentaires réponses, il vous suffit d'utiliser les sélecteurs donnés plus haut en ajoutant .block-reply devant. Exemple.

.block-reply  .commentavatar {propriété: valeur;}
.block-reply  .commentavatar img  {propriété: valeur;}
.block-reply .commentpseudo {propriété: valeur;}
.block-reply  div.commentbody {propriété: valeur;}

 

8- "Voir les réponses"

Si les réponses des commentaires sont cachées.

.show-replies {propriété: valeur;}

Personnalisation commentaires

9- "Votre commentaire" en bas d’article

.module_contenu_block>a {propriété: valeur;}

S'il vous faut des précisions, n'hésitez pas à me laisser un commentaire :) 

Retour à l'accueil