Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Modifier les fonds des commentaires dans Blogger

Après avoir changé la forme des avatars des commentaires, aujourd'hui nous allons voir comment changer les fonds des commentaires.

Modifier les fonds des commentaires dans Blogger

C'est parti pour les explications :)


Sauvegarde du thème

Attention : Si vous utilisez le système de commentaires Google+ ce tutoriel ne fonctionnera pas car il n'est pas possible de modifier l'apparence des commentaires Google+.

Comme d'habitude, première chose à faire : faire une sauvegarde du thème avant d'y apporter des modifications. Comme ça vous pourrez facilement revenir en arrière si vous faites une erreur.

Cliquez sur Modèle à partir du tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran.
Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

Modifier les fonds des commentaires dans Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier.

Modifier le code CSS

Allez dans Modifier le code HTML :

Modifier les fonds des commentaires dans Blogger

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

Modifier les fonds des commentaires dans Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Collez ici la première ligne des codes donnés par la suite et appuyez sur Entrer pour les trouver.

Couleur de fond des réponses aux commentaires

Par défaut voici à quoi ressemble les commentaires :

Modifier les fonds des commentaires dans Blogger

Remarquez que la réponse au 1er commentaire est dans une boîte grisée.
Pour changer sa couleur, ou lui ajouter une bordure, cherchez le code suivant :
.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}
Changez $(post.footer.background.color) pour le code hexadécimal de la couleur que vous souhaitez. Pour trouver ce code je vous conseil le site code-couleur ;)
Pour un gris-bleu par exemple on écrit :
.comments .comment-thread.inline-thread {
background-color: #e2eaf0;   /* Couleur de fond des réponses aux commentaires */
}
Si vous voulez supprimer la couleur de fond, remplacez le code couleur par transparent :
.comments .comment-thread.inline-thread {
background-color: transparent;   /* Pour un fond transparent */
}
Pour ajouter une bordure à cette boîte rajoutez les lignes suivantes :
border-color: #A1C2D7;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 2px;   /* Epaisseur de la bordure */
Comme ceci :
.comments .comment-thread.inline-thread {
background-color: #e2eaf0;
border-color: #A1C2D7;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 2px;   /* Epaisseur de la bordure */
}
On peut également arrondir les coins de la boîte en ajoutant les lignes suivantes :
-webkit-border-radius: 15px;   /* Arrondissement des coins */
-moz-border-radius: 15px;   /* Arrondissement des coins */
border-radius: 15px;   /* Arrondissement des coins */
Comme ceci :
.comments .comment-thread.inline-thread {
background-color: #e2eaf0;
border-color: #A1C2D7;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 15px;   /* Arrondissement des coins */
-moz-border-radius: 15px;   /* Arrondissement des coins */
border-radius: 15px;   /* Arrondissement des coins */
}
Vous pouvez jouer sur la valeur en pixels (15px) en sachant que plus elle sera grande, plus les bords seront arrondis.

Visuellement on obtient :

Modifier les fonds des commentaires dans Blogger

Changer le fond des commentaires seulement

On peut également ajouter un fond à la partie commentaire seulement.
Pour cela ajoutez le code suivant :
.inline-thread .comment-block {
}
A la suite du code vu ci-dessus.

Comme ceci :
.comments .comment-thread.inline-thread {
background-color: transparent;
border-color: #A1C2D7;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.inline-thread .comment-block {
}
De même que pour le premier code vu ci-dessus, on peut changer la couleur de fond, ajouter une bordure, et arrondir les coins, par exemple :
.inline-thread .comment-block {
background-color: #e2eaf0;
border-color: #A1C2D7;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 0 15px 15px 15px;
-moz-border-radius: 0 15px 15px 15px;
border-radius: 0 15px 15px 15px;
}
On va également ajouter un espace entre la bordure et le contenu. Ajoutez la ligne suivante :
padding: 5px 8px;
Comme ceci :
.inline-thread .comment-block {
background-color: #e2eaf0;
border-color: #A1C2D7;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 0 15px 15px 15px;
-moz-border-radius: 0 15px 15px 15px;
border-radius: 0 15px 15px 15px;
padding: 5px 8px;   /* Epace entre bordure et contenu */
}
Ce qui donne :

Modifier les fonds des commentaires dans Blogger

Remarquez que seulement la partie texte du commentaire est coloré et non le bloc complet ;). C'est parce-que j'ai donné une couleur transparente au fond des réponses aux commentaires.

De plus, le coin en haut à gauche n'est pas arrondi ! Et oui, on peut arrondir les coins séparément les uns des autres.

