En esta entrada vamos a ver c?mo personalizar los enlaces de los comentarios anidados, es decir, los enlaces de Responder, Eliminar, Respuestas, A?adir comentario, y Cargar m?s.
Muchas plantillas pasan desapercibidos esos enlaces y algunas veces pueden ser poco visibles, as? que quien quiera resaltarlos o decorarlos en esta entrada ver? c?mo hacerlo.
He preparado 5 estilos distintos para copiar y pegar, pero por supuesto se pueden modificar y personalizar al gusto de cada quien.
Para poner cualquiera de estos 5 dise?os s?lo entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> pega el c?digo de los estilos que prefieras.
/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #666; /* Color del enlace */
background: #f5f5f5; /* Color de fondo */
border-left: 2px solid #009ecf; /* Color del borde izquierdo */
border-radius: 10px; /* Borde redondeado */
text-decoration: none;
padding: 4px 8px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 26px;
font-weight: normal;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
background: #009ecf; /* Color de fondo */
border-radius: 2px; /* Borde redondeado */
text-decoration: none;
padding: 3px 6px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 22px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #777; /* Color del enlace */
/* Fondo gradiente */
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #d6d6d6) );
background:-moz-linear-gradient( center top, #ededed 5%, #d6d6d6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#d6d6d6');
background-color:#ededed; /* Color de fondo */
border:1px solid #d6d6d6; /* Color del borde */
border-radius: 4px; /* Borde redondeado */
box-shadow:inset 0px 0px 3px 0px #fff;
text-shadow:1px 1px 0px #fff;
text-decoration: none;
padding: 3px 7px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
background-color:#ff5bb0; /* Color de fondo */
border:1px solid #ee1eb5; /* Color del borde */
border-top-left-radius:37px; /* Borde redondeado */
border-top-right-radius:0px;
border-bottom-right-radius:37px; /* Borde redondeado */
border-bottom-left-radius:0px;
text-decoration: none;
padding: 3px 12px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-family:Times New Roman;
font-size:24px;
font-weight:bold;
font-style:italic;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Enlaces de los Comentarios
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Color del enlace */
/* Color del enlace */
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00; /* Color de fondo */
border:1px solid #d83526; /* Color del borde */
border-radius:4px; /* Borde redondeado */
box-shadow: 0px 10px 14px -7px #f29c93;
text-decoration: none;
text-shadow:0px 1px 0px #b23e35;
padding: 5px 9px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position: relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
Dentro de los c?digos ver?s en color verde d?nde puedes modificar los estilos principales.
En todos los casos los botones tendr?n un efecto "push" al pasar el cursor sobre ellos, si quieres a?adir m?s estilos al pasar el cursor puedes hacerlo agregando los estilos debajo de:
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
Ah? puedes cambiar lo que quieras, ya sea el color de fondo, de texto, etc.
Si quisieras personalizar cada enlace de forma individual tambi�n puedes hacerlo. Por ejemplo, si quisieras s?lo el enlace de "Responder" y "Eliminar" (recuerda que el enlace "Eliminar" s?lo es visible para los administradores del blog) entonces puedes hacerlo de esta forma:
.comments .comment .comment-actions a {Para el enlace de "Respuestas" ser?a as?:
... Aqu? los estilos ...
}
.comments .thread-toggle a {Para el enlace de "A?adir comentario" ser?a as?:
... Aqu? los estilos ...
}
.comments .continue a {Y para el enlace "Cargar m?s" as?:
... Aqu? los estilos ...
}
.comments .comments-content .loadmore a {
... Aqu? los estilos ...
}
De esta forma tan simple podemos personalizar esos peque?os detalles de la plantilla a los que muchas veces no le ponemos toda la atenci?n pero que son parte importante para los que buscan atraer comentaristas a su blog.
No comments:
Post a Comment