Foros del Web » Creando para Internet » CSS »

Cambiar color de texto

Estas en el tema de Cambiar color de texto en el foro de CSS en Foros del Web. Hola amigos. Tengo ya casi terminada mi web, pero me estoy encontrado con una pega a la hora de editar el color de los enlaces ...
  #1 (permalink)  
Antiguo 13/11/2012, 10:53
Avatar de opsswat  
Fecha de Ingreso: noviembre-2012
Mensajes: 12
Antigüedad: 11 años, 5 meses
Puntos: 0
Cambiar color de texto

Hola amigos.

Tengo ya casi terminada mi web, pero me estoy encontrado con una pega a la hora de editar el color de los enlaces y texto de los bloques...si ya se, es de lo más fácil y hay un monton de tutoriales y ayuda en la red, pero este en cuestión es un autentico coñazo. Me explico...

Mi web es esta: http://www.bomberos-elche.com/

Como vereis el color de los links del menú de la izquierda son de un azul similar al color general de la web, pues bien, en el "footer" todo texto que aparece en el también es de ese mismo color y claro como el fondo es azul, casi no se ve.

Buscando en el archivo style.css me encuentro con lo que parece un apartado que obliga a que todo este en ese color, ya que modificando ese apartado, se cambian todos, el código es este:

Código:
 * Override generic html 
*/

a {
  color: #495a71;
  text-decoration: none;
  font-weight:
  outline: none;

}
Por lo que creo, lo descrito arriba obliga a que todos los enlaces y texto de los bloques, vaya en ese color.

Como lo que quiero es cambiar el color del texto que hay en el footer, pues busco en el css lo que hay respecto al footer y es esto:

Código:
 *  Footer
*/

#footer {
  /*margin-left: -100%;*/
  width: 100%;
  background-color: #efefef;
  color: #ffffff;
  font-size: 0.9em;
  font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
  background: url(../images/footer-pattern.png) repeat 0 0;
  overflow: hidden;
  height: 327px;
  
}
#footer-right{
  background: url(../images/footer-right2.png) no-repeat right bottom;
  height: 327px; 
}
#footer-left{
  background: url(../images/footer-left.png) no-repeat left bottom;
  height: 327px;
 overflow: hidden;
}
Y yo no encuentro nada que pueda modificar para cambiar el color del texto que aparece en el footer.

Lo que yo quiero es que el texto salga en blanco o un color claro que resalte.

Os pongo el archivo css para la descarga y asi poder echarle un ojo completo: http://bomberos-elche.com/misfotos/style.rar

Aunque lo principal es lo que os expuesto, me gustaria más tarde el poder añadir un pequeño icono al lado de los enlaces del menu de uusuario que hay en la izquierda, un icono como este o similar : Pero desconozco como hacerlo.

Se que es mucho, pero ya me queda solo un par de retoques para terminarlo todo, si sois tan amables, me seria de gran ayuda.

Un saludo y gracias.
  #2 (permalink)  
Antiguo 13/11/2012, 11:01
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Cambiar color de texto

prueba a añadir
#footer a{
color:#fff;
}
Porque me imagino que los links están dentro de footer, si están dentro de footer-right o footer-left utiliza
#footer-right a{
color:#fff;
}

#footer-left a{
color:#fff;
}

Por si quieres una explicación del por qué:
El "a" que pones en el primer texto en efecto es para poner los enlaces con ese color(#495a71) y el color:#fff; que tienes dentro de footer es para los textos que pongas dentro del footer. Pero lo que tu quieres cambiar es el color de los enlaces, no del resto del texto, por lo tanto, tienes que utilizar
footer a

Con eso le dices que los enlaces (a) que estén dentro de footer, tendrán los atributos que definas ahí dentro.

Dinos si te funciona

PD: Desde aquí no puedo entrar a la página, pero si me acuerdo cuando llege a casa, me bajo el css y te digo lo del icono, aunque te puedo adelantar algo:
Suponiendo que el menú esté hecho de la siguiente forma

Código HTML:
<div class="menu">
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
</div> 
Bastaría con un css como este
#menu ul li {
background: url('tu_icono.jpg') no-repeat;
padding-left:ancho_de_tu_icono px;
}

Creo que con eso basta, aunque no estoy seguro de que el padding funcione porque igual también hace el padding al icono, pero creo que debería funcionar

Última edición por javierflti; 13/11/2012 a las 11:09
  #3 (permalink)  
Antiguo 13/11/2012, 12:37
Avatar de opsswat  
Fecha de Ingreso: noviembre-2012
Mensajes: 12
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Cambiar color de texto

Gracias Javierflti por tu ayuda...te comento lo que he hecho.

Lo del footer ha funcionado a medias, y esto es porque cuando ponia la letra "a" en #footer-left a{ y lo del color, me desaparecia parte de la imgen de fondo del footer y el texto se ponia blanco, y cuando quitaba la letra "a" el fondo volvia pero la letra no cambiaba de color. Parece que la parte afectada del css es la parte de #footer-left

Código:
}
#footer-left {
  background: url(../images/footer-left.png) no-repeat left bottom;
  height: 327px;
 overflow: hidden;
}
En cuanto a lo del icono del menu, pasa algo curioso, ya que he modificado el codigo que me has dicho dejandolo como te pongo mas abajo y en vez de salir el icono al que llama la ruta "images/arrow.png" sale un puntito gris, como el que sale al listar algo, pero que no es imagen es un punto de texto. He comprobado que el archivo arrow.png existe y esta en su carpeta, pero no sale.

Código:
.block .menu ul li, .block ul.menu{
	background: url(images/arrow.png) no-repeat;
    padding-left:15px;
    list-style: none;
}
No se ¿se te ocurre algo mas?

En cuanto entres en la web, veras el punto que te comento que sale en el menu.

GRacias por tu ayuda.
  #4 (permalink)  
Antiguo 13/11/2012, 13:48
Avatar de opsswat  
Fecha de Ingreso: noviembre-2012
Mensajes: 12
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Cambiar color de texto

ACTUALIZO:

He encontrado la solución para poner el icono. He puesto el siguiente código:

Código:
.block .menu li {
	background: url(../images/arrow.png) no-repeat;
    padding-left:25px;
    list-style: none;
}
Ahora solo me falta alinearlo, seguire buscando.

Bueno pues una cosa menos, ahora solo falta solucionar lo del color del texto del footer.

Última edición por opsswat; 13/11/2012 a las 14:00
  #5 (permalink)  
Antiguo 13/11/2012, 14:10
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Cambiar color de texto

En lo del footer, has puesto footer-left y footer-left a o solo has puesto uno de los dos?
Tienes que tener los dos
El código sería así:
Código HTML:
#footer-left {
  background: url(../images/footer-left.png) no-repeat left bottom;
  height: 327px;
 overflow: hidden;
}
#footer-left a{
 color:#fff;
}
Ya me dirás
  #6 (permalink)  
Antiguo 13/11/2012, 14:25
Avatar de opsswat  
Fecha de Ingreso: noviembre-2012
Mensajes: 12
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Cambiar color de texto

Perfecto Javirflti, ahora ya sale bien .

Muchas gracias por tu ayuda
  #7 (permalink)  
Antiguo 14/11/2012, 02:47
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Cambiar color de texto

Para eso estamos, para ayudarnos.

Etiquetas: color, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:58.