Modificar colores de los tipos de letra del menú superior

Modificar colores de los tipos de letra del menú superior

de Luis Fernando Ortiz Giménez -
Número de respuestas: 7
Hola gente, buenos días, vengo a pedir ayuda para ver si me podéis echar una mano.  Lo primero, datos de la instalación:

Moodle 4.1
Tema Boost

Y ahora, el contexto; estoy trabajando para adaptar nuestra futura instalación de Moodle 4.1 a la imagen corporativa.  Cuando un usuario llega a la portada de la plataforma (antes de autenticarse), se encuentra el menú que muestra la imagen. Cambiar el color de la banda superior, no ha sido mucho problema, el color de algunos tipos de letra, tampoco; pero ahora me encuentro con lo siguiente:

Esta imagen muestra el aspecto que tiene  en nuestra plataforma de desarrollo y pruebas, me encuentro que el menú de selección de idioma, está en negro, y el enlace de acceder en ese azul que no se lee muy bien. Intento cambiar ambos al color blanco del resto de los enlaces y no encuentro forma, nombre o control que pueda manipular con el procesador SCSS. 

  • La primera pregunta, por tanto es ¿Cómo cambio el color de esos enlaces/elementos?
  • La segunda, una vez ya autenticado me encuentro que al usar un enlace, da igual en que zona del dashboard, se queda en negro, incluyendo, como puede verse en la banda del menú superior, ¿se puede cambiar el color de esa funcionalidad? Y ahí incluyo también, el enlace para activar el modo edición, que con el color que tiene por defecto, es poco visible.
Perdón por la longitud del mensaje y muchas gracias por anticipado
Promedio de valoraciones: -
En respuesta a Luis Fernando Ortiz Giménez

Re: Modificar colores de los tipos de letra del menú superior

de Juan Pablo Miranda Aguayo -
Imagen de Moodlers de gran ayuda
Hola, Luis Fernando.

Hay Temas de Moodle que tienen muchas posibilidades de personalización (Adaptable, por ejemplo). Otros, sin embargo, tienen opciones limitadas, aunque normalmente todos tienen la opción de añadir código CSS personalizado.
Podrías utilizar las herramientas para desarrolladores que traen los navegadores Chrome o Firefox para determinar la "clase" de los elementos que quieres modificar y añadir el código necesario en ese campo CSS personalizado de la configuración del Tema que utilizas.

Saludos.
JP
Promedio de valoraciones: -
En respuesta a Juan Pablo Miranda Aguayo

Re: Modificar colores de los tipos de letra del menú superior

de Luis Fernando Ortiz Giménez -
Gracias Juan Pablo, en principio, he conseguido algún cambio a través precisamente de esa personalización, por ejemplo, he cambiado el fondo de la navbar y el color de la tinta del texto sin seleccionar, con estas instrucciones:

