Avisos
Vaciar todo

Como cambiar tipografia y color del menú de navegación  

 
María Isabel
 María Isabel
Usuario experto

Buenas,
mira, debo ser muy torpe pero llevo días buscando e intentando cambiar el color y la tipografía de mi menú de navegación y nada. También he mirado post de otros usuarios y lo he intentado con el firebug. Sólo alcanzo a cambiar el color de la barra del menú, por medio de Header settings, pero ni rastro de la tipografía. Me podrías indicar la manera más simple de hacerlo. Gracias de antemano

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 23/11/2016 3:29 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Puedes probar con el siguiente código CSS:

.nicdark_navigation .menu > li > a{
  color:red;
  font-family:Times;
}

Agrega este código al final de :
/wp-content/themes/babykids/style.css

El código hace referencia a un tipo de letra Times que ya tienen la mayoría de sistemas operativos cargados, si quieres usar una fuente de google entonces tendrías que realizar otros pasos, lo más simple sería que uses algún plugin que te cargue la fuentne de google y agregar la familia por CSS

Saludos.

ResponderCitar
Respondido : 23/11/2016 6:12 pm

Cursos Gratuitos WordPress

María Isabel
 María Isabel
Usuario experto

He hecho lo que me has indicado y nada. Gracias.

ResponderCitar
Respondido : 23/11/2016 6:55 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

No funciona por que esta mal puesto, debes respetar las llaves.

Hay llaves de cierre que faltan, en la parte final de tu archivo tienes:

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
    
.nicdark_navigation .menu > li > a{
  color:red;
  font-family:Times;
}

Esto es incorrecto, debe ser :

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
    
.nicdark_navigation .menu > li > a{
  color:red;
  font-family:Times;
}

Si vas a seguir haciendo cambios de diseño te sugiero revisar:
http://www.w3schools.com/css/

Saludos.

ResponderCitar
Respondido : 23/11/2016 8:16 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

María Isabel
 María Isabel
Usuario experto

Uuuupppsss, pisé la llave al meter el intro. Gracias, gracias.

Tks. por el tutorial.

ResponderCitar
Respondido : 23/11/2016 8:49 pm
María Isabel
 María Isabel
Usuario experto

Perdón, me ha desaparecido el efecto de iluminación cuando pasas el ratón.
Gracias.

ResponderCitar
Respondido : 23/11/2016 9:59 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

María Isabel
 María Isabel
Usuario experto

Perdón, me ha desaparecido el efecto de iluminación cuando pasas el ratón.
Gracias.

ResponderCitar
Respondido : 24/11/2016 1:37 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

No tengo claro que efecto tenia por lo que si puedes comentar o eliminar el código momentáneamente podremos revisar cual era el efecto que tenia.

ResponderCitar
Respondido : 24/11/2016 5:43 am

wpdoctor-revisa-la-salud-de-tu-wordpress

María Isabel
 María Isabel
Usuario experto

ya esta desconectada la variación del tipografia y color. Gracias.

ResponderCitar
Respondido : 24/11/2016 10:27 am
María Isabel
 María Isabel
Usuario experto

Un favor, me podrías indicar de paso como hacer la misma operación con el submenú desplegable, me refiero el poder cambiar la tipografía y además conservar la alteración del color al pasar el ratón.
Muxas gracias de antemano.

ResponderCitar
Respondido : 24/11/2016 10:35 am

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola María Isabel.

Espero que sea esto lo que estas buscando por que no lo tengo muy claro.

Edita el archivo style.css y añade lo siguiente:

.menu li ul a {
    color: red;
    font-family: Times;
}

Un saludo

ResponderCitar
Respondido : 24/11/2016 11:50 am
María Isabel
 María Isabel
Usuario experto

Vale, lo del color del submenú, solucionado. Lo que ocurre es que al principio de este hilo pedí precisamente eso, poder cambiar color y estilo de letra, pero al cambiarlo me ha desaparecido la característica que tenían ambos menús, de cambiar su color o iluminación, cuando pasabas el ratón por encima, o sea que se distinguía la selección de un elemento del menú.

ResponderCitar
Respondido : 24/11/2016 12:44 pm

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola María Isabel.

Ok, añadimos la propiedad hover.
Dejamos el texto como lo tienes y al pasar el ratón por encima cambiamos el color por ejemplo a rojo:

.- Añade lo siguiente:

.menu li ul a:hover {
  color:red;
  font-family:Times;
}

Como veras el código es el mismo lo que le indicamos con la propiedad hover es que solo se muestre cuando pases el ratón por encima.

Un saludo

ResponderCitar
Respondido : 24/11/2016 1:02 pm
María Isabel
 María Isabel
Usuario experto

Entonces entiendo que solo se puede hacer una cosa u otra? Lo digo porque tal y como está originariamente se ve un menú muy apagado, con poco punch y aunque tiene la característica interesante de cambiar de color cuando seleccionas, por otro lado carece de las características de imagen que creo necesita un menú.

ResponderCitar
Respondido : 24/11/2016 1:34 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola María isabel.

entiendo que solo se puede hacer una cosa u otra?
No, puedes utilizar lo que quieras, el mismo código lo puedes utilizar para el texto sin la etiqueta hover y sera lo que se represente cuando esta el texto sin pasar el raton y el mismo código pero con la etiqueta hover es lo que se representara cuando este el ratón en el texto, por ejemplo con lo que te pase, vamos hacer que se represente el texto en negro cuando no este el ratos y que se presente el texto en rojo cuando pases el ratón por encima:

.menu li ul a {
  color:#181818;
  font-family:Times;
}
.menu li ul a:hover {
  color:red;
  font-family:Times;
}

Un saludo

ResponderCitar
Respondido : 24/11/2016 2:37 pm