• Commentaires (Personnalisation)

     

    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>{propriété: valeur;}

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


    Tags Tags : , ,
  • Commentaires

    1
    Vendredi 10 Août 2018 à 15:23

    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..>.< 

    • Voir les réponses
    2
    Dimanche 17 Novembre 2019 à 19:18
    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.
    • Voir les réponses
    3
    Mardi 19 Novembre 2019 à 02:47

    Aww merci énormément d'avoir pris la peine de me répondre et de m'aider ♥

    4
    Vendredi 4 Juin 2021 à 14:38

    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

      • Vendredi 4 Juin 2021 à 16:13

        Aucun idée mais je vais chercher (je promets rien ^^')

        Sinon, il y a la possibilité de changer les champs de texte dans Apparence → Modifier le thème → Boutons et champs.  Mais les modifications sont limités et ça change TOUT les champs du blog.

      • Vendredi 4 Juin 2021 à 16:23

        Merci c'est gentil ! >< Oui je vois mais dans boutons et champs on ne peut pas modifier l'arrondi ^^" Alors pour le moment j'ai trouvé :

        #commentform input

        #commentform textarea

        pour modifier les champs, mais celui comprenant le site web ne se modifie pas, c'est un peu frustrant ! T___T

         

      • Vendredi 4 Juin 2021 à 16:37

        #commentform select {border-radius55px;}

        Celui là fonctionne ?

      • Vendredi 4 Juin 2021 à 16:48

        Oh ouiii génial merci beaucoup ! *-*

        Et si je peux abuser de ta gentillesse, pour changer la couleur du survolage du bouton "envoyer", tu saurais ?

      • Vendredi 4 Juin 2021 à 18:22

        De rien ;)

        Pour le "envoyer" des commentaires essaie ce code : #commentform input[type=submit]:hover {backgroundblack;}

        Pour le "envoyer" dans les réponses en commentaires il en faut un autre apparemment, essaie celui-ci :

        .block-reply input[type=submit]:hover {backgroundblack;}

      • Vendredi 4 Juin 2021 à 18:28

        Super, merci pour tout ! *-*

      • Vendredi 4 Juin 2021 à 18:33

        Pour le "envoyer" dans les réponses en commentaires, il ne fonctionne pas chez moi, mais le premier fonctionne bien !

      • Samedi 5 Juin 2021 à 08:42

        J'ai finalement réussi à tout modifier comme je le souhaitais, encore merci ! *-*

      • Samedi 5 Juin 2021 à 11:44

        Tant mieux ! Joli blog, d'ailleurs :)

      • Samedi 5 Juin 2021 à 12:37

        Merci beaucoup, j'aime beaucoup le tien aussi ! *-*

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    5
    nice
    Lundi 16 Août 2021 à 19:50

    bien fait merci

    6
    Jeudi 2 Décembre 2021 à 20:41

    Bonsoir ! :) 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  {displaynone;}, 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. :) 

    • Voir les réponses
    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter