El avatar de los comentarios es algo
sobre lo que siempre hay preguntas ¿cómo moverrlo? ¿cómo separarlo del
nombre del autor? ¿cómo alinear ese nombre verticalmente?
El problema básico es que para mostrar los comentarios, Blogger utiliza etiquetas que usualmente no usamos (DL DT DD) y además, establece una serie de propiedades por defecto para cada una de ellas y sus contenidos. Ese codigo, lo podemos ver si expandimos la plantilla y buscamos el includable llamado comments; allí dentro, nos encontraremos con muchas cosas pero, si vamos hacia abajo, veremos los tres sectores en que están divididos; esto, es similar en cualquier plantilla, sea normal o de nuevo estilo:
El problema básico es que para mostrar los comentarios, Blogger utiliza etiquetas que usualmente no usamos (DL DT DD) y además, establece una serie de propiedades por defecto para cada una de ellas y sus contenidos. Ese codigo, lo podemos ver si expandimos la plantilla y buscamos el includable llamado comments; allí dentro, nos encontraremos con muchas cosas pero, si vamos hacia abajo, veremos los tres sectores en que están divididos; esto, es similar en cualquier plantilla, sea normal o de nuevo estilo:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
.......
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
....... el avatar y el nombre del autor .......
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
....... el texto del comentario .......
<dd class='comment-footer'>
....... la fecha del comentario y los íconos de edición .......
</dd>
.......
</dl>
Y estas son las propiedades por defecto que añade Blogger:
#comments-block .avatar-image-container img {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;}
Esto genera que los comentarios se vean parecidos a esto:
- JMiur dijo...
- Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Para poder personalizarlo, una
alternativa simple es sobrescribir algunas de esas reglas de estilo por
defecto que son las que hacen que se vea como si tuviera dos columnas,
una a la izquierda con el avatar y otra a la derecha con el resto. Por
ejemplo, podemos agregar esto:
<style>
#comments-block {margin-left: 0;}
#comments-block .avatar-image-container {position: static;}
#comments-block .avatar-image-container img {float: left;}
#comments-block .comment-body {clear: both; padding-top: 5px;}
</style>
Y el resultado será algo así:
Ahora, debemos entender qué dice el
código y porqué debemos seguir agregando cosas para posicionar el texto
del autor. Esa parte es la que está en la etiqueta DT:
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<!-- por defecto, la imagen será un icóno que dependerá de la forma del ingreso (Blogger, OpenId, Anónimo) -->
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<!-- sólo se muestra el avatares si están habilitados -->
<b:if cond='data:blog.enabledCommentProfileImages'>
<!-- esta es la imagen del avatar -->
<!-- Blogger agregará un DIV con la clase avatar-image-container -->
<data:comment.authorAvatarImage/>
</b:if>
<!-- dependiendo del acceso, el nombre es un enlace o no -->
<b:if cond='data:comment.authorUrl'>
<!-- el nombre es un enlace -->
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<!-- el nombre no es un enlace -->
<data:comment.author/>
</b:if>
<!-- el texto que sigue al nombre (dijo ...) -->
<data:commentPostedByMsg/>
</dt>
Para centrar el texto verticalmente, podemos establecer las propiedades de DT, dándole a height y a line-height, la misma altura que la imagen (en este caso 35 pixeles más dos porque tiene un borde):
