Aprender CSS – Modificando Enlaces

El modo en que se muestran los enlaces en un theme de WordPress se determina con la hoja de estilos del mismo. Cada plantilla de WordPress está codificada con ligeras variaciones pero una vez localizado el código es muy fácil de cambiarlas. Lo que voy a tratar en esta entrada es una sencilla guía que te dé una comprensión general acerca de como cambiar el aspecto y comportamiento de los enlaces en una plantilla de WordPress.

Antes de nada debes asegurarte de que los archivos del theme tengan permisos de escritura y puedas editarlos desde tu panel de administración. No obstante, en mi caso siempre prefiero editarlos desde el cliente FTP con la ayuda de mi editor de código favorito (Smultron). Los permisos correctos para editar estos archivos suelen ser 666, y estarán localizados en «wp-content/themes/tuplantilla«.

Como decía antes, cada theme está codificado de distinto modo, y los enlaces en el título del blog, la cabecera, la barra lateral, pié de página o contenido, pueden tener estilos distintos en la hoja de estilos (normalmente el fichero llamado «style.css«). Elos enlaces básicos de la parte del contenido pueden ser algo así:

a {
color: #333366;
text-decoration: none;
}

a:visited {
color: #333366;
text-decoration: none;
}

a:hover {
color: #336699;
text-decoration: none;
}

El primer apartado corresponde a los enlaces normales (a), y verás que en la primera línea se define el color de los mismos, mientras que en la segunda puedes elegir si tendrá subrayado por defecto (underline) o sin subrayado (none). El segundo apartado, con la misma estructura, marcará el aspecto de los enlaces que ya haya visitado tu lector (visited) mientras que la última parte es la que añade estilo a tus enlaces cuando el visitante coloca el cursor sobre el mismo, y antes de hacer clic sobre el enlace (hover).

Otro ejemplo, este de los enlaces de cabecera, podría ser parecido a este:

#header a {
color: #333366;
text-decoration: none;
}

#header a:visited {
color: #333366;
text-decoration: none;
}

#header a:hover {
color: #336699;
text-decoration: none;
}

Fíjate de la llamada a la cabecera (header) antes de la llamada al enlace (a), esto especifica que el enlace es relativo a la cabecera, en concreto a los enlaces que aparezcan en la misma, normalmente referidos al título del blog.

También puedes encontrarte una sección dedicada a la barra lateral, en la que vendría marcada por su identificador (p.ej. «sidebar«), pero la estructura sería la misma que en los casos anteriores.

Por supuesto, antes de hacer cambios en tu hoja de estilo siempre es recomendable que hagas una copia de seguridad de la misma para poder recuperarla en caso de que no te guste el resultado de los cambios que realices.

Otro día tocaremos algún otro aspecto del CSS si te parece bien.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 4)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

4 comentarios en “Aprender CSS – Modificando Enlaces”

  1. Justo lo que estaba buscando ademas de otras. porque los enlaces en la plantilla que elegi no se notan, es decir mantienen el mismo color del texto,, y tampoco tienen algun subrayado o algo que se note que es un enlace. Bueno vamos a ver si puedo hacerlo, de lo contrario tendre que seguir con la forma manual, dando color con el editor de texto.

  2. Hola, sabes tengo un problema en el theme p2, que es que no he encontrado donde modificar el color de los links que estan naturalmente en celeste. Estoy creando con esa plantilla y no he podido modificar ese color que lo quiero cambiar por azul. Muchas gracias, este problema que hablo lo pueden ver en http://www.curto.com.uy/muro

  3. Pingback: Aprender CSS – Cambiar tipos de letra y estilos | Ayuda WordPress

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido