En mi trabajo administro dos Moodle de más de 2000 usuarios cada uno. Moodle es una plataforma de aprendizaje de código abierto tremendamente potente, pero también, debido a su enorme potencial, compleja en ocasiones.

Ya iré dedicándole algunas entradas a diferentes aspectos. El post de hoy trata sobre cómo personalizar la pantalla de login, que es lo primero que el usuario verá al acceder a nuestro sitio.

Los principales pasos los extraje de un post de sus foros.

  1. El primer paso es hacer obligatorio que nuestros usuarios estén logueados para acceder a la plataforma. Esto es algo opcional, si bien lo recomiendo encarecidamente.

    Administración del sitio / Seguridad / Políticas del sitio / Forzar a los usuarios a identificarse (forcelogin)

  2. Editar el archivo config.php del tema visual que estemos utilizando para indicar que nuestra página de login va a usar de ahora en adelante el archivo que vamos a crear nosotros.

    nuestro_servidor / moodle / theme / nombre_del_tema / config.php

    Buscaremos el texto siguiente:
    'login' => array(
      'file' => 'general.php',
      'regions' => array(),
      'options' => array('langmenu'=>true),
    ),

    Y lo editaremos:
    'login' => array(
      'file' => 'login.php',
      'regions' => array(),
      'options' => array('langmenu'=>true),
    ),

  3. Crearemos ese archivo en la carpeta layout de nuestro tema:
    nuestro_servidor / moodle / theme / nombre_del_tema / layout / login.php

  4. En ese archivo es donde se podrán hacer todas las modificaciones pertinentes. Además de llamar ahí a las funciones Moodle para mostrar el contenido, aplicaremos ahí css en línea, así tendremos todas las modificaciones juntas. (Aunque si lo preferís, podréis editar el css de vuestro tema.)

    Pego un ejemplo de archivo login.php. En negrita funciones de Moodle:

    login.php
    <?php echo $OUTPUT->doctype() ?>

    <html <?php echo $OUTPUT->htmlattributes() ?>>
    <head>
    <title><?php echo $PAGE->title ?></title>
    <link rel="shortcut icon" href="<?php echo $OUTPUT->pix_url('favicon', 'theme')?>" />
    <?php echo $OUTPUT->standard_head_html() ?>
    </head>
    <body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses) ?>">
    <?php echo $OUTPUT->standard_top_of_body_html() ?>

    <style type="text/css">
    /*
    * Aquí los estilos css personalizados, incluso podemos usar media queries
    */

    @media (max-width: 979px){
    /*
    */
    }
    @media (max-width: 800px){
    /*
    */
    }
    @media (max-width: 430px){
    /*
    */
    }
    </style>

    <div id="page">
    <!-- END OF HEADER -->
    <p style="text-align:center;"><img src="../logotipo.png"></p>
    <h1>Título</h1>

    <div id="content" class="clearfix">
    <?php echo method_exists($OUTPUT, "main_content")?$OUTPUT->main_content():core_renderer::MAIN_CONTENT_TOKEN ?>
    </div>

    <!-- START OF FOOTER -->

    </div>
    <?php echo $OUTPUT->standard_end_of_body_html() ?>
    </body>
    </html>

Veamos el Antes y el Después:

 

Importante: Mucha precaución tanto en un caso como en otro con las actualizaciones del tema que usemos, pues desharán estos cambios.

Mucha más información sobre cualquier aspecto de Moodle en su documentación oficial.

Personalizar Login / Bienvenida de Moodle

