25 enero 2012

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

¿Problemas con los estilos de los comentarios? Preguntas y Respuestas + El Estilo de mis Comentarios para ti

comentarios de Blogger
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>
</b:includable>


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é solo las clases que edité con sus respectivas propiedades y las puse después de  ]]></b:skin> en una condición que tengo para que éste se cargue solo al estar en la página de entrada 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 ésto 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, en esta hoja de estilos:

http://www.blogger.com/static/v1/widgets/782192654-widget_css_bundle.css

Ahí fue cuando me di cuenta que cambiaron la alineación del texto (Blogger no cambio ésto, yo lo confundí con otra regla), en otra declaración, y solucioné el problema.

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, hacer click dentro del recuadro del código, y luego activar el buscador con CtrlF y poner esta linea: "<b:includable id='threaded_comment_css'>" para que te envíe al principio del código.

Una vez identificados lo eliminas.

<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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) 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 eliminas, ese CSS estará ahí sin ninguna utilidad 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, sí 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 y se visualicen igual en todos los navegadores.

Si ya tenía algunos estilos en la plantilla antes de que pusiera comentarios anidados, ¿debería conservarlos o quitarlos?

Para ser más exactos y tener los mismos resultados en todos los navegadores, yo los quitaría y definiría nuevos estilos.

Este es el CSS que envía  Blogger y que mencionaba arriba, y "hasta ahora", luce así:
#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 puede descomprimir para poder leerlos fácilmente. Si te fijas es extenso, habrá que ser cuidadosos con los estilos que pongamos en la plantilla para no repetir CSS innecesariamente.

El estilo de mis comentarios


estilo en los 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 == &quot;item&quot;'> <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 azul son los valores que puedes editar, para cambiar los colores. 

En donde:

.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, elimina: .comments .comments-content .comment-content{text-align:left;}.

Si quieres agregar el icono de lápiz para destacar el comentario del autor, es decir el tuyo, sólo agrega a los estilos anteriores, ésto:

.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 consulta una tabla de colores web.

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 las lineas de texto están muy juntas, en:

.comments .comments-content .comment-content, agregas:

line-height:1.4;

Puedes editar el valor, aumentándolo, según lo desees.

Actualización18/02/2012. Eliminé del CSS la imagen de fondo para el avatar de los comentarios, ya que Blogger ha añadido una imagen.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.