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

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 :

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 :
Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

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

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 :
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 :
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 :
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
Tutoriel36 commentaires:
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 ;)
Tes tutos sont toujours super intéressants et très clairs, j'ai bien envie d'en appliquer plusieurs sur mon blog. Merci
RépondreSupprimerAprès avoir testé, je confirme: j'adore le résultat! Merci beaucoup!
RépondreSupprimerC'est vraiment top, grâce à toi j'ai enfin réussi! Merci <3
RépondreSupprimerComme toujours article génial et super bien expliqué :) Merci beaucoup
RépondreSupprimerJ'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;
Rajoutes !important à la fin des 2 premières lignes de :
Supprimer.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 ;)
Super ça fonctionne un grand merci :)
SupprimerMerci! :)
RépondreSupprimerHello!
RépondreSupprimerTout 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
Cherches le code suivant :
Supprimer.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 :)
Coucou, désolée je n'avais pas coché la notification, je viens seulement de voir!
SupprimerEncore merci! :)
J'ai essayé plusieurs de tes explications, et ca ne marche jamais :/
RépondreSupprimerPourtant tu n'as pas les commentaires Google + donc ça ne devrait poser aucun problème.
SupprimerTrouves-tu les codes à changer ?
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?
RépondreSupprimerMerci bcp pour ton blog, il me sauve la vie <3
Bonjour,
SupprimerC'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 :/
Re coucou !
SupprimerDé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
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à ;)
SupprimerPar contre tu perdras tous les commentaires ayant été publiés avec ce système :/
Salut, encore merci pour ce tuto ! ^^
RépondreSupprimerMais 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 ?
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 :
Supprimer.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à ;)
Bonjour Catherine,
RépondreSupprimerEst-il possible de modifier la couleur du background du commentaire, uniquement quand c'est l'auteur du blog qui s'exprime ?
Merci ;-)
C'est une bonne question, je vais me renseigner ;)
SupprimerD'accord, merci !
SupprimerBonjour,
RépondreSupprimerJe voudrais que mes articles apparaissent sur un fond semi-transparent. Comment faire ? Merci de votre aide.
Souhaites-tu que tout ton fond rose soit transparent, ou seulement les articles ?
SupprimerJ'ai beau faire, rien ne fonctionne :(
RépondreSupprimerSuper tutos !
RépondreSupprimermais malgrer l'avoir suivi à la lettre et avoir enlever le systeme de commentaire google+
ca ne fonctionne pas pour ma part :(
Bonjour,
SupprimerPeux-tu me donner le lien d'un article de ton blog avec des commentaires, pour que je puisse voir ?
merci beaucoup pour toutes les informations - sur mon blog2 que je mets seule en place j'ai ajouté la formule que vous donnez à savoir ...............
RépondreSupprimer.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/
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..
RépondreSupprimernotamment, 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...
Bonjour,
SupprimerLe 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à ;)
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 ?
RépondreSupprimerMon blog : unchocolatetdublabla.blogspot.fr
Mon e-mail : norafanget@orange.fr
Bonjour Nora,
SupprimerSelon 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 :/
Bonjour Catherine,
RépondreSupprimerIl semblerait que mon module commentaire ait complètement disparu. Des idées pour le remettre ?
Merci de ton aide!
Aube
Bonjour Aube,
SupprimerEst-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.
Rebonjour Catherine,
SupprimerEn 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 !
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épondreSupprimerC'est super merci beaucoup pour ce tutoriel!
RépondreSupprimer