Una de las cosas que me piden mucho es como agregar la posibilidad de cambiar el color de las fuentes tipográficas en Moodle, cuando se usa el editor de texto.
Es en realidad sencillo hacerlo, todavía no comprendo 🤔 como Moodle no tiene esta opción habilitada por defecto, sino que está escondida de manera recóndita en las entrañas de la configuración.
Pero tranquilo, que en este post te mostraré cómo agregar esta opción y de paso un bonus para que les des más vida a tus publicaciones en Moodle.
Tabla de contenidos
Si todavía no has caído en la cuenta de que es un editor de texto en Moodle, démosle un repaso rápido.
El editor de texto es aquel que nos permite introducir información en Moodle donde él esté disponible: imágenes, texto, vídeo, código, etc.
Para que lo entiendas mejor, te lo presento (aunque seguro lo conoces de toda la vida 🤯)
Este es él editor Atto, viene de manera predeterminada en Moodle a partir de la versión 2.7.
Atto fue construido específicamente para Moodle y sustituyó a TinyMCE como editor por defecto.
TinyMCE todavía es incorporado por Moodle ya que existen muchas personas que lo siguen prefiriendo.
Para este post voy a mostrarte como cambiar el color de las tipografías en Atto, ya que además de ser el predeterminado, es posible que Moodle en un futuro deje de soportar a TinyMCE.
Si vienes de una migración de un Moodle versión 2.6 o anterior, es casi seguro que el TinyMCE esté configurado por defecto. Ya va siendo hora que des el salto 😎, y aproveches las ventajas y mejoras que nos ofrece Atto.
Nota
Si vienes de una instalación de Moodle igual o superior a la 2.7 (no migrada), puedes saltar este paso.
Como administrador ve a: Administración del sitio > Extensiones > Editores de texto > Gestionar editores.
En el área debajo que pone: Editores de texto disponibles, haz clic en la Flecha Arriba ⬆ del campo: Arriba/Abajo que acompaña a la fila Editor HTML Atto.
Con esto lograremos que editor de texto Atto se posicione en la parte de arriba, y se establezca como predeterminado en nuestro Moodle.
Ahora que tenemos disponible Atto, vamos a habilitar el botón que nos dará la posibilidad de cambiar el color de las fuentes tipográficas en el editor de texto, que luego podrá mostrarse en el contenido de nuestros cursos.
Siempre como administrador en Moodle, dirígete a: Administración del sitio > Extensiones > Editores de texto > Editor HTML Atto > Opciones de la barra herramienta de Atto.
Ahora verás múltiples posibilidades en el campo Opciones de la barra herramienta de Atto. Muchas de ellas están habilitadas por defecto en Moodle, otras no. Cada una corresponde a un botón en el editor Atto.
Dentro de las que no están activadas por defecto 😏, está la de cambiar el color de las fuentes.
Este campo tiene cinco columnas:
Cada una de las herramientas tiene un nombre descriptivo, que es bastante explicativa por sí misma: color de fondo, Emoticon, Itálica, etc.
Por ejemplo: la herramienta que nos interesa para este post es Color de la tipografía, cuya nomenclatura es fontcolor
Para agregar la posibilidad de cambiar el color de la fuente en el editor de texto de Moodle, ve al campo en la parte de debajo que pone: Configurar barra de herramientas.
En el espacio a la derecha, agrega su nomenclatura, que en este caso es fontcolor, en la segunda línea (style1), al final de ella, precedida de una coma y un espacio.
Guarda los cambios, con el botón al final.
Si vas al editor de texto Atto de Moodle, verás un nuevo icono que nos permitirá agregar hasta seis colores para tus fuentes tipográficas.
Lo podrás usar: seleccionando el texto, escogiendo un color pulsando el nuevo icono disponible y dándolo clic a color que desees.
Con esto podremos cambiar el color de fuente 🥳
Cada línea del campo Configurar barra de herramientas corresponde a un bloque en la barra de herramientas del editor Atto. Están ordenados de izquierda a derecha y de arriba abajo.
Por ejemplo: la primera línea es collapse con la nomenclatura collapse. Esta corresponde al primer icono de izquierda a derecha de la barra del editor Atto. Así sucesivamente.
Las nomenclaturas de Opciones de la barra herramienta de Atto, puedes agregarlas en la línea que quieras, siempre que respetes la coma y el espacio entre cada una de ellas en las líneas.
Por ejemplo: puedes agregar la herramienta color de fondo para las fuentes en el editor, con la opción Color de fondo, cuya nomenclatura es backcolor.
¿En qué línea la agrego?: puede ser donde desees, pero para mantener un sentido a la barra, la agregaría en la segunda línea style1, ya que esta también es una funcionalidad de estilo de fuentes tipográficas.
Si te percataste lo que comenté arriba, con esta herramienta puede agregar hasta seis colores: blanco, rojo, amarillo, verde, azul y negro.
¡Quién quiere solo seis colores donde elegir! 🥺
Para agregar un botón con millones de colores, debemos instalar el plugin More font colours. Con él podremos añadir los colores que quieras a tus fuentes tipográficas en Moodle.
Si no sabes cómo instalar plugins en Moodle, haz uso de este artículo mío.
Este añadirá una nueva opción a la barra de herramientas Atto, llamada: Más colores de fuente, cuya nomenclatura es: morefontcolors
Repite los pasos que hicimos antes para agregarlo y ¡voila!, millones de colores a tus fuentes.
Este plugin sobrescribe al anterior que pusimos (Color de la tipografía), por lo que el icono para seleccionar los colores es el mismo: un pincel. Solo que ahora tienes más colores donde elegir y una paleta que se desplegará con el botón al final, con infinitas posibilidades.
Si te ha gustado este post, por favor no olvides dejar un comentario, sabes que me encantan. Saludos.
Ver comentarios
Muchas gracias por la explicación que fue de mucha ayuda.
Y sobre este ATTO tengo un par de dudas…
1) ¿cabe la posibilidad de poner un selector del tipo de fuente (tipografía)? Seguro que sí pero aún no he sido capaz.
Y 2) ¿se puede poner las opciones tipo insertar, ayuda, herramientas, etc… arriba?
Hola Jorge.
Sobre la fuentes, dale un vistazo a este plugin.
Puedes mover los botones en la barra de Atto, como quieras. Reordenándolos con la opción Configurar Barra de herramientas.
Por ejemplo: cambiando el botón Insertar imagen (cuya nomenclatura es image), al grupo style1 (al lado de italic), esto ubicara este icono en la parte superior. No olvides anteponer una coma y espacio al lado derecho.
Saludos.
Hola. Sencillísimo!, gracias. A veces (o la mayoría, en verdad) en los cursos que hacemos, éstos detalles importantes no lo enseñan. Gracias de nuevo.
Hola Wendy.
Me alegra que sea de ayuda.
Saludos.
Muchas gracias por la información!!
Un placer ayudar.
Saludos.
Muchas gracias por la explicación, me ha sido de mucha ayuda, aunque sigo sin poder cambiar todo el color del tema Enlightlite, el azul es muy clarito y acaba agotando la vista. Se podría cambiar de alguna forma ?
Hola Virginia.
Se puede hacer mediante CSS, pero hay que conocer las clases que usa el tema, lamentablemente no conozco el tema que mencionas.
Por lo general, es algo así:
body { color: #000000; }Donde #000000, es el color hexadecimal.
Saludos.
Gracias por la explicación, no entendía porqué en las versiones nuevas esta opción no estaba disponible. Felicidades por tus artículos, son todos muy interesantes.
Hola José.
Me alegra ser de ayuda.
Saludos.
Muchas gracias, excelente explicación si logre cambiar
Hola,
Yo no puedo ni siquiera acceder a la primera ruta que comentas.
Como administrador ve a: Administración del sitio > Extensiones > Editores de texto > Gestionar editores.
Me ha cambiado la toolbar en aula virtual de un día para otro .
Hola Cristina.
Prueba a reinstalar o actualizar tu Moodle.
Saludos.
Muchas gracias por tu excelente aportación, la página me encanta y estoy pendiente de las publicaciones.
Me alegro ser de utilidad 😊
Saludos.