Hacktime

Que seria de la web sin este blog

Unos comentarios mas coloridos

Posted by yaju en diciembre 16, 2006

Hace tiempo habia leido un comentario que decia “Como hacer los comentarios mas bonitos” bueno pues este hack es le que mas se asemeja a esa peticion.

Este es un hack original de Vivek Sanghi, que no puedo creer como no se me ocurrio antes.
¿Quieren hacerlo?

Pues vamos alla

Editando…

Nos dirigimos a:
Plantilla–Edicion de HTML

Buscamos el siguiente codigo:

/* 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 lo cambiamos a nuestro gusto, por ejemplo:

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

Quedaria algo asi:

Podemos cambiar los colores de los comentarios modificando lo que se encuentra marcado de color rojo. Para ver una lista de colores podemos vistar esta pagina web aqui.

4 comentarios to “Unos comentarios mas coloridos”

  1. Sanshiro said

    tus comentarios no los cambiaste de color??

  2. Leonel Alvarado said

    Como que no?

    Tienes que hacer click en el titulo del post y veras los comentarios con colores. Feliz Navidad y Prospero Año Nuevo

  3. Syl said

    Hola! primero darte las gracias porque tu blog me esta sirviendo de mucha ayuda, y despues queria decirte q me parece q en mi tipo de plantilla no puedo poner los comentarios coloreados pero, ¿podrias echarle un vistazo y confirmamelo? te lo agradeceria, porque le estoy dando un monton de vueltas y no encuentro el codigo q indicas…

  4. Leonel Alvarado said

    Pues la verdad no encuentro en tu codigo la manera para hacer que tus comentarios sean coloridos, tu template es extraña y muy diferente a todas las que he visto (original), en cualquier caso estare analizando tu codigo mas a fondo, que tengas buen dia…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: