Problema al cambiar el color de los enlaces en WordPress

jordigl · #1 (**permalink**) 18/09/2011, 13:25

Estoy editando unas plantillas en WordPress y mi objetivo es poder cambiar el color de los enlaces. Voy a la hoja de estilos (style.css) e intento cambiar el color.

Me encuentre ante esto:

Código HTML:

a:link { text-decoration: none; color : #003F93; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:active { text-decoration: underline; color : #FF3300; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:visited { text-decoration: none; color : #FF3300; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:hover	{ text-decoration: underline; color : #CC0000; border: 0px; -moz-outline-style: none; font-weight: bold;} 
a:focus { outline: none;-moz-outline-style: none; font-weight: bold;}

La cosa es que cambio los colores HTML a mi gusto, y nada. ¡No se cambian! ¿Qué puedo hacer? ¿Estoy editando en el lado incorrecto?

Muchísimas gracias de antemano. ¡Un saludo!

daPhyre · #2 (**permalink**) 18/09/2011, 14:55

1) ¿Cuáles son los valores personalizados que pones?

2) ¿Dónde modificas los colores.?

3) ¿Qué ocurre o no ocurre que debería?

Cualquiera de estos puede tener la respuesta a tu pregunta...

webfreelance · #3 (**permalink**) 20/09/2011, 03:33

Normalmente wordpress utiliza estilos compuestos o clases para definir los estilos. Lo que intentas cambiar son los estilos generales de los enlaces, pero cada parte de la web tendrá su propio estilo aparte.

Para saber que estilo afecta a cada parte de la web (cuando no es mía la web), utilizo la inspección de elementos del Chrome, Firefox también lo tiene, y otros imagino que también.

Saludos.

jordigl · #4 (**permalink**) 20/09/2011, 13:38

Cita:

Iniciado por daPhyre

1) ¿Cuáles son los valores personalizados que pones?

2) ¿Dónde modificas los colores.?

3) ¿Qué ocurre o no ocurre que debería?

Cualquiera de estos puede tener la respuesta a tu pregunta...

Modifico los valores de los colores en #003F93. Pongo colores en el mismo lenguaje HTML. ¿Qué ocurre? Nada, los valores que pongo no aparecen, siguen apareciendo siempre los mismos colores.

¡Muchas gracias!

ArturoGallegos · #5 (**permalink**) 20/09/2011, 13:51

lo mas seguro que sus estilos están entrando en conflicto con alguna otra regla CSS, como ya le indicaron revise si sus enlaces tienen alguna clase o id que los afecte, considere la jerarquía de CSS para su buen funcionamiento...

por otro lado -moz-outline-style esta fuera de uso es algo precario seguir utilizando eso cuando ya se puede usar outline:none;

por cierto cuando dice que siguen apareciendo del mismo color... estos son rojos? lo pregunto por que usted esta separando :link de :visited y por mas que cambie el color de :link al ya haber visitado el link este jamas cambiara (haber si me entiendes que hasta yo me revolvi jeje)

Cita:

a:link { text-decoration: none; color : #003F93; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:active { text-decoration: underline; color : #FF3300; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:visited { text-decoration: none; color : #FF3300; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:hover { text-decoration: underline; color : #CC0000; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:focus { outline: none;-moz-outline-style: none; font-weight: bold;}

jordigl · #6 (**permalink**) 20/09/2011, 14:13

Cita:

Iniciado por Ag666

lo mas seguro que sus estilos están entrando en conflicto con alguna otra regla CSS, como ya le indicaron revise si sus enlaces tienen alguna clase o id que los afecte, considere la jerarquía de CSS para su buen funcionamiento...

por otro lado -moz-outline-style esta fuera de uso es algo precario seguir utilizando eso cuando ya se puede usar outline:none;

por cierto cuando dice que siguen apareciendo del mismo color... estos son rojos? lo pregunto por que usted esta separando :link de :visited y por mas que cambie el color de :link al ya haber visitado el link este jamas cambiara (haber si me entiendes que hasta yo me revolvi jeje)

Me estoy haciendo un poco de lío. Haber, yo abro la página de estilos y me encuentro con el cuadrito de enlaces que he copiado. He buscado por toda la página y sólo he encontrado esta para cambiar los enlaces. El color HTML predefinido encaja cuando previsualizo la plantilla, pero al cambiarlo por otro valor, nada no se cambia.

Entonces, ¿tengo que activar outline:none y quitar el otro. ¿Puedes ponerme el resultado?

¡Muchísimas gracias por la ayuda! ;=)

ArturoGallegos · #7 (**permalink**) 20/09/2011, 14:42

una equivalencia recortada de tu código seria

Código CSS:

Ver originala{text-decoration: none;color:#003F93!important;font-weight:bold;outline:none;}
a:active{text-decoration:underline;color:#F30!important; }
a:visited{color:#f30!important;}
a:hover{color:#c00!important;text-decoration:underline;}

dado que tu problema es con los colores agregue la etiqueta !important, pruebalo asi y dinos si ya hizo el cambio de color como lo querías

jordigl · #8 (**permalink**) 21/09/2011, 06:44

Cita:

Iniciado por Ag666

una equivalencia recortada de tu código seria

Código CSS:

Ver originala{text-decoration: none;color:#003F93!important;font-weight:bold;outline:none;}
a:active{text-decoration:underline;color:#F30!important; }
a:visited{color:#f30!important;}
a:hover{color:#c00!important;text-decoration:underline;}

dado que tu problema es con los colores agregue la etiqueta !important, pruebalo asi y dinos si ya hizo el cambio de color como lo querías

He cambiado la estructura por esta simplificada y nada. ¡No se cambia!

Está jodida la cosa.

¡Muchas gracias de todas formas!

ArturoGallegos · #9 (**permalink**) 21/09/2011, 10:32

no se rinda compañero la cosa va empezando jaja

tiene el sitio en vivo? pasenos un enlace a su sitio utilizando un acortador de url
de esa forma podemos revisar a detalle el código en cuestión y detectar los errores que pudiese tener

jordigl · #10 (**permalink**) 21/09/2011, 13:21

Cita:

Iniciado por Ag666

no se rinda compañero la cosa va empezando jaja

tiene el sitio en vivo? pasenos un enlace a su sitio utilizando un acortador de url
de esa forma podemos revisar a detalle el código en cuestión y detectar los errores que pudiese tener

Tengo la plantilla en pruebas, no obstante la activaré para que le eches un ojo. Te mando la URL por mensaje privado.

¡Gracias por tu ayuda! Haber si lo arreglamos. Saludos.

ArturoGallegos · #11 (**permalink**) 21/09/2011, 13:50

compañero para garantizar mas respuestas y una mayor posibilidad de resolver el problema es bueno dejar su link abierto al publico de allí que yo le recomiende utilizar un acortador de url para disfrazarla y no le afecte en sus estadísticas o al menos en una proporción insignificante.

dicho esto... he pasado a ver su sitio y me enfoco en el menú lateral derecho, en 5 min saque el código necesario para solventar su problema ya le tocara a usted complementarlo siguiendo la sintaxis del mismo.

todo su problema radica al tener declarado .SR li a{....} que tiene mucho mas peso en su CSS que la etiqueta a{...}

para solventarlo has de escribir tus estilos siguiendo la misma cadena de selectores quedando por ejemplo pensando en segmentar por grupos...

Código CSS:

Ver original/*Síguenos por:*/
.SRL a{color:#FF00FF}
/*Red Sistema Textual*/
.SRL li a{color:#00FF00}
/*Post Recientes*/
.SRL .RecentPosts li a{color:#CC99FF}
/*Categorias*/ 
.SRL .cat-item a{color:#3366FF}

o igual limítate a cambiar o eliminar .SR li a{...}

jordigl · #12 (**permalink**) 21/09/2011, 14:58

Cita:

Iniciado por Ag666

compañero para garantizar mas respuestas y una mayor posibilidad de resolver el problema es bueno dejar su link abierto al publico de allí que yo le recomiende utilizar un acortador de url para disfrazarla y no le afecte en sus estadísticas o al menos en una proporción insignificante.

dicho esto... he pasado a ver su sitio y me enfoco en el menú lateral derecho, en 5 min saque el código necesario para solventar su problema ya le tocara a usted complementarlo siguiendo la sintaxis del mismo.

todo su problema radica al tener declarado .SR li a{....} que tiene mucho mas peso en su CSS que la etiqueta a{...}

para solventarlo has de escribir tus estilos siguiendo la misma cadena de selectores quedando por ejemplo pensando en segmentar por grupos...

Código CSS:

Ver original/*Síguenos por:*/
.SRL a{color:#FF00FF}
/*Red Sistema Textual*/
.SRL li a{color:#00FF00}
/*Post Recientes*/
.SRL .RecentPosts li a{color:#CC99FF}
/*Categorias*/ 
.SRL .cat-item a{color:#3366FF}

o igual limítate a cambiar o eliminar .SR li a{...}

Vale, elimino todos los .SR, exactamente estos:

Código HTML:

.SR li a { padding: 2px 0px 3px 8px; color: #FF3300; text-decoration: none; border-bottom: solid 1px #d4e3f4; background: url(images/CategIco.png) no-repeat left top; width: 290px; display: block;}  
.SR li a:visited { color: #CC0000 text-decoration: none; border-bottom: solid 1px #d4e3f4;} 
.SR li a:hover { text-decoration: underline; color: #CC0000
; border-bottom: solid 1px #d4e3f4;}

Y cambio los valores de:

Código HTML:

a:link { text-decoration: none; color : #800080; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:active { text-decoration: underline; color : #FF3300; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:visited { text-decoration: none; color : #FF3300; border: 0px; -moz-outline-style: none; font-weight: bold;}
a:hover	{ text-decoration: underline; color : #CC0000; border: 0px; -moz-outline-style: none; font-weight: bold;} 
a:focus { outline: none;-moz-outline-style: none; font-weight: bold;}

Y nada, ¡no funciona! Esto empieza a desesperarme mucho.

ArturoGallegos · #13 (**permalink**) 21/09/2011, 15:04

juraría que si iba a funcionar, has probado colocar el código que te di de muestra? colócalo tal como te lo doy al final de tu CSS.... ese si lo probé y me consta que funciona 100% seguro

Código CSS:

Ver original/*Síguenos por:*/
    .SRL a{color:#FF00FF}
    /*Red Sistema Textual*/
    .SRL li a{color:#00FF00}
    /*Post Recientes*/
    .SRL .RecentPosts li a{color:#CC99FF}
    /*Categorias*/
    .SRL .cat-item a{color:#3366FF}

colócalo tal cual al final de cualquier hoja style.css de las dos que tiens y veras que si cambia los colores

jordigl · #14 (**permalink**) 22/09/2011, 13:09

Cita:

Iniciado por Ag666

juraría que si iba a funcionar, has probado colocar el código que te di de muestra? colócalo tal como te lo doy al final de tu CSS.... ese si lo probé y me consta que funciona 100% seguro

Código CSS:

Ver original/*Síguenos por:*/
    .SRL a{color:#FF00FF}
    /*Red Sistema Textual*/
    .SRL li a{color:#00FF00}
    /*Post Recientes*/
    .SRL .RecentPosts li a{color:#CC99FF}
    /*Categorias*/
    .SRL .cat-item a{color:#3366FF}

colócalo tal cual al final de cualquier hoja style.css de las dos que tiens y veras que si cambia los colores

Haber, sigue sin funcionar. He borrado los dos fragmentos de código que copié en mi mensaje anterior. Después añadí el código que me has copiado, ajustándolo con los colores que quiero. Pero, como siempre: no se cambia.

El código que me has pasado de síguenos por ¿no es el de la sidebar?

ArturoGallegos · #15 (**permalink**) 22/09/2011, 13:25

men tu solo te estas complicando la vida, hay de dos o andas muy presionado y sientes que se te cierra el mundo o de plano no tienes ni la mas mínima idea de CSS

acabo de entrar a tu sitio y encuentro este codigo

Código CSS:

Ver original.SR ul { padding: 0px; margin: 0px; }
.SR li { padding: 0px; margin: 0px; list-style-type: none;}
.SR li a { padding: 2px 0px 3px 8px; color: #FF3300; text-decoration: none; border-bottom: solid 1px #d4e3f4; background: url(images/CategIco.png) no-repeat left top; width: 290px; display: block;}  
.SR li a:visited { color: #CC0000 text-decoration: none; border-bottom: solid 1px #d4e3f4;} 
.SR li a:hover { text-decoration: underline; color: #CC0000
; border-bottom: solid 1px #d4e3f4;}

si tu le dices a un enlace vas a ser de color naranja y en tu imaginación piensas ahora seras verde... el link no va cambiar por arte de magia tienes que quitar el color naranja y colocar el verde, no hay de otra mijo

Cita:

.SR li a { padding: 2px 0px 3px 8px; color: #FF3300; text-decoration: none; border-bottom: solid 1px #d4e3f4; background: url(images/CategIco.png) no-repeat left top; width: 290px; display: block;}

#f30 o #ff3300 es una variante de naranja tirandole a rojo

si tu quieres que cambie por -> #003F93 simple ve y cambia ese código por

Cita:

.SR li a { padding: 2px 0px 3px 8px; color: #003F93; text-decoration: none; border-bottom: solid 1px #d4e3f4; background: url(images/CategIco.png) no-repeat left top; width: 290px; display: block;}

pasa a dar lectura sobre xhtml y CSS puedes empezar por aquí

y aqui tienes una guia de colores para que saque los codigos
-> clic aquí

-----------------------------

y si el código que puse para síguenos afecta a todo el sidebar pero coloque código extra siguiendo la jerarquía para que cambien el resto de los bloques independientemente, si no lo has probado exactamente como te lo di (sin cambios) te invito a hacerlo y veras el efecto

jordigl · #16 (**permalink**) 23/09/2011, 16:40

Cita:

Iniciado por Ag666

men tu solo te estas complicando la vida, hay de dos o andas muy presionado y sientes que se te cierra el mundo o de plano no tienes ni la mas mínima idea de CSS

acabo de entrar a tu sitio y encuentro este codigo

Código CSS:

Ver original.SR ul { padding: 0px; margin: 0px; }
.SR li { padding: 0px; margin: 0px; list-style-type: none;}
.SR li a { padding: 2px 0px 3px 8px; color: #FF3300; text-decoration: none; border-bottom: solid 1px #d4e3f4; background: url(images/CategIco.png) no-repeat left top; width: 290px; display: block;}  
.SR li a:visited { color: #CC0000 text-decoration: none; border-bottom: solid 1px #d4e3f4;} 
.SR li a:hover { text-decoration: underline; color: #CC0000
; border-bottom: solid 1px #d4e3f4;}

si tu le dices a un enlace vas a ser de color naranja y en tu imaginación piensas ahora seras verde... el link no va cambiar por arte de magia tienes que quitar el color naranja y colocar el verde, no hay de otra mijo

#f30 o #ff3300 es una variante de naranja tirandole a rojo

si tu quieres que cambie por -> #003F93 simple ve y cambia ese código por

pasa a dar lectura sobre xhtml y CSS puedes empezar por [URL="http://www.librosweb.es/"]aquí[/URL]

y aqui tienes una guia de colores para que saque los codigos
[URL="http://www.colorschemer.com/online.html"]-> clic aquí[/URL]

-----------------------------

y si el código que puse para síguenos afecta a todo el sidebar pero coloque código extra siguiendo la jerarquía para que cambien el resto de los bloques independientemente, si no lo has probado exactamente como te lo di (sin cambios) te invito a hacerlo y veras el efecto

He editado ya varias plantillas, sé cambiar un color en CSS.

Lo que no entiendo es porque cuando me aproximo para ver el color qué es, me encuentro ante una gradación.

Bueno, me rindo. Déjalo. Gracias de todas formas.