quieres saver como puedes personalizar el enlace ´´mas imformacion´´ ? aqui te lo enseñaremos
es muy facil es mas facil que hacer la tarea ñ.ñ XD
seguir los siguientes pasos
asi es como se vera
como hacerlo ?
vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos esto (como siempre, de color todo aquello que podéis cambiar):
OPCIÓN 1
.jump-link{
font: normal normal 12px Arial; /*Tipografía y tamaño del texto*/
letter-spacing: 3px; /*Espaciado entre caracteres, si no lo queréis, borradlo*/
text-align: center; /*Para que el texto quede centrado, sino left para que quede a la izquierda y right para que quede a la derecha*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/
margin-top: 30px; /*Distancia entre leer más y el texto de la entrada*/
margin-bottom: 30px; /*Distancia entre leer más y el pie de la entrada*/
}
.jump-link a{
color:#333333; /*Color del texto*/
background:#dddddd; /*Color de fondo*/
border:1px solid #333333; /*Estilo del borde*/
display:block;
padding:10px; /*Para cambiar el alto*/
}
.jump-link a:hover{
color: #333333; /*Color del texto al pasar el ratón por encima*/
background:#cccccc; /*Color de fondo al pasar el ratón por encima*/
border:1px solid #333333; /*Estilo del borde al pasar el ratón por encima*/
text-decoration: none;
}
OPCIÓN 2
El código CSS cambia ligeramente, y es este:
.jump-link{
font: normal normal 12px Arial; /*Tipografía y tamaño del texto*/
letter-spacing: 3px; /*Espaciado entre caracteres, si no lo queréis, borradlo*/
text-align: center; /*Para que quede centrado, sino left para que quede a la izquierda y right para que quede a la derecha*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/
margin-top: 30px; /*Distancia entre leer más y el texto de la entrada*/
margin-bottom: 30px; /*Distancia entre leer más y el pie de la entrada*/
}
.jump-link a{
color:#333333; /*Color del texto*/
background:#dddddd; /*Color de fondo*/
border:1px solid #333333; /*Estilo del borde*/
padding:10px 50px; /*Para ajustar el alto y el ancho*/
}
.jump-link a:hover{
color: #333333; /*Color del texto al pasar el ratón por encima*/
background:#cccccc; /*Color de fondo al pasar el ratón por encima*/
border:1px solid #333333; /*Estilo del borde al pasar el ratón por encima*/
text-decoration: none;
}
*NOTA 2: como siempre el borde se puede desglosar, por si sólo queréis el de arriba, o abajo, combinaciones.... Sólo tenéis que reemplazar la línea border:1px solid #333333; /*Estilo del borde*/ por:
border-top: 1px solid #333333; /*Borde superior*/
border-bottom: 1px solid #333333; /*Borde inferior*/
border-left: 1px solid #333333; /*Borde izquierdo*/
border-bottom: 1px solid #333333; /*Borde derecho*/
Y escoger el/los que queráis :D
No hay comentarios:
Publicar un comentario