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 .
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
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
¿Y no da el mismo resultado con display:block;? Por:ryuz
ryuz :
jorgelig :
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
¿Y no da el mismo resultado con display:block;?
Deberia serlo, no?. Pruebalo y nos cuentas Por:jorgelig
No he podido postear mi comentario que triste.
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:NYHCL_blog
NYHCL_blog :
No he podido postear mi comentario que triste.
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 .
Tienes razon, fue un error que fue solucionado en la practica. Pero no en el screen. Se debe cerrar con un </div> y no con un span. Mil disculpas por esta confusion. Por:jorgelig
ryuz :
jorgelig :
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
¿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:
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
¿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 :
width: 10; heigth: 15;
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:Loon
Loon, es sólo un ejemplo por Inyaka es claro que no tendría ningún efecto, las unidades van al gusto de cada quien. Por:NYHCL_blog
que ni el ni otro de cuenta de el articulo que no lo puede utilisar en la ley se registra no conferiente para colombia Por:compaq_blog
que de caso no favorable para colombia ni otro estado para colombia no se debe utilizar es conveniente que usted alerte a colombia de peligro de confiere a el colombia Por:hp_blog
.
