En este tip explicaré cómo hacer que los comentarios que pongan los usuarios en su blog de Wordpress aparezcan con forma de bocadillo (los de los cómics). Este lo articulo que publiqué en mi blog hace tiempo, pero quería inmortalizarlo aquí.
Ten en cuenta que los ejemplos son basándose en el tema K2, pero fácilmente podrías adaptarlo a tu tema de Wordpress así que toma la idea .
El cuadro de dialogo podríamos dividirlo en tres partes: up_globo_comenta.gif, fondo_globo_comenta.gif y down_globo_comenta.gif.

Este código para poner la parte de arriba del cuadro de dialogo:
Código :
#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:
Código :
#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 podrás notar aquí podemos omitir el fondo del cuadro si es que es del mismo color, simplemente poniéndole 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 razón requieres usar una imagen para ponerla de fondo, puedes usar la línea comentada.
Y este sería el código para la imagen de abajo:
Código :
#commentlist li .comment-content-down { margin:-13px 0; background: url(imagenes/down_globo_comenta.gif) no-repeat left top; }
Hasta aquí 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 código PHP encargado de mostrar los comentarios, en mi caso se llama “comments.php”:
Primero debemos localizar la función encargada de publicar el comentario en sí, regularmente se usa la función:
Código :
<?php comment_text(); ?>
Así que nos fijamos bien dentro de que divs esta esa línea, y sobre el div (ojo con esto eh, debe quedar fuera del div del contenido del comentario) y agregamos esta línea:
Código :
<div class="comment-content-up">& nbsp ;</div>
Ahora debemos localizar la etiqueta de fin del div donde se encuentra el comentario y después de esta etiqueta ponemos esta otra línea:
Código :
<div class="comment-content-down">& nbsp ;</div>
Para que se orienten mejor, nuestro pedazo de código quedaría algo así:


¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
jorgelig :
¿Y no da el mismo resultado con display:block;?
ryuz :
jorgelig :
¿Y no da el mismo resultado con display:block;?
Por NYHCL el 19 de Noviembre de 2007
Va de nuevo:
¿Es mi imaginación o en tu screenshot estas cerrando la etiqueta div con una span?
Usar "display:block;" no serviría ya que el elemento div ya es un bloque. Para esto es mejor usar "height:..." indicando la altura de la imagen de fondo.
Excelente tip
NYHCL_blog :
Va de nuevo:
¿Es mi imaginación o en tu screenshot estas cerrando la etiqueta div con una span?
Usar "display:block;" no serviría ya que el elemento div ya es un bloque. Para esto es mejor usar "height:..." indicando la altura de la imagen de fondo.
Excelente tip
Por Inyaka el 19 de Noviembre de 2007
ryuz :
jorgelig :
¿Y no da el mismo resultado con display:block;?
NO, con display:block simplemente usaría toda la linea(bloque) , lo que si daria el mismo resultado seria establecer un ancho x alto, por ejemplo:
Código :
Inyaka :
ryuz :
jorgelig :
¿Y no da el mismo resultado con display:block;?
NO, con display:block simplemente usaría toda la linea(bloque) , lo que si daria el mismo resultado seria establecer un ancho x alto, por ejemplo:
Código :
Si usas eso no servirá de nada... debes especificar px, em, in, o la medida que sea... dado que el único valor que el CSS toma sin medida de longitud es 0 (null).
Por NYHCL el 20 de Noviembre de 2007