2 nov. 2010

(Blogger) Modifier les commentaires

Nous allons maintenant modifier la zone des commentaires : police, background et encadrements.

Les commentaires et les réponses sont gérées par les mêmes lignes de CSS, mais vous pouvez aller plus loin :

Vous devez vous rendre dans votre CSS : Présentation > Modifier le code HTML
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

La totalité
#comments {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le titre (2 commentaires)
.comments h4 {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le pseudo
.comment-author a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
L'expression a dit
.comment-author {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Le commentaire
.comment-body{text-decoration:underline;text-decoration:none; font-style: italic;font-weight : bold ;font-weight : normal;font-size:130%; }
La date du commentaire
.comment-timestamp a {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que
text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police
MODIFICATION DES FONDS

Un fond dans la totalité
#comments {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans l'avatar
.avatar-image-container {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;padding:5px}
Un fond dans le titre
.comments h4{background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Un fond dans le commentaire
.comment-body {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}
Vous effacez ce qui ne vous convient pas, sachant que
background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas
Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer toute la zone Commentaires
#comments  {border:solid 1px #D8D7D7}
Pour encadrer le titre
.comments h4 {border:solid 1px #D8D7D7}
Pour encadrer l'avatar
.avatar-image-container {border:solid 1px #D8D7D7}
Pour encadrer le commentaire
.comment-body {border:solid 1px #D8D7D7}
Pour en savoir plus sur les bordures : créer vos encadrements

11 commentaires:

  1. hello Annal content de te relire après cette absence, toujours des articles utiles et fort pratique, merci à toi

    RépondreSupprimer
  2. Bonsoir Anna,

    un mail vous attend... Bonne soirée.

    RépondreSupprimer
  3. Bonjour Anna,

    Après maintes tentatives sans aucun résultat, voici,

    J'aimerais afficher les commentaires de mes visiteurs directement sous le message commentés et non seulement dans le widget 'messages récents'.

    Merci infiniment de votre aide,

    www.carterielechateaudecartes.blogspot.com

    RépondreSupprimer
  4. Bonjour!

    Voilà, j'avais un blog sur OB, et puis j'ai voulu changer de nom. Et je suis passée sur blogspot. Pourquoi, aucune idée...

    Alors bon, j'adore la facilité, les gadgets, et tout le tralala, mais alors, la gestion des commentaires, j'ai juste trop de mal avec.

    Je voudrais pouvoir répondre aux commentaires sans poster un commentaire moi même, ET SURTOUT, que les personnes à qui je réponds sachent que je leur ai répondu.

    Or, l'option S'abonner par email, n'est disponible que lorsqu'on a un compte gmail/google et que l'on y est connecté. Je viens de tester, j'étais connectée, j'avais le lien S'abonner par mail, je me suis déconnectée, et hop, plus de lien possible...

    Je trouve ça dommage, car j'aime l'interaction avec les lecteurs, et je réponds toujours à tous les coms, et je voudrais bien que ceux qui en ont laissé un le sache (même s'ils n'ont pas de compte).

    Merci beaucoup!! J'ai parcouru la partie sur blogger que vous avez écrit, vous avez l'air de maitriser pas mal... ;)

    RépondreSupprimer
  5. Merci pour ce topic très intéressant!
    à moins d'avoir mal lu, j'aimerais savoir s'il y a un moyen de centrer l'icône commentaire en elle même, juste en dessous de l'article posté (centrer sous l'article le "Publié par...0 commentaires")

    merci d'avance de votre réponse!

    Camille

    RépondreSupprimer
  6. coucou, j'ai un soucis avec le message au dessus du formulaire de commentaire le mien s'affiche sous le formulaire et je le voudrais au dessus comme sur ton blog peut tu m'aider sur la manip' a faire?
    merci a toi

    RépondreSupprimer
  7. Pratique, utile, rien à dire à part : MERCI :)

    RépondreSupprimer
  8. bonjour annak,
    Ici la soeur d'Alice HUGO. Tu te souviens ?
    On m'a confié la création d'un blog pour l'Association de CASTELBOUC.
    Je vais essayer sur Blogspot. Ma question est certainement très stupide mais je ne sais, sur cette plateforme, comment activer la fonction "écrire un commentaire" après un article.
    Cordialement et Merci d'avance
    Janine

    RépondreSupprimer
  9. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  10. Merci pour cet article ! Finalement, après quelques tatonnements, j'ai trouvé comment utiliser ce code pour en faire quelque chose qui me convient. ^^

    RépondreSupprimer
  11. Bonjour, cet article est très intéressant.
    J'aimerais savoir comment modifier la couleur du bouton "publier" car le bleu ne va pas du tout avec l'habillage de mon blog.
    Merci d'avance

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)