como personalizar tu pagina de acceso en el tema boost
6 minutos de lectura
•
96 comentarios

4 trucos para personalizar el Login en el tema Boost de Moodle

Foto del autor

La primera impresión lo es todo, y  Moodle no es la excepción 😎. En el tema Boost, que viene a partir de la versión 3.2, el login de entrada por defecto es una página de fondo gris y los campos de usuario y contraseña sobre un cuadrado blanco.

Es un estilo minimalista que a mí en lo particular me agrada. Pero se echa de menos algo más de vida y color que incite a interactuar con la plataforma.

Si quieres personalizar la página de acceso (login) de Moodle en el tema Boost, no dejes de leer este artículo donde te lo enseñaré paso a paso, de manera sencilla y directa.

Importante

La página de login está disponible en Moodle si tienes restringida la entrada de usuarios visitantes a la plataforma, por lo que se obliga a usar su clave y contraseña para poder acceder. Si quieres habilitar esta posibilidad, debes dirigirte como administrador a: Administración del sitio > Seguridad > Políticas de seguridad del sitio, marcar la casilla Forzar a los usuarios a iniciar sesión (Forzar a los usuarios a identificarse, en las versiones de antiguas) y guardar los cambios.

Esta guía es válida a partir de la versión 3.2 de Moodle.

Deshabilita la caché para que puedas observar los cambios en tu plataforma. Al finalizar te recomiendo volver a activarla haciendo el paso contrario. Para lograrlo entra a: Administración del sitio > Apariencia > Temas > Ajustes de temas, marca la casilla Modo de diseño de temas. Recuerda guardar los cambios.

1. Añadiendo una imagen de fondo al login de Moodle

Antes de hacer los cambios al código CSS, debemos subir la imagen que deseamos aparezca en el fondo, a la carpeta de temas de Moodle.

Puedes subirlo mediante FTP o hacer uso del Administrador de archivos, en caso de tener cPanel u otro gestor en tu servidor.

Ubica la carpeta o directorio donde está instalado Moodle, luego dirígete a theme > boost > pix; crea una carpeta dentro con el nombre que desees; en mi caso la llamaré imagenes. En ella sube la imagen que quieras como fondo del login.

Te recomiendo tenga una buena resolución, al menos 1280×720 pixeles. Optimízala para que sea ligera (no exceda unos pocos cientos de kilobytes de peso del archivo). Esta guía te puede ayudar.

Luego entra como administrador a Moodle y ve a: Administración del sitio > Apariencia > Temas > Boost. Selecciona la pestaña Advanced settings y pega el siguiente código en el campo con la etiqueta Raw SCSS.

body#page-login-index {
background-image: url([[pix:theme|imagenes/imagen-de-fondo]]);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.95;
}
@media screen and (min-width: 768px) {
body#page-login-index div#page {
margin-top: 0px !important;
padding-top: 100px;
}
}

Guarda los cambios con el botón ubicado debajo.

agregando código css en el tema boost de moodle

En el código:

  1. Donde pone imagenes , sustitúyelo por el nombre de la carpeta que creaste en el servidor
  2. Así mismo, imagen-de-fondo  por el nombre que tiene la imagen de fondo que subiste (la extensión del archivo no es necesario colocarlo)

La propiedad opacity  puedes variarla dependiendo de qué tan transparente (con respecto al fondo de la imagen) quieres que se vea el cuadro blanco donde se encuentra el usuario y la contraseña: 0 es totalmente transparente y 1 es totalmente blanco (o sea, sin transparencia); puedes usar valores intermedios como 0.4 o incluso valores más detallados como 0.999.

2. Personalizando el bloque de usuario y contraseña

El campo en color blanco, ubicado en medio de la página, es el bloque de usuario y contraseña.

Dependiendo de lo que quieras cambiar en él, agrega estos códigos en el espacio de Raw SCSS. Va uno debajo del otro.

  1. Cambia el color del fondo y borde:
    body#page-login-index div.card { 
background-color: #bde0e3; border: 1px solid #bfe0e3; 
}

    El color que prefieras lo sustituyes donde pone bde0e3 , el primero para cambiar el fondo y el otro para el color de borde. Esta web te servirá para ubicar el color (en valor hexadecimal) de tu gusto.

  2. Borde redondeado en el campo de usuario y contraseña:
    body#page-login-index div.card { 
