JMiur [E]

Es común que pregunten por qué no cambia el color de un título aunque no hay errores de sintaxis y a simple vista, todo parece normal.

Obviamente, eso dependerá de cada caso pero, el error más común es no tener en cuenta que ese título también es un enlace y por lo tanto, lo que debe cambiarse no es el color del contenedor sino el color del contenido.

Si el HTML es algo así:
<h3 class="post-title">
  <a href="UNA_URL">el texto del título</a>
</h3>
La etiqueta H3 (o cualquier otro encabezado) es el contenedor y la etiqueta A es el contenido.

En una página web, es común que se defina el estilo de los enlaces de manera genérica y eso, afectará a todos ellos, sin importar donde estén; en este ejemplo, todos serán de color rojo y al poner el cursor encima cambiarán a amarillo:
a, a:visited, a:link  { color: red; }
a:hover { color: yellow; }
Si luego, definimos el color de las etiquetas H3 como verdes, no veremos ese cambio:
h3 { color: green; }
Para que el cambio tenga efecto, debe definirse la regla para el enlace; esto, traducido al español, significa que los enlaces que estén dentro de una etiqueta H3, sean de color verde:
h3 a { color: green; }
Lo mismo puede ocurrir si hay reglas de estilo menos genéricas pero que definen los estilos de cierto sector, por ejemplo:
.post-body a { color: black; }
.sidebar a { color: brown; }
#footer-wrapper a { color: cyan; }
Todos los enlaces contenidos dentro de esos rectángulos, serán afectados por las propiedades establecidas así que, si quiere modificarse uno de sus contenidos, hay que agregar nuevas reglas; no sólo para títulos sino para cualquier otra etiqueta, indicando de manera precisa cuál es el elemento a modificar:
.sidebar h2 a { color: green; }
.sidebar li a { color: green; }
.sidebar li a span { color: green; }

9 comentarios:

Daniel Paredes  

JMiur: yo no lo sabía hasta que me lo dijiste hace unos días. Con este post el tema me quedó clarísimo. Muchas gracias.

Responder
Graciela  

Gracias por la explicación, hay pequeños detalles que uno no le encuentra motivos :D

Responder
Ark  

Otro problema, que solemos tener al tratar de cambiar un color en un título h3, suele ser que no lo veamos por que tengamos la propiedad a:visited, incluida por defecto al principio de la hoja de estilos.

Esto hace que los enlaces ya visitados tengan un color determinado definido y distinto al que acabamos de modificar, a mi me dio muchos quebraderos de cabeza al principio.

Responder
k_nelita  

Hola JM, no se donde buscar, yo creo que lo tenías en algún lado o no se de donde lo saqué, pero ando buscando un código que hace que las imagenes de nuestro blog, cuando se ven en Google images, al pinchar en la imagen rompa el iframe y tengan que entrar al blog si o si.
Espero que me entiendas ya que me cuesta explicar esto, yo lo tengo en un blog, pero como no se como es el código no puedo buscarlo, y si lo guardé en algún lado no tengo idea...

Lo tenés en algún lado?
Gracias desde ya :)

Responder
k_nelita  

Listo JM ya lo encontré! Gracias igual, es parecido al que tenés en una entrada, pero no es el mismo.
Asunto arreglado :)

Responder
JMiur  

Es esta entrada. Cuidado que si el script no es correcto, impedirá usar Blogger mismo o parte de él como las ventanas de diseño o el neuvo escritorio.

Responder
Vinilocura  

¡Buenas JMiur! Vuelvo al lugar donde siempre encuentro respuestas.

Es sobre a:visited.

No me gusta que en mi blog los links visitados cambien de color. Pensé que un modo fácil de hacerlo era poner el link-visitado del mismo color que el link-novisitado, pero entonces los enlaces de la sidebar que han sido visitados se ven diferenciados; aquí un ejemplo: http://puu.sh/bbkj

¿Qué manera habría de solucionar eso? He probado de todo pero no lo veo.

Gracias como siempre siempre :)

¡Felices fiestas!

Responder
JMiur  

No hace falta crear dos reglas distintas, pueden unificarse:

a:link,a:visited {
border: none;
color: #683900;
text-decoration: none;
}

Los enlaces de la sidebar tienen otro tipo de regla definida así. Debes cambiar esa regla también:

.r1 a:link, .r2 a:link {
color: #434343;
}

Responder
Tiago  

Buena la información. Hay veces que uno empieza a luchar contra la compu intentando resolver un problema y se pasa horas, horas de frustración. Que alguien nos indique qué estamos haciendo mal nos cambia el día!!
Lo otra vez me regalaron unas Ofertas en Sushi Pop una amiga a la que le expliqué una fórmula re simple de excel que necesitaba para el trabajo pero que ni se le había ocurrido que existía. La posta, con esa fórmula se ahorra como 2 hs de su trabajo diario.
Saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR