Cómo aplicar distintos fondos de color a los comentarios (I)
Con la implantación del plugin Topsy en eCuaderno, para almacenar en la base de datos de comentarios las referencias al post en Twitter, hemos realizado algunas modificaciones al theme Copyblogger. Los cambios van orientados a colorear el fondo de los bocadillos de los comentarios, con objeto de diferenciar visualmente los que son hechos por el administrador del blog (en amarillo), los que provienen del plugin Topsy (en azul celeste) y los que realizan los lectores (en gris).
Los bocadillos para los comentarios del theme Copyblogger tienen dos colores: amarillo para el administrador y gris para los que envían los lectores.
Copyblogger utiliza dos imágenes (comment_author_top.gif y comment_author_bottom.gif, respectivamente) para formar los bocadillos del administrador:
y
Lo primero que hicimos fue crear dichas imágenes en color azul celeste (comment_topsy_top.jpg y comment_topsy_bottom.jpg), un nuevo tipo de bocadillo para los comentarios del plugin Topsy. Para ello utilizamos la aplicación Paintbrush de Mac OS X, que permite elaborarlas con un par de clicks, subiendo las nuevas imágenes al directorio “images” del theme.
A continuación se modificó la hoja de estilos CSS, de la siguiente forma. Copyblogger emplea las etiquetas de definición DL, DT y DD para maquetar cada bloque de comentarios (aquí hay una buena explicación de cómo funcionan las listas de definiciones). Con DT se coloca la cabecera, con el número de comentario, el autor y la fecha y hora. Con DD se pone el texto del comentario. DT y DD llevan en el CSS un background con las respectivas imágenes que forman la parte superior e inferior del bocadillo. Para esto se utilizan las siguientes instrucciones:
dl#comment_list dt { padding: 0 0 33px 0; background: url(‘images/comment_top.gif’) 0 100% no-repeat; font-size: 1.3em; line-height: 1.3em; color: #999; }
dl#comment_list dt.author { background: url(‘images/comment_author_top.gif’) 0 100% no-repeat; }
…
dl#comment_list dd { font-size: 1.2em; width: 428px; padding: 0 20px; margin: 0 0 1.5385em; background: #dfdfdf url(‘images/comment_bottom.gif’) 0 100% no-repeat; }
dl#comment_list dd.author { background: #f6f4c9 url(‘images/comment_author_bottom.gif’) 0 100% no-repeat; }
comment_top.gif y comment_bottom.gif son las imágenes en gris. Se utilizan los códigos de color: #dfdfdf (gris) y #f6f4c9 (amarillo).
Lo único que hay que hacer es añadir dos líneas más, para el nuevo color del Topsy (celeste, código #aff6fe):
dl#comment_list dt.topsy { background: url(‘images/comment_topsy_top.jpg’) 0 100% no-repeat; }
…
dl#comment_list dd.topsy { background: #aff6fe url(‘images/comment_topsy_bottom.jpg’) 0 100% no-repeat; }
Por último, cocinamos un poquito de html en el archivo comments.php para distinguir si el comentario está hecho por el administrador, por el plugin o por cualquier lector. Pero eso lo dejamos para la segunda parte de este post.
octubre 28th, 2009 a las 10:47 pm
[...] los detalles técnicos en: Cómo aplicar distintos fondos de color a los comentarios y sobre la integración de trackbacks de Twitter en los comentarios del blog en: Probando plugins [...]
octubre 28th, 2009 a las 11:00 pm
[...] los detalles técnicos en: Cómo aplicar distintos fondos de color a los comentarios y sobre la integración de trackbacks de Twitter en los comentarios del blog en: Probando plugins [...]