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

• (Blogger) Personnaliser le design de vos réponses aux commentaires
• (Blogger) Ajouter une bulle avec le nombre de commentaires 
• (Blogger) Numéroter les commentaires 

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