-
Commentaires (Personnalisation)
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;}
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 :)
Tags : commentaires personnalisés, css, commentaire ekla
-
Commentaires
Hello, ton blog est super et je te remercie pour tout ses formidable tutos :D J'ai un petit soucis avec mes commentaires, je me demandais si tu savais comment cacher les réponses aux commentaires pour les remplacer par un " voir les réponses " comme sur ton blog, ce serait vraiment gentil s tu pouvais m'aider s'il te plait.Bonjour, je rencontre des difficultés quant à modifier la zone de texte des commentaires (celle où l'on peut écrire le commentaire, là où il y a "nom", "e-mail", "site", "commentaire", etc. et non pas le commentaire en lui-même) et notamment le bouton "envoyer", pouvez-vous m'indiquer quel code rentrer afin de pouvoir le faire ? En vous remerciant, je suis en pleine galère avec ce code depuis un long moment car je rêve d'avoir une zone de commentaire arrondie mais je ne trouve pas l'entrée à mettre pour cette zone ! XD
5niceLundi 16 Août 2021 à 19:50Bonsoir ! :) Ton article m'a bien aidée pour personnaliser mes commentaires et je t'en remercie. J'avais néanmoins une petite question un peu étrange sûrement XD. Je souhaite supprimer les avatars de tous mes commentaires sauf l'avatar admin. Sauf que lorsque je tente le code .commentavatar img {display: none;}, cela me supprime tous mes avatars y compris le mien. J'ai beau tourner mon code dans tous les sens, le résultat reste le même. Tous les avatars ont disparu. Saurais-tu comment faire pour que seul mon avatar reste ? Merci d'avance pour ta réponse. :)
Vous devez être connecté pour commenter
Salut! C'est intéressant tout ça! Mais je me demandais comment faire pour faire des liens répondre & voir toutes les réponses un bouton? Qu'il soit pareil ou différent des autres boutons? J'ai vu ça sur plusieurs blogs mais je n'arrive pas à trouvé le code..>.<
Salut ! Les boutons "Répondre" et "Voir toutes les réponses" sont modifiables avec les sélecteurs : (points 6 & 8)
.comment-reply>a {propriété: valeur;}
&
.show-replies {propriété: valeur;}
Pour les propriétés, tu trouveras une liste ici.
Merci beaucoup! Je vais testé ça! :)
Salut! Merci! J'ai fais quelque chose de pas mal avec tes codes :) Ce n'est pas tout à fait ce que je voulais mais ça donne quand même un bon résultat ^w^