Blogger. Configurar comentarios anidados. Lista de clases.

Es muy probable que tuvieras personalizada la parte de los comentarios de tu blog y que con el nuevo sistema de comentarios anidados con respuestas, este se haya ido al garete. Lo probable es lo primero, pero si los tenías así, lo segundo es seguro.

Ocurre que el nuevo sistema incorpora un buen montón de código de todo tipo y ha cambiado radicalmente la nomenclatura de todas las clases que antes controlaban el aspecto de los comentarios. Si miráis en vuestro código, los .comment-author, #comment-block y todas esas clases que usábamos hasta ahora, siguen estando y el problema no es que se hayan borrado. El problema es que ya no sirven para nada porque los nuevos comentarios no están sujetos a ellas sino a otras con otros nombres.

Ante esto tenemos dos soluciones.

La primera que es la que mandan los cánones, sería definir las nuevas clases con las propiedades que nos interesan. La verdad es que en esta ocasión Blogger se ha portado bien dentro de lo que cabe y nos ha incluido la lista completa dentro de un includable que podéis localizar con Expandir plantillas de artilugios seleccionado y buscando la cadena threaded_comment_css.

Si queréis modificar algo lo podéis cambiar en ese mismo sitio según la guía que publico al final de esta entrada, pero si no vais a cambiar demasiadas cosas, quizás os convenga incluir en  la parte CSS de la plantilla sólo las clases a modificar y las nuevas propiedades. Así dejamos el código original de Blogger por si alguna vez lo necesitamos.

Esto último se puede hacer teniendo presente que las propiedades que existan en la parte del includable que no se modifiquen en la parte CSS, persistirán.

Esto es que si por ejemplo hay un borde en la clase .comments del includable y nosotros no hacemos ninguna referencia a border en la clase .comments de nuestro CSS, el borde se dibujará igualmente. Siguiendo este ejemplo habría que incluir en nuestro CSS un .comments {border: 0;} para que se anulara.

Esta es la lista completa que como podréis ver cuando miréis allí, ya incorpora una serie de propiedades por defecto para cada clase.

Para que se entiendan las anotaciones, para mi un comentario es lo que antes se entendía como tal, un bloque, lo que queda totalmente a la izquierda con el estilo estándar. El comentario puede incluir respuestas o no. Estas respuestas son las que aparecen dentro del bloque de un comentario y se ven con un sangrado o margen izquierdo.

La segunda solución más chapucera y para una emergencia, otro día.

Contenedor general de todo el artilugio
.comments {}

Contenedor general de comentarios. Excluye encabezamiento
.comments .comments-content {}

Enlaces Responder (y Suprimir)
.comments .comment .comment-actions a {}
.comments .comment .comment-actions a:hover {}

Lista principal de comentarios. Cada elemento (li) incluye 1 comentario y sus respuestas
.comments .comments-content .comment-thread ol {}

En combinación con otras clases, insertar un padding para que quede de menor ancho
.comments .comments-content .inline-thread {}

Bloque de respuestas a un comentario. Incluye botón para desplegar
.comments .comments-content .comment-replies {}

Bloque interior de respuestas a un comentario
.comments .comments-content .comment-thread {}
Idem anterior para ocultar el bloque cuando no hay respuestas
.comments .comments-content .comment-thread:empty {}

Aspecto general de cada comentario/respuesta
.comments .comments-content .comment {}

Diferencia padding y border para el primer/último comentario
.comments .comments-content .comment:first-child {}
.comments .comments-content .comment:last-child {}

No lo encuentro en uso. Posiciona relativamente
.comments .comments-content .comment-body {}

Bloque de autor+icono+fecha
.comments .comments-content .comment-header {}
Nombre y enlace al autor del comentario/respuesta
.comments .comments-content .user {}
Un icono relacionado con el autor, actualmente sin contenido
.comments .comments-content .icon.blog-author {}
Fecha/hora del comentario/respuesta
.comments .comments-content .datetime {}

El texto de cada comentario/respuesta. Salen siempre con estilo blockquote si este está definido en la plantilla
.comments .comments-content .comment-content {}

Lo desconozco. Parecen los enlaces para suprimir el comentario por parte de quién lo grabó
.comments .comments-content .owner-actions {}

Formularios para escribir comentarios/respuestas
.comments .comments-replybox {}
.comments .comment-replybox-single {}
.comments .comment-replybox-thread {}

Desconocido para mí
.comments .continue {}
.comments .continue a {}

Enlace para mostrar más comentarios cuando hay más de 200
.comments .comments-content .loadmore {}
.comments .comments-content .loadmore.loaded {}

Enlace para plegar/desplegar respuestas
.comments .thread-toggle {}
Iconos flecha para plegar/desplegar respuestas
.comments .thread-expanded .thread-arrow {}
.comments .thread-collapsed .thread-arrow {}

Contenedor avatar comentarista
.comments .avatar-image-container {}
Imagen avatar comentarista
.comments .avatar-image-container img {}