Avisos
Vaciar todo

Bloque superior Himalia cambiar color de texto

15 Respuestas
3 Usuarios
0 Reactions
762 Visitas
Respuestas: 60
Trusted Member
Topic starter
 

Hola a todos, continuo ultimando detalles en mi web provisional. Ahora le toca el turno, al menu block top superior, que como veis en el color que lo he configurado, las letras en blanco no quedan bien y me gustaria ponerlas en negras o un gris algo mas claro pero que se distinga. Mirando por el foro he encontrado que puede ser que se cambie en:
/themes//modules/blocktopmenu/css/superfish-modified.css

Pero no encuentro la linea y al final la voy a liar, ¿es correcto?

Que me aconsejais?

Gracias

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 27/08/2016 12:24 pm
Johnny Heredia Montiel
Respuestas: 20131
Miembro
 

Hola,

Puedes ir al fichero /themes/Himalia/css/customuser.css e insertar el siguiente código:

#currencies-block-top div.current::after {
  color: #000 !important;
  content: "";
  font-family: "FontAwesome";
  font-size: 18px;
  line-height: 18px;
  padding-left: 12px;
  vertical-align: -2px;
}
#currencies-block-top div.current {
  color: #000;
  cursor: pointer;
  line-height: 18px;
  padding: 13px 10px;
}

 
Respondido : 27/08/2016 3:35 pm
Respuestas: 60
Trusted Member
Topic starter
 

Gracias Johnny,

He agregado esas lineas al css que me comentas, y ha funcionado pero solo se ha cambiado el texto de Moneda, es decir la parte izq del bloque top, ¿que puede ser?

Gracias!


 
Respondido : 27/08/2016 7:31 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Eduardo,

Es normal que solo se haya cambiado a negro el texto de "Monedas" ya que el cambio CSS solo afectó a "#currencies-block-top".

Para "Contacte con nosotros" el estilo es:

#contact-link a:hover, #contact-link a.active {
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
}

Ojo que el color se declara en RGB y no en hexadecimal.

Un picker para que puedas saber cual color hexadecimal o seleccionado de la paleta es en RGB:

- http://www.colorpicker.com/

Saludos


 
Respondido : 27/08/2016 8:12 pm
Respuestas: 60
Trusted Member
Topic starter
 

Gracias de nuevo,

Ya lo he añadido, pero eso es para cambiar el fondo ? Es que no me cambia el color de letra simplemente al pasar el raton por encima se pone otro color. Tengo todo el fichero así:

#currencies-block-top div.current::after {
color: #000 !important;
content: "";
font-family: "FontAwesome";
font-size: 18px;
line-height: 18px;
padding-left: 12px;
vertical-align: -2px;
}
#currencies-block-top div.current {
color: #000;
cursor: pointer;
line-height: 18px;
padding: 13px 10px;
}
#contact-link a:hover, #contact-link a.active {
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0);
}


 
Respondido : 27/08/2016 8:24 pm
Respuestas: 60
Trusted Member
Topic starter
 

Entiendo que tambien tendremos que añadir el codigo para header_user_info?


 
Respondido : 27/08/2016 8:27 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Eduardo,

Es correcto lo que dices, es solo para background, pero lo que yo quería destacarte que los cambios de los textos de la derecha corresponden a la clase: #contact-link

Del mismo modo que #currencies-block-top se corresponde con el bloque de Monedas.

¿Has probado en esa clase a añadir algo como:

color: #000 !important;

Saludos


 
Respondido : 27/08/2016 9:15 pm
Respuestas: 60
Trusted Member
Topic starter
 

Estoy perdidisimo perdona... pero sigue sin funcionarme, no se que linea estoy poniendo mal, tengo asi ahora mismo el fichero:

#currencies-block-top div.current::after {
  color: #000 !important;
  content: "";
  font-family: "FontAwesome";
  font-size: 18px;
  line-height: 18px;
  padding-left: 12px;
  vertical-align: -2px;
}
#currencies-block-top div.current {
  color: #000;
  cursor: pointer;
  line-height: 18px;
  padding: 13px 10px;
}
#contact-link a:hover, #contact-link a.active {
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
    color: #000 !important;
   
}
#header_user_info a:hover, #header_user_info a.active {
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
    color: #000 !important;
    
}

 
Respondido : 27/08/2016 10:00 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Eduardo,

Si indicas en que archivo .css estás realizando el cambio de estilo para el color de la fuente podré revisarlo y darte indicaciones concretas.

Saludos


 
Respondido : 27/08/2016 10:34 pm
Respuestas: 60
Trusted Member
Topic starter
 

Hola Luis,

el archivo es este:

/home2/****/public_html/themes/Himalia/css/customuser.css


 
Respondido : 27/08/2016 10:36 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Eduardo,

Esto es lo que veo en el citado archivo:

Y esto lo que deberías poner para que este cambio de estilo prevalezca sobre el del tema:

color: #000 !important;

Saludos


 
Respondido : 28/08/2016 12:51 am
Respuestas: 60
Trusted Member
Topic starter
 

No lo entiendo, con el codigo que tengo puesto:

#currencies-block-top div.current::after {
  color: #000 !important;
  content: "";
  font-family: "FontAwesome";
  font-size: 18px;
  line-height: 18px;
  padding-left: 12px;
  vertical-align: -2px;
}
#currencies-block-top div.current {
  color: #000;
  cursor: pointer;
  line-height: 18px;
  padding: 13px 10px;
}
color: #000 !important;

No me aparece el texto del menu superior, en negro, unicamente el de la moneda, yo quiero toda la barra superior. He probado tambien con contact-link

lo siento si soy cortito


 
Respondido : 28/08/2016 1:25 am
Respuestas: 60
Trusted Member
Topic starter
 

Adjunto una imagen


 
Respondido : 28/08/2016 1:25 am
Respuestas: 60
Trusted Member
Topic starter
 

adjunto imagen


 
Respondido : 28/08/2016 1:26 am
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Eduardo,

Es importante tener conocimientos básicos de CSS para plantearte el hacer este tipo de cmabios, de lo contrario afectarás al diseño de tu web.

Si pones un código fuera de un corchete este no funcionará.

Incorrecto:

#currencies-block-top div.current {
  color: #000;
  cursor: pointer;
  line-height: 18px;
  padding: 13px 10px;
}
color: #000 !important;

Correcto:

#currencies-block-top div.current {
  color: #000 !important;
  cursor: pointer;
  line-height: 18px;
  padding: 13px 10px;
}

¿Que hace !important?

Forzar a que ese cambio CSS prevalezca sobre otros estilos de la misma clase que se apliquen a ese elemento en el archivo .css nativo del tema.

Lectura recomendada:

https://css-tricks.com/when-using-important-is-the-right-choice/

Saludos


 
Respondido : 28/08/2016 1:30 am