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.
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 ;
padding-top: 100px;
}
}
Guarda los cambios con el botón ubicado debajo.
En el código:
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.
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.
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.
body#page-login-index div.card {
border-radius: 6px;
}
Sustituye 6 por el valor que quieras. A mayor valor, más redondeado será.
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.
body#page-login-index div.forgetpass a {
color: #ef4f43;
}
Sustituye ef4f43 por el color que desees.
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 #
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í:
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 ;
}
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 ;
}
}
Para modificar el color del link Página Principal:
body#page-login-index div.homelink a { color: #3a3a3a; }
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 ;
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:
Cualquier duda déjala en los comentarios, que gustosamente las atenderé 😀. Saludos.
Ver comentarios
Buena noche, excelente aporte, me ha ayudado mucho, ahora estoy trabajando con el tema Academi, sin embargo, lo quiero dejar como el tema Boost, ya he conseguido quitar el footer del login, pero quisiera saber si me puedes ayudar a quitar el header y el navbar, con el código Css.
Muchas gracias anticipadas.
Hola Uriel.
Prueba con este código:
#page-login-index nav#header, #page-login-index .header-main, #page-login-index #footer {display: none;
}
Saludos.
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
Hola Pedro.
Prueba este código CSS:
#page-login-index .login-container .loginform {float: right ;
}
Saludos.
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
Hola Mario.
Ciertamente, en las últimas versiones de Moodle, es posible hacerlo directamente en las opciones del tema Boost.
Gracias por el aporte.
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.
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.
Muchas gracias por la información, nos ayudó bastante. Ahora quisiéramos cambiar la posición de la caja de login y alinearla a la izquierda, cómo podemos hacerlo?
Hola.
Si es para Moodle 3.x, usa esta codigo:
body#page-login-index #page-wrapper .justify-content-center {justify-content: left ;
}
Para Moodle 4.x, este:
body#page-login-index .login-wrapper {justify-content: left;
}
Espero sea de ayuda.
Saludos.
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 ;
}
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 ;
}
Saludos
como puedo poner una imagen al lado derecho del formulario en vez de "olvido su contraseña", muchas gracias
Hola carlos.
Eso seria tema de otro post, lo agrego a mi agenda de artículos.
Saludos.
muchas gracias estare al pendiente, y felicitaciones por su post
Un placer ser de ayuda.
Saludos.
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
Hola Alejandro.
Moodle soporta archivos PNG sin problemas.
Pareces tener un problema con tu Moodle, servidor o tema.
Lamento no ser de mas ayuda.
Saludos.
Saludos...
Excelentes tus aportaciones!!!!!
Muchas gracias!!!!!!
Un placer poder ser de ayuda.
Saludos.
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
Hola Manuel.
Prueba con este código CSS:
[data-region="drawer"] {background-color: #f2f2f2;
}
Cambia
f2f2f2por el código hexadecimal de tu preferencia.Saludos.