border-radius: 6px; 
}

    Sustituye 6  por el valor que quieras. A mayor valor, más redondeado será.

  3. Separación en los campos usuario y contraseña:

     

    body#page-login-index input#username.form-control { 
margin-bottom: 5px; 
}

    Si quieres más o menos separación, modifica el 5  por el valor de tu preferencia.
    Este código es válido hasta la versión 3.4 de Moodle, si tienes una versión superior óbvialo, ya que estas incluyen la separación.

  4. Color del vínculo Olvidó su nombre de usuario o contraseña:
    body#page-login-index div.forgetpass a { 
color: #ef4f43; 
}

    Sustituye ef4f43  por el color que desees.

  5. Color de botón Acceder:
    body#page-login-index button#loginbtn.btn.btn-primary { 
color: #ffffff; background-color: #888888; border-color: #888888; 
}

    Con la propiedad color  cambias el color del texto Acceder; con background-color  y border-color  el color del fondo y borde del botón. Igual que antes, sustituye los valores que desees luego de #

  6. Color del botón Acceder cuando pasa el mouse por encima:
    body#page-login-index button#loginbtn.btn.btn-primary:hover { 
color: #ffffff; background-color: #777777; border-color: #777777; 
}

    No necesito repetir lo del color, le habrás agarrado la vuelta a estas alturas 😗

El resultado final hasta ahora, incluyendo el fondo, va quedando así:

bloque de usuario y contraseña en login de moodle

3. Cambiando el color de las fuentes y vínculos en el login de Moodle

Al haber cambiado el fondo, es posible que el texto (color blanco, predeterminado) que pone: Usted no se ha identificado, se vea opacado por el fondo. Asímismo, el color del vínculo Página Principal.

Recomiendo usar colores que contrasten con el fondo para que sean fácilmente identificables (aquí te dejo como combinar colores, que te puede ayudar).Tambien puedes usar combinaciones que sigan las líneas impuestas en el bloque de identificación de usuario, para que el diseño resulte homogéneo.

Con este código puedes cambiar el color del texto Usted no se ha identificado:

body#page-login-index footer#page-footer {
color: #ffffff !important;
}

Recomiendo adicionar lo siguiente, para permitir que se visualice bien en teléfonos móviles, ya Moodle tiende a colocar un fondo blanco en esa versión:

@media screen and (max-width: 767px) {
body#page-login-index footer#page-footer {
color: #3a3a3a !important;
}
}

Para modificar el color del link Página Principal:

body#page-login-index div.homelink a { color: #3a3a3a; }

4. Color del pie de página

Con este truco cambiaremos el color del pie de página (footer), que por defecto es un negro azulado.

Agrega esto:

body#page-login-index footer#page-footer {
background-color: transparent !important;
text-align: center;
}

El código logrará que el color del pie de página sea transparente y alinear el texto en el centro.

Si quieres un fondo de color, cambia transparent  por un color hexadecimal. Para cambiar la alineación del texto, sustituye center  por: left  para izquierda y right  para derecha.

Con esto, ya tendremos totalmente personalizado nuestra página de entrada a Moodle, para darle un toque personal. Te muestro el resultado final al personalizar mi login:

login personalizado del tema boost moodle

Cualquier duda déjala en los comentarios, que gustosamente las atenderé 😀. Saludos.

Califica este artículo

Puntuación promedio 4.9 / 5. Votos: 17

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

Foto del autor
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

También te puede interesar

como insertar una galería de fotos en moodle

Cómo agregar una Galería de Imágenes en Moodle con Lightbox Gallery

guia instalar plugins moodle

Cómo instalar plugins en Moodle

slider de imagenes en moodle

Cómo agregar un slider de imágenes en Moodle

96 comentarios en «4 trucos para personalizar el Login en el tema Boost de Moodle»

