Customizing login page layout?

Customizing login page layout?

by Dan Jackson -
Number of replies: 22

While I'm not new to Moodle, I've never tried to do any real customisation, and while I do know a smattering of CSS and PHP I feel like it would be better to find out the proper "Moodley" way to achieve what I want to do.

The Problem

We've just upgraded to Moodle 3.9.4 and are using the Classic theme (3.7+ forced a theme change, and Classic was the most similar to what we had before). However, because we want users to log in using their Office 365 accounts, we need to make some changes to the appearance of the login page so that users are not confused by the presence of a login and password box. But we still need the login and password box to be there, so that manual accounts, administrators and our Moodle support contractors are able to login to the site, we just need it to be lower down the page (or ideally hidden until something's clicked).

What we've done so far

We've kind of bodged it with CSS at the moment. It looks kind of okay provided your screen resolution is 1920x1080 but anything other than that and it looks like crap. You can see what it looks like here: https://moodle.longroad.ac.uk/moodle/login/index.php

Here is a screenshot:

A screenshot of the Long Road Sixth Form College login page


The question is, how do we achieve this in the proper "Moodley" way so that it will work across all screen sizes and devices? I've tried to read up on this and while it seems like I need to make some sort of change to the theme I just got lost in it all and am hoping someone can point me in the right direction. I literally just want to move the component parts of the page around a bit (as shown above).

Can anyone offer any advice or suggestions?

Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Hugo Ribeiro -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
While I'm not an expert on the issue, I'd say you should build a Boost child theme and then override (just copy and change the file for the right path in your theme) the mustache template for the login page
This way your changes are safe if you need to update Moodle.

Forgive me If I'm saying something wrong but maybe someone of the more experienced folks can confirm this info.
Average of ratings: Useful (1)
In reply to Hugo Ribeiro

Re: Customizing login page layout?

by Dan Jackson -
I had thought that myself, but it's not at all clear to me which part of that template corresponds to which box / set of items on the Moodle login page. And given that there's only a course_content_header, a main_content and a course_content_footer it seems likely that some more advanced approach might be needed.

EDIT: after experimenting on our test site I can see the things I want to move around are all part of the main_content. So changing the template will not help me, I need some more advanced technique than that.
Average of ratings: -
In reply to Hugo Ribeiro

Re: Customizing login page layout?

by Dan Jackson -
Further research suggests that I'd need to override the renderer for the login form. I can't believe I'm the only person that wants to be able to customise the layout of the login form, I don't understand why there isn't already a plugin or add-in or something that can already do this?

I've tried having a look at the involved PHP code but I have no idea what lives where. I just want to move the content around a bit.

Wouldn't even need to do this if Moodle's internal login form was intelligent enough to realise "oh, this user uses OpenID for their auth method, maybe instead of just spitting out 'invalid login' I'll forward them on to the appropriate auth mechanism".
Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
This has been a bugbear for ages as the login page has no renderer (there is an MDL somewhere for this, I forget where). Thus there is no proper Moodly way bar doing as much as you can with the 'login' page layout in the theme, but the structure of the markup you're stuck with what 'main_content' outputs, i.e.

    <div id="page" class="container-fluid mt-0">
        <div id="page-content" class="row">
            <div id="region-main-box" class="col-12">
                <section id="region-main" class="col-12" aria-label="{{#str}}content{{/str}}">
                    {{{ output.course_content_header }}}
                    {{{ output.main_content }}}
                    {{{ output.course_content_footer }}}
                </section>
            </div>
        </div>
    </div>

As in Boost's login mustache template.

Average of ratings: -
In reply to Gareth J Barnard

Re: Customizing login page layout?

by Dan Jackson -
@Gareth J Barnard - actually it seems a renderer and template was added for the login page, according to https://tracker.moodle.org/browse/MDL-55517, but it's still beyond my ability to override the renderer without some pointers as to what I'd need to change.
Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
There is, but...
The template and renderer basically just call the $OUTPUT function and that's all they do, so the box has been ticked in that those files exist, but the issue hasn't gone away that it actually needs to be done as an override of that $OUTPUT function.
I know one way that some people have done in the past is to basically hide the main_content output and then literally build their own page from scratch - that could now be done using the renderer and template though which may help - the main_output still has to be present on the page but can be hidden. It's ugly and as Gareth says there's not a nice 'Moodly' way of doing it as there is for other pages. The alternative is to dig into the $OUTPUT functions level and override those in the theme.

However, going back to your original post and the problem encountered, it may be that you do not need to do this at all and that what you actually need is some assistance to make the css appropriately responsive so that your login page looks right on mobiles as well as larger screens? Particularly as the default login page does work on mobile devices and is responsive. It may be worth providing the css changes you have made to see if anyone is able to spot and suggest the necessary tweaks for you.
Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Customizing login page layout?

by Dan Jackson -
So it looks like what's been done is as follows.

Changes have been made to lib/templates/loginform.mustache - this looks like it is the file where the components of the login page are specified, so if there's a proper Moodle way to override this file it's likely that's what we'd need to do. In the "{{#hasinstructions}}" section the column div's class has been changed from "col-xl-6 col-sm-8" to "col-custom"
Between the "{{#hasinstructions}}" and "{{#maintenance}}" sections a div with class "CustomText" has been inserted to provide an h5 header for the Moodle internal login box that says "Service/Support/Manual Logins"



Some CSS was added along with those changes, using the "Raw SCSS" function in the theme system:

