More and more schools are transitioning to using Oauth for logins. Moodle allows for Oauth logins. However, by default, the Moodle Login box appears first, above the button to login using a service.

This causes lots of people to enter their credentials into the box. In our case, they are entering the “wrong” credentials (i.e. they enter their Google username and password instead of their district account username and password). This leads to frustration on the end user’s part. Signing in is a really bad place to frustrate users.

Knowing that Moodle is customizable, I know there has to be a way to fix this. A little bit of research leads to a couple of different options:

  • customize the CSS
  • use a Plugin

I start with the plugin (Login Splash Page). However, upon installing it, I realize that I need to redirect the login page. I decided that I’d rather not do that.

I found a couple of posts with ideas to customize the CSS. The best of which was a post by Steven A. Although the post says that you have to account for each section, my attempts didn’t support that.

I opened our Login page and right-clicked on it to select “Inspect”. This allowed me to verify the different elements present. (Plus, you can drag them around to change the order, which is useful and kind of cool). Anyway, I could now be sure what the name of each element was. Since the post indicated that you needed to account for all of the elements, I did so. However, the elements still didn’t appear in the order that I wanted. So, back to BBedit (where I had entered the appropriate code). I deleted everything but the two elements and Ta-Da!

In the end, I put the following code:

.loginform {
display: flex;
flex-direction: column;
}

login.login-form

{
order: 2;
}
.login-identifyproviders
{
order: 1;
}

into the SCSS Raw box in the theme that we. That is, in Moodle, I went to :

  • Site Administration | Themes | LearnR | Look
    then clicked on the SCSS tab. I entered the code above into the “Raw initial SCSS” box, scrolled down, and clicked “Save”. (*Note that this needs to be done for each Theme that you use if you use more than one. Or, if you change themes in the future, this must also be updated in that theme.) Now, end users will see the Login with Google Button first.

Whew!

Given the prevalence of utilizing Oauth, I hope that someone at Moodle will make this a checkbox preference in the future. However, at least for now, this is set for me.

ShareOpenly logo Share this post on social media.
Print 🖨 PDF 📄 eBook 📱