Como agregar un Árbol de Navidad animado en Moodle

Diciembre, esa época del año donde todo está decorado a tope con motivos navideños: el teléfono, la ropa, la oficina, nuestra casa, hasta el carro. 😅

Como no podía ser otra manera, también podemos decorar nuestro Moodle para estas fiestas, y así trasmitir el espíritu navideño.

En este artículo te mostraré como agregar un árbol de navidad animado en Moodle, que se cargará muy rápido y que hará las delicias de los usuarios de tu plataforma.

Así que ¡manos a la obra!, o, mejor dicho: al arbolito 🎄

Árbol de navidad animado en Moodle

Este efecto de árbol de navidad animado en Moodle, lo crearemos usando CSS e imágenes SVG: dos tecnologías soportadas por los navegadores modernos, que la hacen muy ligera (se carga rápido) y fácil de implementar.

Combina muy bien con este otro efecto de nieve cayendo que te mostré en un post anterior. Juntos pondrán a vibrar tu Moodle 🤩 en este diciembre.

Lo implementaremos en un bloque de contenido, por lo que quedará visible en las partes de Moodle que desees.

Desde aquí puedes ver cómo quedará el efecto, el cual está basado en el script creado por Michelle Barker.

Para añadirlo, accede como administrador en Moodle y ve a: Administración del sitio > Apariencia > Temas.

Aquí debes seleccionar el tema que estés usando en Moodle (tema activo). Luego ve a la pestaña de tu tema que contenga el espacio para introducir código CSS. Por lo general se encuentra en la configuración avanzada.

Para este ejemplo, usaremos el tema Boost, que viene por defecto en Moodle en las versiones más recientes.

La ruta para agregar el código CSS en Boost es: Administración del sitio > Apariencia > Temas > Boost, luego selecciona la pestaña Ajustes avanzados.

En el campo que pone Raw SCSS, agrega este código:

código css para agregar árbol de navidad animado en moodle

No olvides guardar los cambios.

Creando un bloque para agregar el código del árbol de navidad animado

Ahora activa la edición en Moodle. Por lo general con el botón ubicado en la parte superior derecha que pone Activar la edición de bloques podrás hacerlo.

Tip
Si estás en la página de inicio de Moodle y usas el tema Boost, la edición se activa haciendo clic a la rueda dentada y seleccionando Activar edición.

activar edición en los cursos de moodle

A continuación, agrega un bloque HTML con el botón Agrega bloque (ubicado por lo general a la izquierda del Moodle)

agregar bloque en tema boost moodle

El nuevo bloque creado se ubicará por defecto a la derecha del bloque de contenido central.

Edita el bloque haciendo clic en la rueda dentada y seleccionando la opción: Configurar bloque (nuevo bloque HTML).

modificando bloque html en moodle

En el campo que pone Contenido selecciona el icono Mostrar/ocultar iconos avanzados, y luego haz clic a al botón HTML.

Te recomiendo borrar el código existente en la parte de abajo.

agregando código en bloque html de moodle

Copia el siguiente código SVG en el espacio en blanco:

En la misma pantalla, en la parte inferior, con la opción desplegable que pone: Dónde aparece este bloque, puedes seleccionar donde quieres que se muestre en Moodle el bloque que contiene el árbol de navidad:

  • Mostrar solo en la página principal
  • Mostrar en la página principal y en cualquier página agregada a esta
  • Mostrar en todo el sitio

código svg para agregar árbol de navidad animado en moodle

Guarda los cambios con el botón ubicado al final.

Con esto ya deberías poder ver tu árbol de navidad animado en Moodle. 🤗

Si no puedes verlo de manera correcta, es posible que debas limpiar la caché de Moodle. Para hacerlo ve a: Administración del sitio > Desarrollo > Purgar cachés, luego haz clic al botón Purgar todas las cachés.

Cuando quieras quitar el árbol de navidad de tu Moodle, simplemente elimina u oculta el bloque que lo contiene. 😉

Espero que te haya gustado el tutorial. No olvides dejar un comentario, estos me ayuda mucho.

Califica este artículo

Puntuación promedio 1 / 5. Votos: 1

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.

Creando cápsulas de contenido
MicroLearning
con
Alcanza tus metas educativas con el curso
Aprende a hacer MicroVideos, MicroPodcast, Infografías y muchos más. A tus estudiantes le encantara.
Curso online 100% tutorizado por Marit Acuña
Me interesa
Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete