Personalizar los comentarios de autor.

Una de las personalizaciones que hice en los comentarios fue añadir color de fondo.
Más adelante lo que hice fue identificar el comentario del autor con un color diferente.
Esta última idea la tomé de El escaparate de Rosa y como todas sus ideas resulta genial.
Me lo han preguntado en repetidas ocasiones y siempre enlazo la entrada donde Rosa lo explica, pero últimamente hay interés en saber los pasos que he seguido para personalizar mis comentarios y este era el que faltaba así que ahí va.
Nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla de artilugios.
Buscamos el siguiente código y añadimos lo que está en negrita.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


Luego nos situamos justo antes de ]]></b:skin> y añadimos:

.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border-bottom: 1px solid #696969;
border-top: 2px double #CDC9C9;
border-left: 1px dotted #ccc;
border-right: 1px dotted #ccc;
background:#CDC9C9;
}

(Eso son los estilos que yo tengo) si sois organizados y de los que os gusta encontrar todo cuando lo buscáis lo ideal sería añadirlo donde se encuentran los estilos de los comentarios a partir de:
/* Comments
----------------------------------------------- */

Si en vuestra plantilla no encontráis esa parte podéis buscar: #comments h4 {

Con este último código que añadimos  lo que estamos haciendo es añadir estilos al comentario del autor, os he añadido los que yo tengo en estos momentos pero podéis cambiar color (background:#CDC9C9;) así como añadir diferente tipo de borde incluso añadir una imagen de fondo sustituyendo background:#CDC9C9; por background:url('aquí la url de tu imagen de fondo');

En la variedad está el gusto y podemos darle cualquier otro aspecto

Como decía este es el único paso que no tenía explicado, en una próxima entrada explicaré todos los cambios que hice en lo que concierne a la parte de los comentarios.

0 comentarios:

Publicar un comentario