12 pensamientos en “Personalizar Login / Bienvenida de Moodle

  • 30 mayo, 2016 a las 06:35
    Enlace permanente

    Hola buenas noches

    Serias tan amable de explicarme cuales deberían ser las dimensiones de la imagen y si el formato de la misma puede ser cualquiera, también te consulto el archivo de la imagen lo almacenamos dentro de la carpeta layout o en que ubicación ?

    Muchas gracias por tus aportes

    Responder
    • 30 mayo, 2016 a las 09:04
      Enlace permanente

      Hola!
      El formato puede ser cualquiera de los que se emplean en la web (jpg, gif, png…).
      Sobre el tamaño, pues depende del tipo de imagen. Si va a ser una imagen que se repite en mosaico, no es necesario que sea de grandes dimensiones. Si va a ser una fotografía que cubra todo el fondo, recomiendo al menos que sea de 1280 x 960 px, se verá aceptablemente en pantallas full hd incluso, y no ocupará demasiado.
      La ubicación del archivo, puedes usar la que más te convenga. La raíz de tu instalación moodle será “url(../bg.jpg)”. Si no subes un nivel, estarás en la carpeta “/login/” de tu instalación.

      Finalmente, recuerda que los cambios se perderán si actualizas el tema, así que recuerda guardar copia de seguridad.

      Un saludo!

      Responder
      • 30 mayo, 2016 a las 16:31
        Enlace permanente

        Hola Buenos días
        Quisiera pedirte una ayuda nuevamente, en dos ocasiones modifique la ruta de la imagen en el login.php.

        Titulo/h1>

        Titulo/h1>

        Pero resulta que la imagen queda posicionada arriba de la caja del login, es decir la misma no queda de fondo

        Me podrías orientar en este caso que proceso debería realizar nuevamente.

        Gracias por tus aportes,

        Responder
        • 30 mayo, 2016 a las 20:59
          Enlace permanente

          Para que se aplique la imagen correctamente en el fondo, ésta debe ser el background del elemento body.

          Puedes revisar este enlace de w3schools que habla de ello.

          Responder
  • 2 diciembre, 2016 a las 11:16
    Enlace permanente

    Hola en mi caso me aparece en el texto de login la palabra ENTRAR y me gustaria quitarla para dejar la ventana mas limpia en ese espacio. Gracias.

    Responder
    • 3 diciembre, 2016 a las 23:48
      Enlace permanente

      Hola!
      En ese caso, primero debes identificar el elemento y luego ocultarlo.
      Es probable que el texto que dices sea mostrado en un h2 que puedes ocultar así:

      .loginbox h2 {
      display: none;
      }

      Puedes leer mucho más sobre ocultación de elementos con CSS en este enlace.

      Responder
  • 31 enero, 2017 a las 04:10
    Enlace permanente

    hola tengo una pregunta , como añado link’s en la parte de abajo de las ‘cookies’ deben estar habilitadas en su navegador.

    espero me puedas ayudar.

    gracias..

    Responder
    • 31 enero, 2017 a las 21:49
      Enlace permanente

      Hola!
      Puedes añadir el html, en este caso los enlaces, debajo de la línea:
      < ?php echo $OUTPUT->standard_end_of_body_html() ?>

      Responder
  • 4 agosto, 2017 a las 17:46
    Enlace permanente

    hola,
    es el mismo procedimiento para la versión moodle 3.1 ?
    hice lo mismo, pero tengo el siguiente error..

    page layout file [dirroot]/theme/base/layout/general.php does not contain the main content placeholder, please include “main_content() ?>” in theme layout file.

    Responder
    • 4 agosto, 2017 a las 21:07
      Enlace permanente

      Hola!
      Pues debería revisarlo. Hace tiempo ya que hice este post. En cuanto pueda lo comprobaré 😉

      Responder
  • 8 septiembre, 2017 a las 15:57
    Enlace permanente

    Hola estoy usando la versión 3.3.1 y no ubico
    ‘login’ => array(
    ‘file’ => ‘general.php’,
    ‘regions’ => array(),
    ‘options’ => array(‘langmenu’=>true),
    ),

    solo tengo en config.php
    // The site home page.
    ‘frontpage’ => array(
    ‘file’ => ‘frontpage.php’,
    ‘regions’ => array(‘side-pre’),
    ‘defaultregion’ => ‘side-pre’,
    ‘options’ => array(‘nonavbar’ => true),
    ),
    // My dashboard page.
    ‘mydashboard’ => array(
    ‘file’ => ‘mydashboard.php’,
    ‘regions’ => array(‘side-pre’),
    ‘defaultregion’ => ‘side-pre’,
    ‘options’ => array(‘nonavbar’ => true, ‘langmenu’ => true),
    ),
    // Internal course modules page.
    ‘incourse’ => array(
    ‘file’ => ‘incourse.php’,
    ‘regions’ => array(‘side-pre’),
    ‘defaultregion’ => ‘side-pre’,
    ‘options’ => array(‘nonavbar’ => false, ‘langmenu’ => true),
    ),
    ];

    Gracias

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *