4.3.10

Cambiar el color del fondo de los comentarios de Blogger


Con la siguiente modificación en el CSS de nuestra plantilla (tomamos como referencia: Mínima) podemos cambiar el color de fondo de los comentarios:

Vamos a Editar HTML...

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

...y localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo:

/* 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;
  }

2.- Una vez localizado lo eliminamos y lo reemplazamos por el siguiente:

/* 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: #194155;

  margin:.5em 0 0;
  padding:0 0 0 20px;
  font-weight:bold;
  }
.comment-body {
  background: #194155;

  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:#194155 ; margin:0 0 .5em;

  padding:0 0 .75em 20px;
  color:#996;
  }
.comment-footer a:link {
  color:#ffffff;
  }
  .deleted-comment {
  font-style:italic; color:gray;
  }

3.- con este código podemos poner los colores que deseemos para el fondo de los comentarios, así:

  • .comment-author {
    background: #194155;

    En el anterior segmento ponemos el código hexadecimal del color para el fondo del nombre del autor del comentario (Xxxxxxxxx dijo:).

  • .comment-body {
    background: #194155;

    En este segmento ponemos el código hexadecimal del color para el fondo del comentario.

  • .comment-footer {
    background:#194155; margin:0 0 .5em;

    Aquí ponemos el código hexadecimal del color para el fondo de la fecha y de Publicar un comentario en la entrada.

23 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Ayda : #

Estupendo método para personalizar la sección de los comentarios.
¡Me gusta mucho tu blog, me ha sido de mucha utilidad!

Felicidades!

Comentario escrito por Ruth : #

¿Qué maravilla! lo que estaba buscando para resaltar los comentarios.
¿Podría indicarme si es posible agregar otra sidebar a un blog?

Gracias.

Comentario escrito por Pedro Pablo Pachón : #

Ruth:

La información que necesita la encuentra aquí:

http://bloguermast.blogspot.com/2010/03/agregar-una-sidebar-en-blogger.html

Saludos.

Comentario escrito por Ricardo Panuccio : #

Hola, muy buena tu explicación. Pero me surge un problemita. Todo sale a la perfección, pero no me permite cambiar el fondo de comment-author, el resto si lo puedo modificar a mi antojo. Será un problema de plantilla manipulada? Te agradecería que me orientaras de cual puede ser el problema que ocasiona esto. Desde ya muchas Gracias.

Comentario escrito por Pedro Pablo Pachón : #

Hola Ricardo: Posiblemente estés confundido. El comment-author {
background se refiere al fondo del nombre del autor del comentario, no de la imagen. Ésta se encuentra por fuera del fondo del comentario, o sea sobre el fondo general. Es decir, no tiene un fondo independiente.
Saludos.

Comentario escrito por MAGISTER DA VINCI : #

Te felicito. No solo por lo útil que me ha sido, también por lo fácil que lo expones. Muchas gracias.

Comentario escrito por Pedro Pablo Pachón : #

Magister Da Vinci: Gracias por tu comentario.
Saludos.

Comentario escrito por Kaede Shio : #

Hola. Yo use un color de fondo para distinguir mis comentarios, pero lo remplace por una imagn xD... ¿seria posible cambiar el color en los comentarios de los usuarios?

Comentario escrito por Pedro Pablo Pachón : #

Brrend@: Disculpa la demora en contestarte. El código no aparece en tu plantilla porque corresponde a las plantillas antiguas, y la tuya es de las nuevas.
Entonces deberás hacer lo siguiente:
Sin explandir plantillas de artilugios, localizas el siguiente código:

.avatar-image-container {
margin: .2em 0 0;
}

Inmediatamente después pegas el siguiente dódigo:

.comment-author {
background: #58ACFA;
}

.comment-body {
background: #58ACFA;
}

.comment-footer {
background:#58ACFA;
}

Con el primer segmento le pones color al fondo del nombre del autor del comentario.
Con el segundo le pones color al fondo del comentario.
Con el tercero le pones color al fondo del pie del comentario (fecha).
Escoges el segmento correspondiente al fondo al cual le quieres poner color, y eliminas los demás, o dejas los tres si quieres ponerle color a los tres fondos.
El código del color (#58ACFA) lo cambias por el del color que quieres poner (es necesario poner el signo # antes del número). Aquí encuentras una buena herramienta con códigos hexadecimales de colores:

http://html-color-codes.info/codigos-de-colores-hexadecimales/

¿Me contarás si te funcionó?

Saludos.

Comentario escrito por Pedro Pablo Pachón : #

Brrend@: Se me olvidaba. Efectivamente es para la opción de entrada incrustada a continuación.

Comentario escrito por Unknown : #

Mil gracias ! Ya lo consegui, igual mi intencion inicial era cambiar el color de todo el rectangulo, es decir la caja entera de los comentarios, porque la que viene prederminada en mi plantilla es gris y queda re fea con los colores de mi blog. Es posible cambiar eso? Ojala que si! Igual quedo mucho mejor gracias a tu ayuda. Te dejo la direccion de mi blog por si queres ver como quedo : http://www.amosermama.com.ar
Beso!

Comentario escrito por Pedro Pablo Pachón : #

Bren: Estuve en tu blog y no vi el fondo gris y feo a que te refieres. Supongo que lo arreglaste.
Te felicito tienes un excelente blog.
Un abrazo.

Comentario escrito por María Bernarda Cuellar Garay : #

Hola
Utilicé una plantilla ethereal y no se cómo agregarle un sidebar y me gustaría ponerle musica de fondo ¿cómo lo hago? por favor ayudenme,

Maribe

Comentario escrito por Unknown : #

Hola y para cambiar el body, la caja blanca donde se escribe ^^
Si sabes porfa ya ni se donde buscar, y Buen tuto, Saluttes!!

Comentario escrito por Unknown : #

Alison: En Gem@blog hay un tutorial al respecto. Creo que puede servirte. Ésta es la URL:

http://www.gemablog.com/2008/07/personalizar-editor-de-comentarios.html

Saludos.

Comentario escrito por m_m_medina : #

Saludos

Yo, buscando en la web cómo cambiar el color de los comentarios para que se distingan puesto que por defecto me vienen blancos y quiero el fondo blanco, he encontrado esto y he intentado cambiarlos como dice aqui. Pero yo exactamente no encuentro el mismo código, ni si quiera el que le ha servido a Brrenda@. Además tengo otro problema, y es que desde que he tocado el HTML ya no me permite ni siquiera modificad nada desde el diseñador de plantillas tampoco, por más que cambio el color del título o el tipo de letra por ejemplo, ya lo deja como está y no lo modifica, aunque en el diseñador se queda como el tipo de letra que he cambiado. Es extraño.

Muchas gracias de antemano.

Comentario escrito por Scott St. James : #

Hola Pedro! lo primero felicitarle por poner su tiempo a disposición de perfectos extraños que pasamos por su blog.
La pregunta es si debo grabar la plantilla para que los cambios resulten, ya que en vista previa no producen ningún resultado.
Mi blog es este http://warehouseofrock.blogspot.com.es/
Muchas gracias por anticipado,
un cordial saludo.

Comentario escrito por Pedro Pablo Pachón : #

Scott St. James,
Precisamente el objetivo de la "Vista previa" es que nos muestre cómo quedará el blog con los cambios que le hemos hecho a la plantilla para poder decidir si aplicarlos o nó.
Ahora bien, si grabamos o guardamos la plantilla con los cambios hechos, éstos quedarán aplicados.
Luego, respondiendo a su pregunta, no debemos grabar o guardar plantilla sin que en la "Vista previa" observemos que los cambios surtirán el efecto deseado. Si no es así debemos acudir a la pestaña "Revertir los cambios".
Si, hechos los cambios, la "Vista previa" no nos muestra ningún resultado es porque las modificaciones hechas (códigos reformados o agregados) no son correctos, y aparecerá un mensaje anunciando el error, entonces tendremos que "Revertir los cambios".
Saludos.

Comentario escrito por Unknown : #

Hola!! me gusta mucho tu blog, me es de mucha utilidad... me gustaria hacerte alguna consulta ya que es algo que he buscado por todas partes y no encuentro respuesta alguna.
Hay alguna de forma de el dagdet linkwhith centrarlo? y la palabra "10"comentario hay forma de centrarla y cambiarle el tamaño?

Espero alguna repuesta,gracias anticipadas.
www.27forever.es

Comentario escrito por Pedro Pablo Pachón : #

Hola Rocío,

La primera pregunta no la entiendo. Si te refieres a un gadget ¿me podrías indicar cuál es?

En cuanto a la segunda pregunta, asumo que te refieres al encabezado que indica el número de comentarios. La respuesta habría sido más efectiva si hubieras indicado qué plantilla utilizas; pero como no ha sido así, prueba con lo siguiente:

Vas a Editar HTML y buscas la siguiente línea:

/* Comments
----------------------------------------------- */

Debajo de esa línea pegas el siguiente código:

#comments h4 {
font-size: 24px;
text-align: center;
}

"24px" es el tamaño de los caracteres del encabezado; para que sea más grande o mas pequeño, aumentas o disminuyes el número de pixeles (px).

La línea "text-align: center" pone el encabezado en el centro.

Si esto no te funciona me indicas, por favor, qué plantilla utilizas.

Saludos.

Comentario escrito por Unknown : #

Hola!!! gracias por tu respuesta! ya consegui lo que te pregunte anteriormente.. ahora estoy liada intentando poner el "me gusta" de facebook al final de las entradas pero lo he intentado con varios codigos que me han dado y nada no tengo cambio alguno... y si pudiera ser tambien el gadged de seguidores de facebook para ponerlo en la columna.

mi blog es : www.27forever.es

Gracias por tu ayuda

Comentario escrito por Pedro Pablo Pachón : #

Rocío, en esta página puedes diseñar el blotón "Me gusta" de FaceBook:

https://developers.facebook.com/docs/plugins/like-button

Saludos.

Comentario escrito por RMV75YT : #

buen aporte

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.