.col-custom {
    position: relative !important;
    top: -298px !important;
    max-width: 25% !important;
    left: -219px !important;
}
#login {
    position: relative;
    bottom: -350px;
    z-index: 1;
    right: -165px;
}
.CustomText {
    max-width: 300px;
    position: relative;
    right: -795px;
    top: -250px;
}
.col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    padding-left: 50px;
    right: -30px;
}

Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
I'd suggest it is that col-custom that is the problem, also the override of the col-md-5 css which potentially could be impacting the way that class is used on other pages, not just the login page.
Moodle uses the Bootstrap grid layout, which in turn uses flexbox, so it isn't as simple as setting top, width, left. All the flexbox rules need to be respected as well.
But as for a 'moodly' way of doing it, it would be better to make those mustache template changes in the theme (preferably a child theme), rather than customising the core template, as you will lose those core changes on any upgrade/update.
Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Customizing login page layout?

by Dan Jackson -
Is there a way in a theme to override a core template, then?
Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Yes -> https://docs.moodle.org/dev/Templates#How_to_I_override_a_template_in_my_theme.3F
Average of ratings: -
In reply to Gareth J Barnard

Re: Customizing login page layout?

by Dan Jackson -
Will that work for core templates though? Following those instructions I'd need to create a folder called theme/themename/templates/lib and put my custom loginform.mustache in there?

It's definitely that file I need to override, because I've got rid of the dodgy CSS and looked up how Bootstrap grid layout works and been able to get it laid out how I want it (and now it works on mobile and other screen sizes now) but as you and others have suggested, modifying core files doesn't seem like a great idea.
Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
/theme/themename/templates/core/
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Customizing login page layout?

by Dan Jackson -
"Classic" is already a child theme of "Boost", can I still create a child theme of "Classic" or do I have to copy the files and make my new theme a child of "Boost" as well?
Average of ratings: -
In reply to Richard Oelmann

Re: Customizing login page layout?

by Dan Jackson -
@Richard Oelmann - "Bootstrap grid layout" was the key information I was missing, having looked that up I was able to rejig the core loginform.mustache which has allowed me to achieve the layout I wanted. Though I recognise that modifying core files isn't a very "Moodly" way of dealing with it, so I'm hoping there's a way to override that in a theme.
Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Dan Jackson -
So to recap, the proper "Moodley" solution to my original problem was to create a child theme of "Classic" as per https://docs.moodle.org/dev/Creating_a_theme_based_on_classic and include a file theme/themename/templates/core/loginform.mustache which is a modified version of lib/loginform.mustache, referencing the Bootstrap grid layout documentation at https://getbootstrap.com/docs/4.0/layout/grid/ when making modifications.

I've managed to create a child theme successfully on my test site, but it seems to be using whatever the default settings are. Is there any way to have it share the settings that are set for Classic? I tried just copying the settings.php from Classic but this did not work (in fact it broke the whole "Site administration" menu on my test site, so I hastily removed it).
Average of ratings: Useful (2)
In reply to Dan Jackson

Re: Customizing login page layout?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear Dan,

This is where it starts getting tricky for me as this seems to be now turning into complex support, which is very specific, where as you admit 'you don't have the skills', so need the help and assistance of others who do. I've written and facilitate theme courses on https://www.moodlebites.com/ (run by HRDNZ, a Moodle Partner) which could help you understand and learn the skills involved and where I'm on hand to answer questions and look at things covered on the course. I also do other theme work. Therefore from my perspective, you're needing specific one to one support and that's now for me time and learnt skills that I use commercially. So, sorry, I can't really help anymore as I see things at the moment unless a commercial element comes into play.

Kind regards,

Gareth
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Customizing login page layout?

by Dan Jackson -
We do have a support contract with a Moodle support company but it doesn't cover developments, obviously I am not expecting commercial support providers to provide support for free which is why I came here, it was my understanding this was a community support forum? If I'm not posting in the correct place then please let me know.
Average of ratings: -
In reply to Dan Jackson

Re: Customizing login page layout?

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear Dan,

You are posting in the correct place and this is a community support forum, where people willingly choose to solve issues with no expectation of reward or compensation. I'm just saying that for 'me' this issue has come to a point where I would want to be compensated due to the time / complexity and skill involved. If others choose to help and solve the problem, then they are free to do so. In other posts, I'm still choosing to help and as I said 'this' is 'getting tricky for me' due to my particular circumstances.

Kind regards,

Gareth
Average of ratings: Useful (2)
In reply to Dan Jackson

Re: Customizing login page layout?

by Bobby Siegfried -
Judging by the dates of this initial discussion, your need has likely passed, but I wanted to share my experience in case it is helpful to your and/or others. Like you, I cannot believe how many hoops you have to jump through to actually accomplish something so simple. In our use case, we use a SAML 2 auth plugin and that's the ONLY way we want people accessing our instance with few exceptions (so we need to keep the manual login form around but go to great lengths to hide it - via simple JS - from the general population). What I ended up doing is copying the loginform.mustache found in /lib/templates/ to preserve the default page and then completely customized the login page template for our needs. We needed a solution that was theme-agnostic so the experience was the same in terms of login form structure even if the styling was slightly different. This was pretty straightforward if you have an understanding of web coding and Bootstrap templating. It required only a few minor custom CSS declarations to be added to the two themes we use (just Boost and Classic). I'm happy to provide more info if it would be helpful. Cheers!
Average of ratings: -
In reply to Bobby Siegfried

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.