El tiempo pasa volando, ya estamos nuevamente en diciembre, y nos trae lo más ansiado por muchos: la época navideña 🎅, donde todo es alegría y felicidad.
Y como ya se está haciendo tradición en este blog, no podía faltar un artículo dedicado a como decorar nuestro Moodle con motivos navideños. Les mostré como agregar un árbol de navidad animado, nieve cayendo y ahora le toca el turno a las luces. 😀
Sigue leyendo, ya que en este artículo te mostraré cómo añadir luces navideñas animadas en Moodle, para que la alegría llegue a los miembros de tu plataforma educativa.
Agregando código HTML para luces navideñas animadas en Moodle
Lo primero que debemos hacer es agregar el código HTML que nos permitirá posicionar las luces navideñas en Moodle y puedan ser mostradas.
En esta página puedes ver cómo queda el efecto de luces animadas, el cual está basado en el script creado por @tobyj de codepen.
Logueado como administrador, dirígete a: Administración del sitio > Apariencia > HTML adicional.
En el espacio en blanco que pone: Dentro del HEAD, añade este código:
<ul class="lightrope"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

Guarda los cambios con el botón ubicado al final.
Dando formato a las luces animadas con código CSS
Ahora que tenemos posicionadas las luces animadas con HTML, le daremos forma y las animaremos con código CSS.
Con ello conseguiremos un efecto animado muy ligero, que no recargará nuestro Moodle, ya que evitaremos el uso de JavaScript.
Nota
Para esta guía, nos basaremos en el tema Boost, que viene por defecto en las últimas versiones de Moodle. Si en tu tema, agregar código CSS no está ubicado en el mismo sitio, sugiero leer la documentación o consultar a su creador.
Ahora vamos a: Administración del sitio > Apariencia > Temas > Boost, ubícate en la pestaña Ajustes avanzados. En el campo Raw initial SCSS, agrega esto:
$globe-width: 12px; $globe-height: 28px; $globe-spacing: 40px; $globe-spread: 3px; $light-off-opacity: 0.4; .lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 100000; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; li { position: relative; animation-fill-mode: both; animation-iteration-count:infinite; list-style: none; margin: 0; padding: 0; display: block; width: $globe-width; height: $globe-height; border-radius: 50%; margin: $globe-spacing/2; display: inline-block; background: rgba(0,247,165,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1); animation-name: flash-1; animation-duration: 2s; &:nth-child(2n+1) { background: rgba(0,255,255,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5); animation-name: flash-2; animation-duration: 0.4s; } &:nth-child(4n+2) { background: rgba(247,0,148,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1); animation-name: flash-3; animation-duration: 1.1s; } &:nth-child(odd) { animation-duration: 1.8s; } &:nth-child(3n+1) { animation-duration: 1.4s; } &:before { content: ""; position: absolute; background: #222; width: ($globe-width - 2); height: $globe-height/3; border-radius: 3px; top: (0 - ($globe-height/6)); left: 1px; } &:after { content: ""; top: (0 - $globe-height/2); left: $globe-width - 3; position: absolute; width: $globe-spacing + 12; height: ($globe-height/3 * 2); border-bottom: solid #222 2px; border-radius: 50%; } &:last-child:after { content: none; } &:first-child { margin-left: -$globe-spacing; } } } @keyframes flash-1 { 0%, 100% { background: rgba(247,148,29,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,148,29,1);} 50% { background: rgba(247,148,29,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,148,29,0.2);} } @keyframes flash-2 { 0%, 100% { background: rgba(0,247,165,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);} 50% { background: rgba(0,247,165,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);} } @keyframes flash-3 { 0%, 100% { background: rgba(247,0,148,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);} 50% { background: rgba(247,0,148,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);} }

No olvides guardar los cambios.
Recarga la página en el navegador, para que puedas ver las luces animadas de navidad en tu Moodle 🥳. ¡Bastante sencillo!
Si no puedes verlas aún, limpia la caché de tu plataforma en: Administración del sitio > Desarrollo > Purgas cachés, con el botón Purgar todas las cachés.
A pesar de que las luces navideñas en Moodle parecen sobreponer los elementos de la cabecera, puedes hacer clic en ellos sin problemas 😉. Y lo mejor es que puedes verlas en dispositivos móviles, ya que es responsivo.
Espero te haya gustado esta guía, y puedas llenar de alegría navideña tu plataforma educativa con este agradable efecto.
No olvides dejar un comentario, aunque sea para felicitarnos por estas fechas. Saludos.
Buenas tardes Diógenes, de antemano muchas gracias por tus aportes, me han servido mucho. En estos momentos tengo la instancia de Moodle que ayudo a mejorar con la nieve que publicaste y el árbol de navidad (ese no me funcionó). Pero lo que si no he podido hacer funcionar son las luces. Yo he seguido todo al pie de la letra, es más, revisé el código fuente desde https://codepen.io/tobyj/pen/QjvEex, pero no me funciona. Tengo el moodle 3.9 y el theme Adaptable versión 3.9.1.3.
Tengo una versión de prueba publicada en la Internet. ¿Podrías ayudarme revisando para saber qué le falta?
Hola lezard.
Debería funcionar sin problemas, de hecho lo acabo de probar nuevamente y se visualiza perfecto en Moodle.
Prueba cambiando al tema Boost y verifica que se pueda ver.
Lamento no ser de mas ayuda.
Saludos.
Buenas tardes Diógenes, de antemano muchas gracias por tus aportes, me han servido mucho. En esta ocasión quiero preguntarte sobre otra opción decorativa para Moodle, pero para el mes de Halloween. ¿Hay algo por ahí que impacte a los usuarios y sea tan bueno como los diferentes aportes que has hecho para navidad, pero para la temática de Halloween?
Quedo atento, muchas gracias.
Hola lezard.
Me parece una buena idea 😀, agendaré esta semana próxima un artículo para un efecto sobre temática halloween.
Saludos