Comunidad de diseño web y desarrollo en internet online

Comentarios de Wordpress dentro de bocadillos de cómic

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í:



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

¿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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate