Reconozcámoslo: Los iconos de Moodle para las actividades y recursos de los cursos son aburridos y están desactualizados 😅.
Cuando salieron hace algunos años atrás eran sensacionales, pero le hace falta un refrescamiento para adaptarlo a los nuevos tiempos.
Y si no lo hacen los creadores de Moodle, pues lo haremos nosotros.
En este artículo te enseñaré cómo cambiar los iconos de Moodle para las actividades y recursos en los cursos, y tengas tu tema personalizado al máximo. ¡Síganme los buenos!
Importante
Para cambiar los iconos de Moodle es necesario acceder al servidor donde se aloja tu plataforma, para poder subir los nuevos archivos.
Puedes hacerlo mediante FTP. Si tienes cPanel, puedes hacer uso del Administrador de archivos.
Si no quieres andar dando vueltas por la estructura de Moodle de tu servidor en funcionamiento, recomiendo descargarlo a tu computadora y ubicar los archivos que necesites cambiar. Esto hará más sencillo el trabajo.
Ubicando el icono de Moodle que deseamos cambiar
Antes de comenzar, y si todavía no estás ubicado: estos son los iconos de los cursos de Moodle que vamos a remplazar, te mostraré como hacerlo:
Lo primero que debemos hacer es ubicar dentro del directorio de carpetas de Moodle el icono(s) que deseamos cambiar.
Los iconos de Moodle representan actividades y recursos, por lo que cada uno de ellos tienen su imagen.
Estas imágenes están ubicadas en los módulos respectivos. Por ejemplo: Cuestionario = quiz, Foro = forum, etc.
Cada módulo tiene una carpeta en Moodle, estos se encuentran agrupados en el directorio principal en la carpeta mod. Dentro de cada una de ellas se encuentra una carpeta pix.
Es importante recordar el nombre exacto de la carpeta de cada módulo donde queramos cambiar los iconos, ya que lo necesitaremos más adelante.
En esta carpeta pix, es donde se guarda los iconos de Moodle que queremos cambiar, bajo el nombre icon.
Una vez ubicado el icono a reemplazar, hemos hecho la mitad del trabajo (bueno no tanto, aunque casi 🤔)
Ahora, solo nos queda buscar el nuevo icono por el que lo vamos a reemplazar y subirlo a nuestro Moodle.
Tipos de archivos de imágenes que tienen los iconos de Moodle
Los iconos de Moodle para las actividades y recursos pueden ser de diversos tipos: png, gif, svg, jpg. Todos ellos son formatos de imagen válidos.
Los formatos más recomendables son png y svg (vectores).
Entre estos dos tipos, el mejor es el svg, ya que, al ser de imagen de vectores, no pierden calidad al ponerlos más grandes o más pequeños.
También por lo general, son ligeros en cuanto a peso (megabytes).
El único defecto de los archivos svg, es que si usas un navegador web muy antiguo es posible que no lo soporte.
Con respecto al tamaño de los iconos de Moodle:
- Para los iconos png, gif o jpg recomiendo un tamaño de 24 pixeles de alto por 24 pixeles de ancho (24×24).
- Los archivos svg al ser vectores podemos usarlos directamente sin necesidad de ajustarlos a un tamaño específico.
Un excelente sitio web donde encontrarás iconos tanto en formato svg o png es Flaticon.
El nombre de la imagen debe ser icon. Si le colocas otro nombre no funcionará 👈
Nota
Si vas a usar el icono en formato svg, pero todavía tienes personas que acceden a tu plataforma Moodle con navegadores muy antiguos. Es recomendable que tengas también el icono en formato de pixeles, como png por ejemplo.
De esta forma si el navegador no puede cargar el de vectores (recomendado), cargará el de pixeles automáticamente.
Subiendo los iconos a Moodle
Ahora que ya tenemos el icono que va a reemplazar al antiguo, vamos a subirlo a nuestra plataforma Moodle.
Vamos a la carpeta del tema que estemos usando en Moodle.
Para saber el tema que estás usando en Moodle, ve logeado como administrador a: Administración del sitio > Apariencia > Temas > Selector de temas. A la derecha del cuadro que pone Default podrás ver el nombre del tema activo.
La carpeta de temas de Moodle está ubicada en el directorio principal en theme. Dentro encontrarás las subcarpetas que contiene todos los temas.
Por ejemplo, si tienes el tema Boost, la carpeta donde se ubica sería: theme > boost.
Dentro de la carpeta del tema crearemos una carpeta llamada: pix_plugins
Si ya está creada, por favor sáltate este paso.
En ella crearemos una carpeta llamada: mod
Dentro de ella crearemos una carpeta con el nombre del módulo que contendrá el icono de Moodle a sustituir.
Si la carpeta del módulo donde está la imagen que quieres reemplazar, se llama, por ejemplo, quiz, debemos crear una una estructura de directorios igual a esta: theme > boost > pix_plugins > mod > quiz.
Por esto te pedí que no olvidaras el nombre de la carpeta del módulo que contiene la imagen a reemplazar 😉
Dentro de esta última carpeta, copiaremos el icono de Moodle a cambiar, con el nombre icon .
Ahora es necesario limpiar la cache de Moodle para que puedas ver los cambios.
Para hacerlo dirígete como administrador a: Administración del sitio > Desarrollo > Purgas cachés. Haz clic al botón Purgar todas la cache.
¡Listo!, ahora dirígete a cualquier curso y podrás deleitarte con tus nuevos iconos 😍
¡Si, ya sé!, esto es un poco rebuscado y algo difícil de entender 🤯, seguro que lo comprenderás mejor con un ejemplo práctico.
Ejemplo practico de cómo reemplazar el icono de actividades y recursos
Si quieres sustituir la imagen de la actividad Foro y suponiendo tenemos activo el tema Boost.
- Ubicamos en la carpeta de módulos (mod/nombre_del_modulo/pix) de Moodle, el que contiene la imagen a reemplazar. Toma nota del nombre de la carpeta del módulo.
Para nuestro ejemplo, la carpeta que contiene la imagen para foro es forum (por lo general tienen nombre parecidos en inglés 💡) - Localiza en el directorio principal de Moodle, el tema activo: theme > boost
- Crea en el directorio del tema boost la carpeta pix_plugins.
- Dentro de ella, crea una carpeta llamada mod.
- A continuación, crea una carpeta llamada forum en el directorio creado en el paso anterior.
La estructura de directorios resultante en Moodle sería: theme > boost > pix_plugins > mod > forum. - Dentro, coloca la imagen que reemplazará a la actual, con el nombre icon.
Si es una imagen svg, se recomienda un icono png igual para navegadores antiguos.
Por lo que tendrías dos imágenes con nombre icon: una para svg y otra para png. - Limpia la cache de Moodle.
Este será el resultado final que obtuve cambiando los iconos del quiz (cuestionario) y foro, ¿bonito verdad? 🤗
Hasta aquí este tutorial. Espero te sirva para personalizar tu Moodle.
Recuerda dejar un comentario, sabes que me encanta leerlos. Saludos.
Buenas Tardes!
Mi consulta es si el nombre propiamente URL, RECURSO, CUESTIONARIO, etc, se pueden cambiar. Ya entendí que el icono Si, pero los nombres se pueden modificar? Mi Moodle es 4.0
Hola Alejandra.
Es posible hacerlo, para ello debes personalizar el idioma de Moodle, esta guía te ayudara.
Los componentes donde debes modificarlos son los que se encuentran en la sección mod.
Espero sea de ayuda.
Saludos.
Hola, como siempre muy claros los artículos pero tengo una duda ¿con este procedimiento deben cambiar los iconos en la app de Moodle para Android? Al fin y al cabo está accediendo al mismo servidor. A mi no me cambian. ¿Hay que realizar otro procedimiento? Gracias.
Hola Cristobal.
La app de Moodle es distinta a Moodle versión web en cuanto a diseño o iconos, este post no aplica para ello.
Saludos.
Me ha ayudado muchísimo la información.
Tengo una consulta, al agregar un recurso de archivo muestra en moodle un icono distinto dependiendo cada formato del documento que se cargue. Habrá alguna forma de poder modificar estos también?
Gracias
Hola Abigail.
Sí pueden ser cambiados, pero tendría que hacer un nuevo artículo ya que tiene algunos pasos adicionales que este no contempla.
Lo agendaré.
Saludos.
Hola,
Sabes como podría cambiar la Laptop que sale en los topicos cuando no se muestran todos en la misma pantalla? Es el icono de cada tópico
Ya lo busqué en la carpeta pix pero no lo encuentro.
Saludos
Hola Cami.
No veo ninguna icono de laptop.
Este articulo va dirigido a cambiar los iconos de actividades y recursos. Cual de ellos es?
Hola, te hago una consulta, estoy usando moodle 3.10.3+.
Hay alguna forma de poner una imagen o icono al costado del nombre del curso?
Es decir tengo una lista de curosos donde se muestra un simbolo parecido al de un atomo gris, es una ruedita eliptica con 3 bolitas y a la derecha en nombre de cada curso, y debajo de estos los nombres de los profesores, queria personalizar esta parte agregandole una imagen representativa a cada curso.
Estoy usando el tema bost
gracias
Hola Martin.
Es posible hacerlo usando el pseudoelemento CSS before, pero tendría que acceder al tema para poder hacerlo.
Lamento no se de mas ayuda.
Saludos.
Consulta los iconos de video, powerpoint, imagen, excel , word. Donde se modifican
Hola Isaac.
Este articulo es aplicable a los iconos de actividades y recursos principales, no de las ramas de esta.
A los que te refieres se guardan en: pix > f, ubicado en el directorio raíz del Moodle; debes reemplazarlos hay, en todos los tamaños que se muestran.
Espero sea de ayuda.
Saludos.
Hola en el moodle 3.10 no se cambia el icono en donde están todos los iconos solo cuando se agrega si pone el icono pero donde están todas las actividad y recursos sigue apareciendo el icono viejo.
Hola greicy.
Probé este tutorial con Moodle 3.10 y sigue siendo valido, tal como se comenta en el post.
Recomiendo seguir las instrucciones detenidamente.
Saludos.
Hola excelente información y muy clara la explicación, una pregunta…
se pueden cambiar los iconos de los titulos de los bloques? o quitarlos?
Estoy usando la versión 3.9 y en especifico el bloque HTML me gustaría no mostrara el icono.
Saludos!
Hola Carlos.
En el tema Boost (que uso como base para mis tutoriales) no existen iconos en los bloques HTML (ni en otros).
Lamento no poder ayudarte.
Saludos.
Hola soy nuevo en esto del moodle , su ayuda tengo instalado el moodle 3.9 y al querer cambiar o agregar cualquier imagen me acepta pero no se visualiza tanto para los iconos de los cursos o contendido solo muestra el icono cuadrado en blanco sin imagen .
Desde le agradezco su ayuda .
Hola Luis.
Si sigues al detalle los pasos de este tutorial deberías poder hacerlo.
Recuerda limpiar la cache de Moodle al finalizar.
Saludos.
Hola,
Muy completo sus post.
Quería saber cómo cambiar el icono de «mis cursos» en el navegador principal … donde encuentro esa carpeta? tema moove … Muchas gracias.
Hola Claudio.
No comprendo la expresión: navegador principal
Con este tutorial deberias poder cambiar los iconos con cualquier tema, incluyendo Moove.
Saludos.
Hola
Genial el post, me ha funcionado, pero tengo un pequeño problema que no se si es normal y si me puedes decir, he subido el icono en formato svg, pero los veo mucho más pequeños que los originales de moodle, se ven más pequeños.
Saludos
Jose
Hola José.
El icono debería mostrarse correctamente si seguiste todos los pasos y es un icono SVG valido sin errores, ya que Moodle por defecto define el tamaño del icono en 24 pixeles de alto por 24 de ancho.
De todas formas prueba con este código CSS:
img.activityicon {height: 24px;
width: 24px;
}
Si no sabes como agregar código CSS en Moodle este post te puede ayudar.
Espero sea de ayuda.
Saludos.
Hola,
Está genial este post, me ayuda mucho.
Me gustaría saber si el icono para abrir la barra de navegación (tres rayas horizontales sobre fondo gris) también se puede cambiar de esta forma y, si es el caso, donde podría estar el icono a sustituir, ya que creo que no lo encuentro, en la carpeta de módulos por lo menos.
¡Gracias!
Saludos.
Hola Nerea.
Claro que puede cambiarse, pero eso seria tema de un post, que voy a agendar prontamente.
Por lo pronto, si quisieras cambiarlo por ejemplo, por un símbolo de «+» en un cuadrado, seria un código así:
.fa-navicon:before, .fa-reorder:before, .fa-bars:before {content: "\f0fe";
}
Espero te ayude,
Saludos.