Os voy a explicar cómo crear un estilo nuevo en nuestra plantilla de WordPress para textos con enlace.
Lo primero que vamos a hacer es ir al tema hijo de nuestra plantilla wordpress, o en su defecto al customizador de CSS que viene en nuestra plantilla. Yo recomiendo empezar a contruir una web desde el tema hijo (Child) porque a la larga resulta más limpio y cómodo.
Desde ahí vamos a crear un estilo nuevo para algunos enlaces de nuestra web, de modo que aquellos enlaces que lleven la etiqueta de nuestro estilo nuevo serán diferentes al resto.
Lo primero que tenemos que hacer es inventar un nombre para nuestro estilo, podemos llamarle cuchumi-pitifláutico, pero yo os recomiendo que le pongáis un nombre corto y coherente. Yo voy a llamar a mi nuevo estilo pink-over, porque mis enlaces serán de color gris, irán subrayados y pasé el ratón por encima (mouse over) cambiarán a color blanco con el fondo rosa:
Soy un enlace distinto! Ponte encima para ver el efecto!
Vamos a empezar:
Dentro de /*– esto –*/ podemos escribir lo que nos de la gana sin que afecte a nuestro código CSS. Se utiliza para escribir indicaciones que nos permitan localizar fácilmente nuestro estilo :
/*----------- PINK-OVER . Enlaces con fondo rosa al pasar ratón encima----------- */El link tiene cuatro estados y por tanto hay que definir cada una de ellos:
a:link /* Link no visitado*/
a:visited /*Link visitado*/
a:active /*Link activo*/
a:hover /*Mouse sobre el link*/
Para cada uno de los estados vamos a definir unas propiedades:
font-family /*Fuente*/
font-size: /*Tamaño*/
font-weight: /*Grosor*/
color: /*Color*/
text-decoration: /*subrayado*/
background: /*Fondo del texto*/
Existen muchas otras propiedades como el espacio entre caracteres (letter spacing), o la cursiva (Style). La lista completa de propiedades CSS para textos e imágenes la podéis encontrar aquí.
Visto esto, sólo queda empezar a escribir nuestro estilo CSS. Empezaremos definiendo el estado a:link de nuestro nuevo estilo de enlaces. Para ello decimos que es un enlace con / a. /, pegado al nombre que le hemos puesto a nuestro nuevo estilo /pink-over/ y agregamos el estado a definir, en este caso /:link/.
En mi estilo la cosa se queda así:
a.pink-over:link {
}
Dentro de los corchetes se incluirán las propiedades que queremos darle a los enlaces. En mi caso, quiero definir tipo de fuente, color, tamaño, grosor y subrayado:
a.pink-over:link {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
Los colores podemos sacarlos del picker de esta página y la familia de fuentes podemos consultarlas a través de este enlace, el resto de propiedades son bastante intuitivas y podemos ir testeándolas.
Tan fácil como esto. ¡Ya tenemos un estilo nuevo para enlaces creado!
Los enlaces marcados con esta etiqueta, tendrán una fuente sans-serif de 10px, un grosor medio (400), color gris y estarán subrayados.
Ahora queremos añadirle un estilo para el hover (mouse sobre el link) de modo que, cuando alguien ponga el ratón encima, el subrayado desaparezca, el texto sea blanco y el fondo se vuelva rosa. Para ellos definimos el estado /a:hover/:
a.pink-over:hover {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #ffffff;
text-decoration: none;
background:#ee0467
}
Nuestro CSS para enlaces ya está casi. Vamos a definir el resto de propiedades que nos faltan:
a:visited /*Link visitado*/
a:active /*Link activo*/En estos dos casos queremos que el enlace se queda igual que en el estado original, es decir, de color gris y subrayado. Por tanto copiamos el código de /a:link/ y definimos estos dos estados con las mismas propiedades:
/*----------- PINK-OVER . Enlaces con fondo rosa al pasar ratón encima----------- */
a.pink-over:link {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
a.pink-over:hover {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #ffffff;
text-decoration: none;
background:#ee0467
}
a.pink-over:visited {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
a.pink-over:active {
font-family: sans-serif;
font-size: 15px;
font-weight: 400;
color: #545454;
text-decoration: underline;
}
¡ Ya podemos comprobar cómo funciona nuestro nuevo estilo!
Guardamos los cambios, vamos a la página de nuestra web donde está el enlace que queremos estilizar y en el editor de texto, llamamos a nuestro enlace con estilo con la etiqueta:
<a class="nombredemiestilo"En el editor de texto el enlace quedaría así:
<a class="pink-over" href="http://url-enlace">¡HOLA! Soy un enlace PINK-OVER</a> Y el resultado sería este:
¡HOLA! Soy un enlace PINK-OVER