C'est pour cela qu'au lieu d'avoir écrit :
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
Nous avons écrit :
-webkit-border-radius: 0 15px 15px 15px;
-moz-border-radius: 0 15px 15px 15px;
border-radius: 0 15px 15px 15px;
La première valeur (0) correspond au coin en haut à gauche, ensuite on a spécifié un arrondi de 15px pour le coin en haut à droite, en bas à droite, puis en bas à gauche :)


Changer le fond des commentaires

On peut de la même manière changer le fond des textes des commentaires.
Ajoutez le code suivant à la suite des précédents :
.comments .comment-block {
background-color: #f0ece8;
border-color: #DFC3B3;
border-style: solid;
border-width: 2px;
-webkit-border-radius: 0 15px 15px 15px;
-moz-border-radius: 0 15px 15px 15px;
border-radius: 0 15px 15px 15px;
padding: 5px 8px;
}
Ce qui donne  :

Modifier les fonds des commentaires dans Blogger


Supprimer la bordure au-dessus du lien "Répondre" après les commentaires

Pour supprimer cette grosse bordure grise au-dessus du lien "Répondre", cherchez le code suivant :
.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}
Et remplacez-le par :
.comments .continue {
border-top: none;
}
Ce qui donne  :

Modifier les fonds des commentaires dans Blogger

Si vous ne voulez pas la supprimer, vous pouvez modifier le code pour ceci :
.comments .continue {
border-top-color: #999999;   /* Couleur de la bordure supérieur */
border-top-width: 2px;   /* Epaisseur de la bordure supérieur */
border-top-style: solid;   /* Style de la bordure supérieur */
}
Voilà ! A vous de jouer maintenant pour trouver ce qui vous convient en terme de couleurs et formes ;)
Si vous avez loupé le tutoriel pour modifier les avatars des commentaires, c'est par ici :)

Bon blogging !

Autres articles