Deja un comentario

  1. Buenos dias
    se agradece tu aporte
    tengo una consulta quiero cambiar cambiar la posición de la caja de login y alinearla a la derecha,lo he intentado y nada hasta ahora
    uso moodle 4.3 y la ultima version de moove

    Gracias

    Responder

  2. Hola, placer saludarlos.

    Sólo para actualizar, en el tema boost podemos añadir un fondo a la página de login sin necesidad de usar código.
    Basta con añadirla en «Imagen de fondo para la página de inicio de sesión» Administración > Apariencia > Temas > Boost
    Tusitio.loquesea/admin/settings.php?section=themesettingboost

    Saludos

    Responder

  3. Hola
    Muchas gracias por todos los aportes dados, tengo una consulta, se podrá aumentar contenido algo así como un bloque con indicaciones de inicio en el login de moodle, no tengo acceso a cpanel del moodle donde trabajo, pero si soy administrador del sitio.
    También comentar que no se muestra la pagina principal del sitio, al cargar la pagina me direccione al login.

    Responder

    • Hola Jorge.

      Se podría agregar bloques al login en Boost, pero para ello habría que modificar el tema directamente.

      Lamentablemente esto está más allá de lo tratado en este post, además de que los cambios que se hicieran se perderían al actualizar.

      Lo que de direccionar login, lo explico al principio del post, en la nota que pone: Importante

      Lamento no ser de mas ayuda.

      Responder

    • Hola.
      Si es para Moodle 3.x, usa esta codigo:
      body#page-login-index #page-wrapper .justify-content-center {
      justify-content: left !important;
      }

      Para Moodle 4.x, este:
      body#page-login-index .login-wrapper {
      justify-content: left;
      }

      Espero sea de ayuda.
      Saludos.

      Responder

  5. tengo moodle 4.1 , tema academy, deseo cambiar el color del footer pero no logro codificarlo en el CSS, me podrias ayudar

    body#page-login-index footer#page-footer {
    background-color: transparent !important;
    }

    Responder

    • Hola Carla.
      Este post es para usar con el tema Boost de Moodle, por lo tanto, los códigos CSS no funcionaran de manera igual en Academy.
      De todas maneras, con este código, lograras lo que me pides en Academy:

      body#page-login-index #footer .footer-main, body#page-login-index #footer .footer-bootom, body#page-login-index footer#page-footer.py-3.bg-dark {
      background-color: transparent !important;
      }

      Saludos

      Responder

  7. Muy buen material.
    Estoy con problemas en el primer punto
    Cuando se sube la imagen al servidor debe tener algún formato en específico?
    La imagen que subí es en formato png, y no consigo añadir la imagen.
    De hecho al ingresar los códigos para personalizar el bloque de login, no me agarra ninguno.

    Gracias

    Responder

  9. Excelente ayuda te agradezco un montón… serias tan amable en ayudarme indicando como hacer para cambiar de color de fondo de la barra dónde esta el menú izquierdo al ingresar en el tema boost

    Responder

  10. Hola, muy bueno y funciona perfectamente en mi moodle. Me gustaría que nos enseñara a modificar el pie de página que viene en moodle, donde se dice Usuario autenticado. Gracias

    Responder

  12. Buen día Diógenes, gran aporte en este tema, fijate que he probado el código:
    body#page-login-index footer#page-footer.p-y-1.bg-inverse {
    background-color: transparent !important;
    text-align: center;
    }
    en un Moodle 3.10.1 con el tema boost y no se ejecutan las modificaciones, que podrá ser?, muchas gracias de antemano

    Responder

      • Hola, Buenas, primero gracias.
        Me pasa lo mismo, y me imagino que ya he puesto el código actualizado- ¿Qué otra cosa pudiera ser?

        Este fue el código que puse:
        body#page-login-index {
        background-image: url([[pix:theme|imagenes/fondo_login]]);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.95;
        }
        @media screen and (min-width: 768px) {
        body#page-login-index div#page {
        margin-top: 0px !important;
        padding-top: 100px;
        }
        }

        Responder

  13. Saludos. Excelente ayuda con este foro.
    Tengo una inquietud, añadir una ventana, luego de loguearse y acceder a Moodle, en la cual se muestre un mensaje y luego el usuario deba cerralo.
    Algo así como una información pero no en la página principal sino como una ventana emergente inmediatamente luego de acceder.

    Responder

  17. Muy buen blog, excelentes instrucciones, nunca se me da seguir las instrucciones así, siempre prefiero un video pero con tu explicación lo logré. Quisiera cambiar de color el título, lo que tu tienes como Moodle 33 ¿Cómo lo hago?

    Responder

  18. Hola de nuevo,

    Finalmente encontré el archivo y lo he sustituido por mi logo corporativo, pero no sé cómo hacer para que el enlace que aparezca cuando pincho en él, sea la web de mi empresa, además que el texto flotante también sea el mismo que la web.

    Gracias de nuevo y saludos.

    Responder

  19. The explanation are clear and very easy to proceed, but I don’t know what I am doing, but nothing changes my login page. I have tried many times, item per item, but nothing (version 3.8.3).

    Responder

  21. Saludos Diógenes.
    Ante todo felicitarte por la didáctica de tus explicaciones.
    Hay un tema interesante «Como poner un captcha en la ventana del login». Ayudaria a proteger el acceso a la plataforma.
    Ojalá pudieras tocarlo en algú momento.
    Desde ya, muchas gracias.
    Miguel Corzo.

    Responder

  22. Hola. Decirte que me encanta tu blog. Mi consulta es saber cómo puedo insertar, anexar a la página de login, o añadir una página donde la gente que visite la página principal de la plataforma, pueda solicitar información, contactar, etc. Esto mismo que tienes tu aquí, en el pie de tu página.
    Utilizamos este tema https://moodle.org/plugins/theme_enlightlite

    Gracias por adelantado.
    D.

    Responder

  23. Hola tu blog es excelente te pido una ayuda, como se hace para reemplazar el logo de moodle en el pie de pagina (footer) por uno personalizado.

    gracias

    Responder

    • Hola Gaston.

      La manera sencilla es creando el logo personalizado en formato svg (vectores), luego ir a la carpeta de tu Moodle: pix, y renombrar el archivo: moodlelogo_grayhat.svg, por algo como: moodlelogo_grayhat_old.svg

      A continuación sube tu logo personalizado a la carpeta pix y renombralo a moodlelogo_grayhat.svg y listo.

      No olvides purgar la cache. Es valido para las versiones mas recientes de Moodle.

      Saludos.

      Responder

      • Buenos días,
        Uso tema boost versión moodle 3.8.3, quiero cambiar el logo del footer, pero en la carpeta pix de mi moodle no localizo moodlelogo_grayhat.svg

        ¿cómo podría hacer?

        Sí está favicon.ico Si realizo los mismos pasos que comentas para ese archivo, ¿podría poner mi icono en lugar de la m de moodle con el sombrero?

        Gracias por adelantado y saludos.

        Responder

        • Hola María.
          Te aseguro que el archivo moodlelogo_grayhat.svg está en la carpeta pix de Moodle. Acabo de descargar el moodle 3.8.3 nuevamente del repositorio (para verificar si lo habían quitado), y efectivamente ahí estaba 😉
          Recuerda que la carpeta pix está en la raíz de Moodle, que no es la misma que la carpeta pix del tema.
          Saludos.

          Responder

  24. Hola, saludo caluroso.
    Felicitaciones por el blog. Muy útil.
    Tengo una consulta. Quiero colocar una imagen de lado a lado del header , antes del login, en la primera pantalla que aparece. He subido las imaenes en la opción de logotipos, pero me deja la imagen muy pequeña, sin importar el tamaño que yo suba. Le agradezco si me orienta con respecto a esto.

    Gracias

    Responder

  25. Buenas noches!!
    realmente me encanta tu blog, me esta sirviendo de mucho para poder hacer pequeñas modificaciones. El problema que me esta quedando resolver es el siguiente: tengo el tema forsdon en moodle +3.8.1 y por mas que lo intento no puedo cambiar el tamaño del titulo, en tu caso seria «moodle 33».

    Responder

  26. Hola otra vez,

    Me surgió ahora otra duda con respecto a la configuración de la pantalla de login.

    ¿Es posible ajustar la posición de cada uno de los elementos? Quiero que la opción de «¿olvidó su contraseña?» aparezca debajo de los cuadros de usuario y contraseña y no al lado.

    Otra duda que tengo es si es posible desactivar la información de las cookies, que también aparece situado en la pantalla de login.

    Realmente me gustaría algo parecido a la pantalla de login que muestras en la cabecera de este post.

    Muchas gracias por anticipado, saludos.

    Responder

    • Hola Nerea.

      Es posible cambiar la disposición de todos los elementos, pero eso seria materia de otro post.

      Sobre lo de ocultar el aviso de cookies en el login de Moodle, prueba este código CSS:

      #page-login-index div.col-md-5 div.mt-3:not(.forgetpass) {
      display: none;
      }

      Espero te ayude,

      Saludos.

      Responder

  27. Hola,

    En primer lugar felicitarte por el blog, estoy empezando con moodle y me está siendo de enorme utilidad.

    Quería preguntarte si es posible añadir un logo dentro del bloque de usuario y contraseña, al lado de donde pone Moodle 3.3, en tu caso.

    Gracias, un saludo.

    Responder

    • Hola Nerea,

      Con un pseudo elemento after se puede hacer.

      Pero te lo pongo mas fácil 😉, si cargas tu logo como administrador en: Administración del sitio > Apariencia > Logotipos, se mostrara tu logo en ese espacio (se mostrara el primer logotipo, no el compacto) con el tema Boost.

      Espero te ayude,
      Saludos.

      Responder

      • Hola, muchas gracias por este aporte. Ahora la pregunta al revés sería… cómo lo elimino? Subí un logo y no me gustó. Ahora lo quiero eliminar pero en Apariencia, Logotipos, no lo veo. Tengo Moodle 3.9.4
        Desde ya muchas gracias.

        Responder

          • Ok, lo haría si lo pudiera ver. No hay ningún archivo visible en esa pantalla. Está vacía. Pero el logo quedó puesto en la página principal. Por eso preguntaba si se podía borrar desde otro lado. Gracias

          • Si lo subiste y ahora no se muestra en Administración del sitio > Apariencia > Logotipos, es posible tengas un problema con tu Moodle.

            Intenta agregar otro logo (con nombre distinto al que subiste originalmente) y guarda los cambios, si puedes verlo ahora, bórralo como te comente antes, no olvides guardar nuevamente.

            Si aun así no funciona, prueba con este código:
            body#page-login-index .card-block img.img-fluid {
            display: none;
            }

            No es lo deseable hacerlo con el código, ya que lo que hace es ocultarlo, no quitarlo del Moodle.

            Saludos.

  29. Hola! En primer lugar, darte las gracias. Este post vale oro para los que estamos empezando.

    Quisiera poner un logo encima del cuadro de login, tipo la imagen que tenéis al comienzo del post. Debajo, el cuadro de acceso. ¿Sería posible?

    Muchas gracias de nuevo. Muy agradecido.

    Responder

  30. Hola de verdad muchas gracias por el aporte, sin duda habremos muchas personas en busca de esta valiosa información, yo quiero agregar código CSS a la plataforma moodle y desconocía como hacerlo, gracias a ti ya puedo hacerlo, deverdad muchas gracias, Disculpa.. ¿habría manera de hacer un tutoria o apoyarme para modificar un icono de moodle?

    Responder

  35. Muchas gracias por tu instructivo, sirve de mucho. Pero me surgio una duda.. como seria para cambiar el tamaño de la ventana de login. He tratado de buscar y ver opciones pero no le podido conseguirlo. Gracias de antemano!

    Responder

  36. Hola! muy buenos trucos para la personalizar el login. Tengo una dificultad. quisiera reducir el tamaño del login y ocultar las opciones de «olvido su nombre de usuario» y » las cookies deben estar habilitadas…» Gracias de antemano

    Responder

    • Hola Jorge.
      Disculpa la tardanza en responder pero tu mensaje estaba en spam.
      Esas opciones son importantes para la accesibilidad e información de los usuarios, no recomiendo ocultarlas.
      Pero si deseas hacerlo dependerá del tema que tengas, para el tuyo (que dejaste en el enlace del comentario) seria con este código CSS:

      .col-md-4.push-md-3 {
      display: none;
      }

      Esto lo oculta, pero deja ese espacio en blanco.
      Saludos.

      Responder

  37. Hola, solo he trabajado moodle desde la parte de alimentación académica, no desde lo técnico me han aparecido errores pero no he modificado nada por temor a crear otros errores. Algunos son estos en la ver. 3.0.3:
    Error 500, Plugins: checkbox, datetime menu, text, text tarea.

    QUE ME RECOMIENDAS?

    Responder

    • Hola Mayte.
      Esos errores no pueden deberse a los trucos de este post, uso solo código CSS que afecta la apariencia y disposición de los elementos, no modifica ningún archivo de Moodle,.
      Sugiero que contactes con tu hosting o soporte para estos errores.
      Es importante mencionar que siempre recomiendo hacer estos cambios en servidores de prueba, nunca en servidores en producción (funcionando para el publico).
      Saludos.

      Responder

  38. Buenos días quisiera saber como centrar todo el texto del login de Moodle es decir que todo el texto este en una columna y no en dos, estoy utilizando el tema boost.
    Gracias anticipadas.

    Responder

  39. Muy buen material.
    Estoy con problemas en el primer punto
    1. Añadiendo una imagen de fondo al login de Moodle
    No consigo añadir la imagen

    Responder

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.