Siempre me han atraído las sombras en bordes, imágenes, fuentes, efectos y cualquier cosa que se preste personalizar. Días atrás he añadido sombra en el nombre y numeración en los comentarios, no fue idea mia pero lo vi en el blog de Espineli, me gustó y recordé que había leído una entrada de J.Miur donde hablaba de la propiedad text-shadow me di una vuelta por esa entrada y me dispuse a experimentar en el nombre de autor y contador de comentarios.
El resultado es el que ahora mismo podéis ver en mis comentarios, aunque mejor pensado añadiré alguna captura por si con el tiempo decido cambiar
Para hacerlo nos situamos en plantilla Edición de HTML y marcamos para expandir la plantilla.
Nos guiaremos buscando la etiqueta <data:commentPostedByMsg/> esa etiqueta es el texto "dijo..." que acompaña al autor del comentario, podemos sustituirla por otro texto o eliminarla. Si se hubiera eliminado con anterioridad no es problema, podemos buscar en su lugar lo siguiente:
<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/>
La siguiente línea es el enlace del autor del comentario cuando está logueado o añade nombre/url
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
Lo que haremos será añadir una clase a la etiqueta span de forma que envuelva el enlace del autor del comentario.
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <span class='autorcomentario'><data:comment.author/></span></a>
Un poco más abajo veremos otra vez <data:comment.author/> esta vez sin enlace porque se trata de la etiqueta que muestra el texto de anónimo o nombre/url, repetimos la misma operación de añadir la misma clase con la etiqueta span.
<span class='autorcomentario'> <data:comment.author/></span>
Guardamos los cambios y nos situamos justo antes de ]]></b:skin> allí añadiremos los estilos con la misma clase de la etiqueta span.
.autorcomentario{
color: #940f04;
font-size: 18px;
text-shadow: 3px 3px 3px #505050;
}
La propiedad text-shadow es la que proporciona la sombra, el color que sigue a la propiedad será el color que escogemos para esa sombra, el color de fuente será el que tenemos definido para los enlaces.
Recomiendo visitar la entrada de Vagabundia porque ofrece otros estilos diferentes para añadir sombra. Nos habla también de un filtro para Explorer con el fin de visualizar las sombras con ese navegador.
Los que tienen añadida la numeración de comentarios también pueden personalizar el contador de comentarios simplemente nos dirigimos a los estilos del contador, sería algo así:
.comentacontador {
otros estilos
.......
.......
text-shadow: 3px 3px 3px #505050;
}
