Alinear el texto y el avatar en los comentarios

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:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  .......
  <dt expr:class='&quot;comment-author &quot; + 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.

4/03/2011 12:09:00 PM

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='&quot;comment-author &quot; + 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):