Pon color en los comentarios

Este código pretende darle un poco de vidilla a la plantilla de comentarios de tal manera que se pueda poner un poco de color en ellos. El código original es de Vivek Sanghi, pero podéis encontrar el código y una buena explicación en Gem@BLOG. Lo único que deberemos hacer en este caso es localizar en nuestra plantilla la seccion de Comentarios:

/* Comments ----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0; padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
margin:0; padding:0px 0px 0px 20px;
}
.comment-body-author p {
font-size:100%; margin:0 0 .2em 0;
color:#000000; text-decoration:bold;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}


Y sustituirlo por este otro:
/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted #99bb99;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#CCFFCC; /*comment header background color (comment author name)*/ url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px; font-weight:bold;
}
.comment-body {
background:#99FFFF; /*Reader comment background color*/
margin:0;
padding:7px 7px 7px 7px; /*Modified padding values*/
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author
{
background:#cccccc; /*The author comments background color.*/
margin:0;
padding:7px 7px 7px 10px; /*Modified padding values*/
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2; /*The author comments text color.*/
text-decoration:bold;
}
.comment-footer {
background:#CCFFCC; /*Comment footer background color (comment permalink)*/ margin:0 0 .5em;
padding:0 0 .75em 20px; color:#996;
}
.comment-footer a:link {
color:#996; }
.deleted-comment {
font-style:italic; color:gray;
}

El código está copiado exactamente igual de tal manera que las áreas en negrita se corresponden con los colores para la cabecera del comentario, el cuerpo y el pie. Estos valores se pueden cambiar por los que deseemos para darle una apariencia única a nuestros comentarios. A modo de aportación, añadiré que yo encuentro muy farragoso el hecho de tener que localizar el código de color, copiarlo y pegarlo cada vez que queramos cambiar los colores, ya que no siempre nos van a convencer las combinaciones resultantes o tal vez las queramos cambiar a menudo... ;) Así pues, podemos optar por esta otra alternativa, que no es otra cosa que definir cada color como una variable para que blogger nos la permita cambiar desde la pestaña "fuentes y colores".

Localizamos la seccion Variable Definitions que encontraremos en la zona superior de nuestra plantilla y añadimos tres nuevas variables, una para el encabezado, otra para el cuerpo y otra para el pie:

/* Variable definitions
====================
<Variable name="coment1color" description="color de cabecera del comentario"
type="color" default="#fff" value="#00FF80">
<Variable name="coment2color" description="color de cuerpo del comentario"
type="color" default="#fff" value="#99C9FF">
<Variable name="coment3color" description="color de pie del comentario"
type="color" default="#fff" value="#cc0000">

Ahora sustituímos los códigos de los colores en negrita del código por
$coment1color, $coment2color y $coment3color

De esta manera, si vamos a "Fuentes y Colores" en el diseño, podremos cambiar los parámetros de cada color siempre que queramos.


Actualización: ;) como podréis ver, me he comido unas cuantas varibles de color... es lo que tiene hacerlo sobre la marcha... :) en fin, en realidad son 5 variables a definir si es que queremos tener todo bajo control así que deberemos crear una línea para cada una de la misma manera que hicimos antes.