36 commentaires:

  1. Tes tutos sont toujours super intéressants et très clairs, j'ai bien envie d'en appliquer plusieurs sur mon blog. Merci

    RépondreSupprimer
  2. Après avoir testé, je confirme: j'adore le résultat! Merci beaucoup!

    RépondreSupprimer
  3. C'est vraiment top, grâce à toi j'ai enfin réussi! Merci <3

    RépondreSupprimer
  4. Comme toujours article génial et super bien expliqué :) Merci beaucoup

    J'ai quand meme un petit soucis en réalisant cette astuce :S... Comme tu peux le voir en dessous mes fonds sont de couleurs différents tous les deux mais quand je valide il me met une seule couleur pour les deux...
    Est ce que tu saurais pourquoi ?
    (si tu veux aller voir : http://tequilabeauty.blogspot.be/2014/12/je-vous-presente-mon-nouveau-cheri.html )




    .inline-thread .comment-block {
    background-color: #FFFAF4;
    border-color: #B78178;
    border-style: solid;
    border-width: 2px;
    -webkit-border-radius: 0 15px 15px 15px;
    -moz-border-radius: 0 15px 15px 15px;
    border-radius: 0 15px 15px 15px;
    padding: 5px 8px;
    }
    .comments .comment-block {
    background-color: #f0ece8;
    border-color: #DFC3B3;
    border-style: solid;
    border-width: 2px;
    -webkit-border-radius: 0 15px 15px 15px;
    -moz-border-radius: 0 15px 15px 15px;
    border-radius: 0 15px 15px 15px;
    padding: 5px 8px;

    RépondreSupprimer
    Réponses
    1. Rajoutes !important à la fin des 2 premières lignes de :

      .inline-thread .comment-block {
      background-color: #FFFAF4;
      border-color: #B78178;
      border-style: solid;
      border-width: 2px;
      -webkit-border-radius: 0 15px 15px 15px;
      -moz-border-radius: 0 15px 15px 15px;
      border-radius: 0 15px 15px 15px;
      padding: 5px 8px;
      }

      Comme ceci :

      .inline-thread .comment-block {
      background-color: #FFFAF4 !important;
      border-color: #B78178 !important;
      border-style: solid;
      border-width: 2px;
      -webkit-border-radius: 0 15px 15px 15px;
      -moz-border-radius: 0 15px 15px 15px;
      border-radius: 0 15px 15px 15px;
      padding: 5px 8px;
      }

      Ça devrait forcer le navigateur à afficher les bonnes couleurs ;)

      Supprimer
    2. Super ça fonctionne un grand merci :)

      Supprimer
  5. Hello!
    Tout petit souci de mon côté, j'ai une double couleur qui s'affiche pour moi lorsque je réponds! Plutôt que d'avoir ma propre couleur (rose) j'ai la même que pour les commentaires laissés (bleu), avec un cadre (rose) de cette fameuse couleur autour! :o

    Mon blog: http://www.julinfinity.com

    RépondreSupprimer
    Réponses
    1. Cherches le code suivant :

      .comments .comment-thread.inline-thread {
      background-color: #FFF7FA;
      border-color: #FFC1C3;
      border-style: solid;
      border-width: 1px;
      -webkit-border-radius: 0 15px 15px 15px;
      -moz-border-radius: 0 15px 15px 15px;
      border-radius: 0 15px 15px 15px;
      }

      Et remplace la toute première ligne par :

      .comments .comment-thread.inline-thread .comment-block {

      Les réponses des commentaires seront maintenant roses et non bleus :)

      Supprimer
    2. Coucou, désolée je n'avais pas coché la notification, je viens seulement de voir!
      Encore merci! :)

      Supprimer
  6. J'ai essayé plusieurs de tes explications, et ca ne marche jamais :/

    RépondreSupprimer
    Réponses
    1. Pourtant tu n'as pas les commentaires Google + donc ça ne devrait poser aucun problème.
      Trouves-tu les codes à changer ?

      Supprimer
  7. Coucou ! J'aimerai bien pouvoir modifier mes commentaires mais je ne voie pas ce que tu veux dire par les commentaires Google+. Comment savoir quel plateforme de commentaire j'ai?
    Merci bcp pour ton blog, il me sauve la vie <3

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est simple, si ton système de commentaires ressemble au mien alors tu n'as pas activé les commentaires Google + et tu peux modifier l'apparence des commentaires.
      Je suis allé voir ton blog et malheureusement tu as bien activé le système de commentaires Google +. Désolée :/

      Supprimer
    2. Re coucou !
      Déjà, merci beaucoup d'avoir répondu !
      Le truc c'est que je ne sais ps comment je l'ai activer ni comment les desactiver? Tu aurais une solution pour moi?
      Par contre, tout tes autres tutos fonctionne très bien ! Merci mille fois pour ça <3

      Supprimer
    3. Pour les désactiver, cliques sur Google + à partir de ton tableau de bord. Décoche la ligne "Utiliser les commentaires Google + sur ce blog ?" sur la droite de l'écran. Et voilà ;)
      Par contre tu perdras tous les commentaires ayant été publiés avec ce système :/

      Supprimer
  8. Salut, encore merci pour ce tuto ! ^^
    Mais j'ai un petit problème =( Je suis à la lettre ton tuto mais le cadre coloré des réponses englobe "réponse" et "répondre" ! Comment faire ?

    RépondreSupprimer
    Réponses
    1. Bonjour, tu t'es trompé de code CSS, c'est pour cela que le cadre englobe Réponse et Répondre. Voici ton code actuel pour le cadre :

      .comments .comment-thread.inline-thread {
      background-color: #e2eaf0;
      border-color: #A1C2D7;
      border-style: solid;
      border-width: 2px;
      -webkit-border-radius: 0 15px 15px 15px;
      -moz-border-radius: 0 15px 15px 15px;
      border-radius: 0 15px 15px 15px;
      padding: 5px 8px;
      }

      Voici le code que tu devrait avoir :

      .inline-thread .comment-block {
      background-color: #e2eaf0;
      border-color: #A1C2D7;
      border-style: solid;
      border-width: 2px;
      -webkit-border-radius: 0 15px 15px 15px;
      -moz-border-radius: 0 15px 15px 15px;
      border-radius: 0 15px 15px 15px;
      padding: 5px 8px;
      }

      La première ligne est différente. C'est elle qui définit l'élément qui être affecté par les paramètres entre les signes { et }.

      Modifies ce code et voilà ;)

      Supprimer
  9. Bonjour Catherine,

    Est-il possible de modifier la couleur du background du commentaire, uniquement quand c'est l'auteur du blog qui s'exprime ?

    Merci ;-)

    RépondreSupprimer
    Réponses
    1. C'est une bonne question, je vais me renseigner ;)

      Supprimer
  10. Bonjour,
    Je voudrais que mes articles apparaissent sur un fond semi-transparent. Comment faire ? Merci de votre aide.

    RépondreSupprimer
    Réponses
    1. Souhaites-tu que tout ton fond rose soit transparent, ou seulement les articles ?

      Supprimer
  11. J'ai beau faire, rien ne fonctionne :(

    RépondreSupprimer
  12. Super tutos !
    mais malgrer l'avoir suivi à la lettre et avoir enlever le systeme de commentaire google+
    ca ne fonctionne pas pour ma part :(

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien d'un article de ton blog avec des commentaires, pour que je puisse voir ?

      Supprimer
  13. merci beaucoup pour toutes les informations - sur mon blog2 que je mets seule en place j'ai ajouté la formule que vous donnez à savoir ...............

    .inline-thread .comment-block {
    background-color: #e2eaf0;
    border-color: #A1C2D7;
    border-style: solid;
    border-width: 2px;
    -webkit-border-radius: 0 15px 15px 15px;
    -moz-border-radius: 0 15px 15px 15px;
    border-radius: 0 15px 15px 15px;
    }

    .comments .comment-block {
    background-color: #f0ece8;
    border-color: #DFC3B3;
    border-style: solid;
    border-width: 2px;
    -webkit-border-radius: 0 15px 15px 15px;
    -moz-border-radius: 0 15px 15px 15px;
    border-radius: 0 15px 15px 15px;
    padding: 5px 8px;
    }
    et cela me permet de mieux voir les messages des amies et mes réponses un grand merci

    http://mademeure2.blogspot.fr/

    RépondreSupprimer
  14. Un grand merci pour toutes vos explications très claires et précises, ce tutoriel concernant la modification des fonds des commentaires, m'a permis de réaliser ce que j'essayais de faire par d'autres tutoriels qui ne fonctionnaient pas dans mon css (les deux de mes blogs) car les templates étaient différents..maintenant j'ai réussi à faire quelque chose d'a peu près correst, même s'il y a encore des choses qui ne vont pas..
    notamment, lorsque je vais sur la page des articles, la taille de la police d'écriture du titre du blog ne s'affiche pas de la même taille que celle sur la page d'accueil..je n'ai pas encore trouvé comment remettre cela...car sur mes deux blogs, le titre du blog sur les pages d'articles est beaucoup plus petit.. les voudrais de la même taille que sur les pages d'accueil.. si vous pouvez m'aider ce serait super..

    Encore merci pour votre aide précieuse..à bientôt (je reviendrai vous voir à mon retour de vacances, mais vous pouvez me laisser un message sur l'un de mes deux blogs..)
    http://plinett.blogspot.fr
    http://klinep.blogspot.fr
    ps : je ne sais pas si j'avais activé les commentaires Google + et ne trouve pas comment le voir...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le problème vient de l'apparence de tes liens visités. Mais tu peux corriger ce bug en ajoutant quelques lignes de code CSS.
      Retrouve le code CSS suivant :

      .Header h1 a {
      color: #ff8900;
      }

      Ajoute les lignes suivantes :

      font-size: inherit !important;
      font-family: inherit !important;
      font-style: inherit !important;

      Avant le signe }
      Comme ceci :

      .Header h1 a {
      color: #ff8900;
      font-size: inherit !important;
      font-family: inherit !important;
      font-style: inherit !important;
      }

      Et voilà ;)

      Supprimer
  15. Bonjour Catherine, tes tutos sont supers et très bien expliquer le seul hic c'est que je fais mes modifs sur ma tablette étant donné que je n'ai pas d'ordinateur et du coup je n'ai pas le même clavier.Je ne peux donc pas cliquer sur CTRL.Aurais-tu une solution ?
    Mon blog : unchocolatetdublabla.blogspot.fr
    Mon e-mail : norafanget@orange.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Nora,
      Selon la marque de ta tablette, il devrait y avoir une fonction de recherche dans le navigateur.
      Si tu ne le trouves pas je te conseil d'utiliser un ordinateur car la manipulation des codes sera beaucoup plus simple à réaliser. Les tablettes ne sont pas étudiées pour le codage, mais plutôt la navigation :/

      Supprimer
  16. Bonjour Catherine,
    Il semblerait que mon module commentaire ait complètement disparu. Des idées pour le remettre ?
    Merci de ton aide!
    Aube

    RépondreSupprimer
    Réponses
    1. Bonjour Aube,
      Est-ce arrivé en suivant un tutorial ? Si oui, alors charge la sauvegarde que tu as du faire avant de commencer.
      Si non, malheureusement ce n'est pas la première fois que j'entends parler de ce problème. Si tu as fait une sauvegarde de ton thème avant que le problème survienne, alors charge cette sauvegarde.

      Supprimer
    2. Rebonjour Catherine,

      En fouillant un peu partout, j'ai fini par trouver une solution à mon problème qui fonctionne. Je ne sais pas si tu la connaissais, mais je te la donne au cas...

      Dans chacun de nos billets, il faut aller ouvrir la section « option » qui est située à droite de l'écran. On sélectionne tout simplement « Autoriser les commentaires des lecteurs » et on enregistre la mise à jour. Pas plus compliqué que cela. J'espère que ça pourra en aider d'autres.

      Bonne journée et merci encore une fois !

      Supprimer
  17. Oui... mais malheureusement je vais devoir me passer de commentaires pour le moment. Ce serait devoir recommencer le tout depuis le début et présentement je manque de temps pour le faire. Dommage ! Merci beaucoup pour ton aide. :)

    RépondreSupprimer
  18. C'est super merci beaucoup pour ce tutoriel!

    RépondreSupprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger