• 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 commentaire)

    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 :) 


  • Commentaires

    1
    Vendredi 10 Août à 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
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :