Me solicita Jabba que explique la forma de hacer que los comentarios tengan un fondo de color, es decir, que se vean más o menos como los del Escaparate.
La forma de conseguir este efecto no es muy complicada, solo hemos de añadir unas líneas en el CSS de nuestra plantilla según el color que queramos conseguir.
Antes de empezar nos vendrá bien tener a mano una Tabla de Colores Hexadécimales.
Nos dirigimos a la parte de editar el HTML de nuestra plantilla.
Buscamos el siguiente codigo (he tomado como referencia mi plantilla, la Mínima Lefty):
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
Una vez localizado el código, lo sustituimos por este otro (es el que usaba antes en El Escaparate, muy parecido al actual aunque con distintos colores):
/* Comments
----------------------------------------------- */
#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: #ffffff;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
background: #EFEFF7;
border: 1px dashed #DDDDDD;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author{
background:#C0C0C0;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#ffffff;
text-decoration:bold;
}
.comment-footer {
background:#993333 ; margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#ffffff;
}
.deleted-comment {
font-style:italic; color:gray;
}
Este código podemos cambiarlo como nos parezca para lograr el color de fondo que más nos guste.
Vamos por partes:
El .comment-author { es donde pone "Rosa dijo" podemos cambiar el color de fondo, yo tengo #ffffff lo que hace que se vea el fondo blanco.
Tambien he cambiado el código para que el texto se vea en negrita: font-weight:bold; pero puede ponerse normal.
El .comment-body { es la parte donde está el texto que escribimos en los comentarios, aquí también podemos cambiar el color igual que antes.
En mi caso, he añadido un borde punteado alrededor: border: 1px dashed #DDD;
podemos eliminarlo borrando esa línea, cambiar su color en #DDD e, incluso hacer que sea solido, cambiando "dashed" por "solid".
El .comment-footer { es donde vemos la fecha de publicación del comentario, cambiaremos el color por el que queramos.
En el código también está incluido la distinción del autor, es decir, el autor del blog (Rosa en este caso) aparece en un color distinto al de los demás comentaristas.
Esto servirá como orientación para conseguir los cambios que se precisen, lo mejor es hacerlo en una plantilla (si es de pruebas mejor) e ir comprobando como va quedando paso a paso.
En algunos casos el código de /* comments---/* no aparece en la plantilla ya que los comentarios se adaptan directamente al estilo del blog, es el caso de la plantilla de Jabba (de Blog and Web) y no se si servirá en todos los casos, pero en esa en concreto he probado sencillamente pegando el código tal cual en el CSS y funciona perfectamente.
Compartir Enlace
