Al habilitar los comentarios anidados en mi blog, hice algunos cambios en el CSS, para darles una apariencia más personalizada. Esto lo logré, editando los estilos que Blogger enviaba aquí:
<b:includable id='threaded_comment_css'>
<style>
Toooodo el CSS
</style>
Como ya tenía nuevos estilos para este sistema, eliminé por completo los que estaban en la plantilla, para evitar problemas.
El día de ayer por la mañana, me sorprendió ver que los estilos ya no estaban aplicados, y que todo lucía tal y como se veía al principio cuando habilité los comentarios.
Inmediatamente pensé que Blogger estaba haciendo cambios y hasta me ilusioné pensando que tal vez habían arreglado el problema del salto directo a los comentarios al ingresar al post en ciertos navegadores, (hay que seguir soñando) eché un vistazo a la edición de HTML de la plantilla y ¿qué crees? estaban tal y como los edité, pero evidentemente no se estaba "interpretando".
Para solucionarlo, tomé sólo las clases que edite con sus respectivas propiedades y las puse después de ]]></b:skin> en una condición que tengo para que éste se cargue sólo al estar en la página individual y se arregló el asunto, volvieron los estilos que tenía (excepto uno) y me puse feliz y contenta.
Pese al cambio que hice, seguía teniendo problemas con la alineación de los comentarios, éstos aparecían justificados, (lo cual me choca), siendo que yo había editado cierta regla para que esto no pasará.
Me pareció extraño e inspeccioné con Chrome cada elemento en los comentarios, y vi que los estilos para los comentarios los están enviando desde allá, en esta hoja de estilos:
http://www.blogger.com/static/v1/widgets/782192654-widget_css_bundle.css
Ahí fue cuando me di cuenta que
Rayos, ¡qué lió!, ¿y qué va a pasar con el CSS que todavía aparece en la plantilla para los comentarios?
Como los estilos ya los está mandando Blogger, es inútil que los tengamos dentro de la plantilla como inicialmente los mandaron, por lo tanto habrá que quitarlos, si es que todavía los tienes, para ello, tienes que ir a la edición de HTML de la plantilla, expandir plantillas de aritulugios, buscarlos, y eliminarlos:
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 14px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 4px;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 2px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 20px;
height: 20px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:left !important;
line-height:17px;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
.datetime.secondary-text{
font-size:12px;}
cite.user{font-size:15px;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
Si no lo haces esto será una carga inútil para tu blog. El código anterior, ya no aparece en algunos blogs, lo comprobé en muchas plantillas, y en mi caso, lo quité manualmente.
Pero, ¿ahora que va a pasar, se pueden personalizar los comentarios?
Aunque Blogger envíe los estilos de los comentarios, si se pueden personalizar incluso sobrescribir algunos valores, siendo cuidadosos sobre todo cuando damos margenes y posicionamos de forma distinta los avatares, para que éstos no se vean mal.
Si ya tenía algunos estilos en la plantilla antes de que pusiera comentarios anidados, ¿debería concervarlos o quitarlos?
Para ser más exactos y tener los mismos resultados en todos los navegadores, yo los quitaría y escribiría nuevos estilos basándome en las clases que Blogger asigna al nuevo sistema de comentarios.
Puedes verificar la hoja de estilos que envía Blogger, que mencionaba arriba, y "hasta ahora", los estilos que nos mandan para los comentarios son estos:
#comments .blogger-comment-icon,.blogger-comment-icon{line-height:16px;background:url(/img/b16-rounded.gif) left no-repeat;padding-left:20px}#comments .openid-comment-icon,.openid-comment-icon{line-height:16px;background:url(/img/openid16-rounded.gif) left no-repeat;padding-left:20px}#comments .anon-comment-icon,.anon-comment-icon{line-height:16px;background:url(/img/anon16-rounded.gif) left no-repeat;padding-left:20px}.comment-form{max-width:425px;_width:410px;clear:both}.comment-link{white-space:nowrap}.paging-control-container{float:right;margin:0 6px 0 0;font-size:80%}.unneeded-paging-control{visibility:hidden}#comments-block .avatar-image-container img{-ms-interpolation-mode:bicubic;border:1px solid #ccc;float:right}#comments-block .avatar-image-container.avatar-stock img{border-width:0;padding:1px}#comments-block .avatar-image-container{height:37px;left:-45px;position:absolute;width:37px}#comments-block.avatar-comment-indent{margin-left:45px;position:relative}#comments-block.avatar-comment-indent dd{margin-left:0}iframe.avatar-hovercard-iframe{border:0 none;padding:0;width:25em;height:9.4em;margin:.5em}.comments{clear:both;line-height:1em;margin-top:10px;margin-bottom:0}.comments .comments-content{font-size:13px;margin-bottom:16px}.comments .comment .comment-actions a{padding-right:5px;padding-top:5px}.comments .comment .comment-actions a:hover{text-decoration:underline}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:left}.comments .comments-content .inline-thread{padding:.5em 1em}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comments .comments-content .comment-replies{margin-left:36px;margin-top:1em}.comments .comments-content .comment{margin-bottom:16px;padding-bottom:8px}.comments .comments-content .comment:first-child{padding-top:16px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-style:normal;font-weight:bold}.comments .comments-content .icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px}.comments .comments-content .datetime{margin-left:6px}.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:0 0 8px}.comments .comments-content .comment-content{text-align:justify}.comments .comments-content .owner-actions{position:absolute;right:0;top:0}.comments .comments-replybox{border:none;height:250px;width:100%}.comments .comment-replybox-single{margin-left:48px;margin-top:5px}.comments .comment-replybox-thread{margin-top:5px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .continue{cursor:pointer}.comments .continue a{display:block;font-weight:bold;padding:.5em}.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent}.comments .avatar-image-container{float:left;max-height:36px;overflow:hidden;width:36px}.comments .avatar-image-container img{width:36px}.comments .comment-block{margin-left:48px;position:relative}@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}table.tr-caption-container{padding:4px;margin-bottom:.5em}td.tr-caption{font-size:80%}.item-control{display:none}.item-control a,.item-action a{text-decoration:none !important}
El CSS aparece comprimido, se pueden separar para que puedas leerlos fácilmente, si te fijas es extenso, habrá que ser cuidadosos con los estilos que pongamos en la plantilla para no "repetir CSS" inecesariamente, puedes guiarte revisando las clases que corresponde a cada sección del comentario con la ayuda del navegador Chrome, por ejemplo, si no lo sabes, luego hablaremos de eso.
El estilo de mis comentarios
Para quienes usan plantillas personalizadas, y pensando en que ya son varios los que me preguntan cómo poner redondos los avatares, separar los comentarios usando borde, y destacar las respuestas de un comentario, estos son los estilos que uso y sólo tienes que ponerlos después de ]]></b:skin> :
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .comments .comments-content .comment-content{text-align:left;} .comments .comments-content .inline-thread {background: #eef2f2; border:1px solid #cedadc;}.comments .comments-content .comment {border-bottom: 1px solid #b2d1d6 !important;} .comments .avatar-image-container {border:3px solid #cedadc;} .comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; } </style> </b:if>
La parte que puse de rojo son los valores que puedes editar, para cambiar los colores, donde en:
.comments .comments-content .inline-thread: puse el color del borde (border) y fondo (background) de las respuestas de los comentarios, por eso se ven en "cajitas".
.comments .comments-content .comment: puse el borde (border) que se aplica al fondo de cada comentario, independientemente que sea repuesta o no.
.comments .avatar-image-container, puse la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá ésta como fondo, o bien cuando no haya ningún avatar, por ejemplo en comentarios de usuarios que comenten como anónimos. *Ver actualización abajo.
Si prefieres el texto justificado en los comentarios, quita todo lo que resalté de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.
Si quieres agregar el icono de lápiz para destacar el comentario del autor, es decir el tuyo, sólo agrega a los estilos ateriores, esto:
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
Para cambiar los colores puedes usar esta tabla de colores.
Nota: Recuerda eliminar los estilos de los comentarios que trae la plantilla si es personalizada, que están antes de ]]></b:skin>, y sobre todo, antes de hacer cambios, guarda una copia de seguridad de tu plantilla.
Separar las lineas del texto de los comentarios
Si sientes que están muy pegados los textos entre linea y linea, en: .comments .comments-content .comment-content, agregas:
line-height:18px;
Puedes editar el valor de 18px, aumentándolo, según lo desees.
Voy a dar un poco de tiempo, a que se defina bien esto, y luego crearé otros estilos interesantes para que puedas usarlos en tu blog ;)
Actualización 18/02/2012. Eliminé del CSS la imagen de fondo para el avatar de los comentarios, ya que Blogger ha añadido una imagen.
No hay comentarios:
Publicar un comentario