.navbar {background-color: #213C70 !important;}
/* Color de la tinta */
.navbar-light .navbar-nav .nav-link {
color:#FCFDFD;
}
Si te fijas en la captura que puse en la primera entrada, lo que busco es cambiar el color del enlace Acceder que está en la navbar al lado contrario al logotipo.  También por ahí conseguí algunos cambios con:

.usermenu {
background-color:#FCFDFD;
}

De esa forma, cambio el color de fondo del div que contiene el enlace.  Ahora bien, si sigo por este camino y aplico

.usermenu  {
            color: red;
}

No me cambia a rojo (que no es el color que quiero pero como sirve como prueba). 

Si ataco el span que contiene el enlace, de esta forma:

.login .pl-2 {
            color: red;
}

He probado variantes de css para ese span como usermenu span.login y similares y tampoco me hace caso; ya no sé si cortarme las venas o dejarlas largas guiño

Estoy bastante atacado la verdad, porque esta situación nos tiene un poco atrasados.

¿Cómo te parece que pueda solucionar esta cuestión?

Gracias y perdón por la extensión de la entrada...

Promedio de valoraciones: -
En respuesta a Luis Fernando Ortiz Giménez

Re: Modificar colores de los tipos de letra del menú superior

de Juan Pablo Miranda Aguayo -
Imagen de Moodlers de gran ayuda
Hola nuevamente, Luis Fernando.

No conozco el tema que utilizas en profundidad como para poder proponerte un código que consiga hacer lo que buscas.
No obstante, sí que te recomiendo tengas precaución con la caché. Moodle guarda en caché todo muy rapidamente y, cuando estás haciendo ese tipo de modificaciones, puede ser un dolor de cabeza.
Si no recuerdo mal, hay una forma de desactivar la caché de Moodle, y es muy útil sobretodo cuando se está modificanco la apariencia para ver los cambios y no tener que estar borrando constantemente la caché de Moodle y la del navegador que utilizas.

Esta documentación, aunque en inglés, te puede ser de utilidad: https://docs.moodle.org/dev/Developer_Mode

Un saludo.
JP
Promedio de valoraciones: -
En respuesta a Juan Pablo Miranda Aguayo

Re: Modificar colores de los tipos de letra del menú superior

de Luis Fernando Ortiz Giménez -
Bueno Juan Pablo, yo sigo trabajando.  Estaba explorando los ficheros de configuración SCSS por defecto de moodle, (preset.scss y similares) y no he encontrado todavía algo que me sirva.  Buscando, buscando, he encontrado algo que tal me pueda servir; al menos me aparecen referencias al elemento que tengo que modificar (.login) y es el moodle.css.

De hecho, tengo que valorar si puedo modificar ese fichero tal cual y si en las actualizaciones de la plataforma se hace necesario preservar ese cambio...

Casi lo olvido, estoy usando el tema Boost que viene con la versión 4.1 de Moodle...

Te iré diciendo

Un saludo y gracias

Promedio de valoraciones: -
En respuesta a Luis Fernando Ortiz Giménez

Re: Modificar colores de los tipos de letra del menú superior

de Juan Pablo Miranda Aguayo -
Imagen de Moodlers de gran ayuda
Hola, Luis Fernando.

Gracias a ti por compartir tus avances.
Es de gran utilidad para los usuarios del tema Boost que comentes cómo vas consiguiendo modificar el tema.
Igualmente sirve de referencia para usuarios de otros temas.

Te hago una recomendación, si me permites:
Mientras puedas hacer las modificaciones en la configuración de 'CSS personalizado' del tema (de este tema o de cualquier otro) sin necesidad de editar los archivos originales de Moodle, mucho mejor.
En primer lugar por lo que comentas... con cada actualización habrá que reeditar el archivo correspondiente para mantener los cambios que hiciste. Cosa que no pasaría haciéndolos en el 'CSS personalizado' del tema en cuestión.
Y, en segundo lugar, se evitan posibles errores que pueden pasar inadvertidos sobre todo para personas que no sepan exactamente lo que están haciendo o que no tengan mucha experiencia en estas lides.

Cordial saludo.
JP
Promedio de valoraciones: -
En respuesta a Juan Pablo Miranda Aguayo

Re: Modificar colores de los tipos de letra del menú superior

de Luis Fernando Ortiz Giménez -
Buenooo, ya está solucionada la cuestión, lo que tiene no fijarse en las jerarquías guiño. Al final, queda así y funciona bien:

.usermenu a{
color: el_que_interese;
}

Donde debe cambiarse el texto "el_que_interese", por el color que se desee...

Mira tu que lo tenía cerca y no poner el código a para el enlace triste

Bueno ya está...

Un saludo y gracias por vuestro tiempo.
Promedio de valoraciones: -
En respuesta a Juan Pablo Miranda Aguayo

Re: Modificar colores de los tipos de letra del menú superior

de Luis Fernando Ortiz Giménez -
Como buen informático, siempre intento simplificar o automatizar el proceso; y siguiendo la recomendación de alguien (no recuerdo quien la verdad) en una MoodleMoot; instale en nuestro entorno de pruebas el tema Boost Union y me quite de dolores de cabeza, el solito hace esos cambios a través de formularios web, una gozada oye...

Lo comento por si le sirve a alguien

Un saludo
Promedio de valoraciones: -