JMiur [E]

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.


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í:


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.


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):
#comments-block dt {
  height: 37px;
  line-height: 37px;
}
Si además, queremos que ese texto del autor se separe o agregarle alguna clase de personalización, dado que este y la imagen misma pueden ser enlaces, lo mejor es que los diferenciemos nosotros, envolviendo el nombre en algún SPAN que podamos identificar:
<span class='autor'>
  <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
  <b:else/>
    <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
</span>
Ahora, con todo esto, podemos agregar más propiedades
#comments-block .autor, #comments-block-demo.demo3 .autor a {
  color: #EEE;
  font-family: Julee;
  font-size: 24px;
  padding-left: 10px;
}
#comments-block .autor span {
  font-size: 18px;
}


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.

21 comentarios:

Graciela  

Muy bien explicado, probaré :)

Responder
Pliactom  

Se ve interesante, gracias por compartir. :D

Responder
Liliana  

Muchas gracias, todo está muy claro. Cuídate y que tengas un bonito día.

Responder
Adrián J. Messina  

Que bueno, me pondré a jugar un poco a ver que resultados me da.
Los comentarios y avatares no les he dedicado bastante.

Un abrazo.

Responder
Tapestryworkerman  

... coincido con Graciela, buena explicación, me lo guardo en tareas pendientes ;)
Un saludo y gracias.

Responder
Gem@  

El tema de el avatar en comentarios es un tema presente cada día, ocurre como con las imágenes de fondo y las medidas de la plantilla y como todos los días alguien se estrena ... queda guardada la entrada :)

Responder
Cêz  

Gem@ tiene mucha razón, en fin, cuando vi esta entrada, pensé que debería hacer otro intento porque hay un detalle que no me agrada mucho, es decir, centrar el contenido del comentario para alinearlo con el nombre del autor (como si tuviera dos columnas, una para imagen y otra para Autor y su Comentario) como el primer ejemplo pero sin alterar el avatar y ubicación del Autor.

Mi código, según yo para recorrer el texto del comentario y no surte algún resultado cuando le cambio alguna que otra cosilla:
#comments-block .comment-body { /*bloque de comentario*/
margin: 0px 0px 0px 0px;
text-align:justify;
font-size: 13px;
}
Me estoy equivocando? o tienes alguna sugerencia?

Responder
JMiur  

Una fornma sería darle altura a la parte del autor que contiene el avatar y el nombre; por ejemplo:

.comment-author {
........
height:46px;
}

No sé exactamente cuál es el esquema gráfico que buscas.

Responder
Cêz  

Perdona por no explicarme bien, en los comentarios de mi blog Asicious,
tienen un detalle que me gustaria corregir:

acomodar el comentario "actual" (imagen aquí) hacia la derecha así como esa imagen. sin alterar el resto del diseño del espacio del comentarista. Espero haber sido claro.

Responder
JMiur  

La forma más simple es que les coloques un margen a la izquierda agregándole la lapabra !important para que se sobrescriba la regla de Blogger. Por ejemplo:

#comments-block .comment-body {
..........
margin-left: 70px !important;
}

Responder
Cêz  

JMiur! muchísimas gracias! eso es lo que justamente buscaba y ahora entiendo el código, ¡important, parece que es algo que Blogger debe interpretar una plantilla con mucha atención.

Que tengas un buen finde :)

Responder
JMiur  

!important es una palabra que se agrega a una propiedad para forzar su uso; no es algo de Blogger sino del CSS. Se debe emplear prudentemente y suele ser necesaria, dependiendo de la forma en que están estructuradas las reglas de estilo.

Responder
mdlmb  

Hola, me solucionaste el problema, gracias, era tan solo agregar una línea más que modificar ahora se ve así http://dl.dropbox.com/u/37643524/C_Web/Coment1.PNG :D. Mi objetivo era cambiar el formato de mis comentarios y con ese espacio que había no se iba ver bien.
Ahora viendo tu blog he intentado modificar el avatar, la imagen deseo que se vea más grande tal como dice en tu entrada el mío se ve tal como la imagen que te muestro en este comentario, los códigos son distintos no encontraba la linea y buscaba palabras clave usando avatar para ver si la atinaba cambiaba aunque sea números y ningún efecto. ¿Se debe acaso de la naturaleza inicial de mi plantilla (Mínima Dark creada por blogger 2006)?, y como pregunta adicional pienso en hacer otro blogger con las nuevas plantillas que han salido, ¿los tips de este blogger u otros son aplicables también? o la naturaleza es distinta y solo sirven para los clásicos en caso quiera cambiar algo. Gracias.

Responder
JMiur  

Muchas propiedades no las verás en las plantillas, las agrega Blogegr por defecto así que debes agreagrlas a la plantilla para sobrescriboir esos datos.

Los datos básicos son los mismos en toa plantilla, vieja o nueva, lo que cambia es la distribución y/o las etiquetas.

En el caso de los comenatrios, Blogger ha implementado un nuevo sistema> por lo tanto, dependerá de cuál sistema uses, habrá diferencias sustanciales.

Responder
Pavelkapaz  

Hola JMiur, como siempre muchas gracias por la información.
Queria solicitar tu ayuda con un problema que surgio derrepente con los avatar, que guiandome por tu tutorial estaba intentando solucionar, pero no lo he logrado. El problema aparecio derrepente y sin haber hecho cambios en la plantilla, es probable que alguna de las actualizaciones de blogger me haya afectado (creo eso ya que hace un buen tiempo que no me metia a la plantilla de mi blog).

El problema es que de un momento a otro las imagenes de los avatar en los comentarios se cortaron. El tamaño era de 48x48, revise la plantilla y sigue con esas medidas, pero aun así se ven cortadas. Nose que sera, te dejo una entrada para que veas el problema haber si sabes qué es lo que es.

AQUÍ UNA ENTRADA

Te agradecería la ayuda
Saludos

Responder
Pavelkapaz  

:S Perdon, escribi mal el codigo del enlace:
CLICK AQUÍ

Responder
JMiur  

Probablemente, eso ocurre proque aunque no uses los nuevoscomentarios anidados, hay aguna regla de estilo de ese modelo que se carga igual y afecta tu blog.

Por l oque veo, podrias cambair un poco la rgla de tal forma que dijera esto:

.avatar-image-container {
float: left !important;
height: 48px;
margin: 0;
max-width: 100% !important;
overflow: visible !important;
padding: 0;
width: 48px !important;
}

Ahi se agrega el !importat en varias propiedades para sobrescribir las de Blogger y height la agrego por las dudas

Y agreagr max-width a esta otra:

.avatar-image-container img {
max-width: 100% !important;
...........
}

Responder
Pavelkapaz  

Muchas gracias JMiur, poniendo tal cual el codigo el problema se soluciono. En serio muchas gracias por la ayuda.
un abrazo, saludos

Responder
JMiur  

Me alegra que funcionara, Pavelkapaz.

Responder
Amiitha  

Buena JMiur (^.^)/
esto sirve con los nuevos comentarios?

JMiur  

Si te refieres a los anidados tal como los crea Blogger, no, ese sistema no tiene flexibilidad.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR