Comentarios de Wordpress en un cuadros de dialogo con algo de CSS.

No me refiero a los comentarios del codigo de wordpress, sino a los comentarios que ponen los usuarios. Ten en cuenta que los ejemplos son basandose en el tema K2, pero facilmente podrias adaptarlo a tu tema de Wordpress asi que toma la idea

El cuadro de dialogo podriamos divirlo en tres partes: up_globo_comenta.gif,fondo_globo_comenta.gif*, down_globo_comenta.gif

Este codigo para poner la parte de arriba del cuadro de dialogo:
#commentlist li .comment-content-up {
background: url(imagenes/up_globo_comenta.gif) no-repeat left top;
margin:10px 0 0 0;
}

Este es el CSS para el div del comentario:
#commentlist li .comment-content {
font-size-adjust:inherit;
width:483px;
margin:0 0 0 1px;
padding: 0 0 0 15px;
background:#D5E3F6;
/* background: url('imagenes/fondo_globo_comenta.gif')left repeat-y ;*/
font-size: 1.2em;
}
Como podras notar aqui podemos omitir el fondo del cuadro si esque es del mismo color, simplemente poniendole en la propiedad background mismo valor del color que nuestro cuadro de dialogo; pero si deseas ponerle sombra a tu cuadro de dialogo o por alguna otra razon requieres usar una imagen para ponerla de fondo, puedes usar la linea comentada.

Y este seria el codigo para la imagen de abajo:
#commentlist li .comment-content-down {
margin:-13px 0;
background: url(imagenes/down_globo_comenta.gif) no-repeat left top;
}

Hasta aqui la clave es poner una imagen sobre el comentario, rellenar el comentario del mismo color (o con una imagen) que el relleno de la imagen de arriba y poner debajo la imagen de la base de nuestro cuadro de dialogo . Ahora falta usarlo en divs dentro del codigo php encargado de mostrar los comentarios, en mi caso se llama “comments.php”:

Primero debemos localizar la funcion encargada de publicar el comentario en si, regularmente se usa la funcion < ?php comment_text(); ?> asi que nos fijamos bien dentro de que divs esta esa linea, y sobre el div (ojo con esto eh, debe quedar fuera del div del contenido del comentario) y agregamos esta linea:< d iv class="comment-content-up">& nbsp ;< / div>; ahora debemos localizar la etiqueta de fin del div donde se encuentra el comentario y despues de esta etiqueta ponemos esta otra linea:
< d iv class="comment-content-down">& nbsp ;< / div>. Para que se orienten mejor, nuestro pedazo de codigo quedaria algo asi:

Notose que en los dos ultimos codigos que puse en el blog hay unos espacios que en el codigo de la imagen no aparecen, esto es porque si lo dejo tal cual esta en la imagen (que es como debe ser) no apareceria la linea del codigo en el post del blog XD.

Nota: nbsp fue utilizado para simular un espacio no divisible y por lo tanto engañar al navegador que hay informacion y nos deje poner el fondo que le decimos XD