Cambiar el color de fondo de los comentarios -67-

Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs.

1. Ir a diseño de la Plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Buscar el id ='comments-block'.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>

* Agregar lo que está de color rojo.

3. Seguimos en la plantilla. Entre <b:skin><![CDATA[ y ]]></b:skin> buscar lo siguiente (estilo del comentario):

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
Sigue más código de estilo
…..
…..
….
.deleted-comment {
font-style:italic;
color:gray;
}

4. El siguiente código lo deje para el último porque se refiere al estilo del comentario (modificado), el cual se podrá realizar cambios utilizando tu criterio. Una vez ubicado el estilo del comentario lo reemplazamos por lo siguiente:

#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#e6e6e6 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGlah3HIk1MEf9iNGfA8hmsULONeqGmmB88b9IrlrEYSz-3XQKqY78k6a8TfjWos2APUo59-wpzq-852lUIC822poQ0GFhYXYIYA_X6QqofwXViWKXUYlxulpoY-k4oAn0B_8iw/s200/page_edit.png") no-repeat 2px .35em;
margin:.5em 0 0;
padding:3px 0 0 18px;
font-weight:bold;
}
.comment-body {
background:#eeeee6;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#e5e5e5;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2;
text-decoration:bold;
}
.comment-footer {
background:#e6e6e6;
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Explicación:
- En .comment-author, aparece el nombre del autor y puedes cambiar el color de fondo y la url que viene a ser el icono
- .comment-body, ahí se visualiza el color de fondo para los que dejan comentarios.
- .comment-body-author, ahí se visualiza el color de fondo para el autor del blog.
- .comment-body-author p, puedes cambiar el color de texto del autor del blog.
- .comment-footer, aparece la fecha y puedes cambiar el color de fondo.

Vía: Stubborn Fanatic