Adaptable - modify log in page

Adaptable - modify log in page

by Otaku Dude -
Number of replies: 9

Hiya all,

Moodle 3.9.1 and Adaptable 3.9

We are planning on going over to O365 auth on Moodle and we would like to edit the log in page so that the manual login form is moved down the page out of the way to avoid confusion with the O365 form. Can this be done with css/html? Would it need a unique login page created? Unfortunately, we have limited skill sets in this area ;) 

Login page alteration image

Thanks,

Nige.


Average of ratings: -
In reply to Otaku Dude

Re: Adaptable - modify log in page

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Do you want to move it or hide it?

Moving it will be quite complex with css, but you can hide it with -

#page-login-index .col-md-5:nth-child(1) {display: none;}
Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Adaptable - modify log in page

by Otaku Dude -
Hi Jon,

Thanks for the response. Unfortunately, we'd like to move it only. We want to keep the option of manual auth. just in case something goes wrong ever with o365 auth.

Thank you,
Nige.
Average of ratings: -
In reply to Jon Bolton

Re: Adaptable - modify log in page

by Mohammad Nabil -
i used this code to hide the username/password box , but did not work !
Average of ratings: -
In reply to Otaku Dude

Re: Adaptable - modify log in page

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers
Hi Nige, we just did this at my school. Feel freel to use this code as a basis and tweak it to work with your theme as necessary. Basically you're turning the divs into "flex" and then reversing the order. We also customized the language strings the regular log in button to remind staff which one to use. 


/* Log in Box with SAML2 */
@media (min-width: 768px) {
#page-login-index .row.justify-content-md-center {display: flex; flex-direction: row-reverse;}
#page-login-index .justify-content-md-center {justify-content: space-evenly!important;}
}
@media (max-width: 767px) {
#page-login-index .row.justify-content-md-center {display: flex; flex-direction: column-reverse;}
#page-login-index .potentialidplist.mt-3 {border-bottom: 1px solid black; padding-bottom: 25px;}
}

Attachment Screen Shot 2021-07-13 at 8.02.14 AM.png
Average of ratings: Useful (5)
In reply to John Provasnik

Re: Adaptable - modify log in page

by Otaku Dude -
Hiya John,

That looks very useful! Thank you for sharing smile

Nige.
Average of ratings: -
In reply to John Provasnik

Re: Adaptable - modify log in page

by Jane McClelland -
Hi John

This could be just the thing to solve a similar issue I'm having so thank you for sharing. Could I ask where exactly you put this code?

Thanks

Jane
Average of ratings: -
In reply to Jane McClelland

Re: Adaptable - modify log in page

by Otaku Dude -
Hi Jane,

Place it in Site Admin/Appearance/Themes/Adaptable/Custom CSS and JS. Copy and paste into the Custom CSS box.

Thanks,

Nige.
Average of ratings: -
In reply to Otaku Dude

Re: Adaptable - modify log in page

by shpetim aliaj -
Hi Guys,

I am setting up moodle 3.10 with cas and using the classic theme how can i do something similar to it so we can use local accounts for admins and cas for everything else?
Average of ratings: -
In reply to Otaku Dude

Re: Adaptable - modify log in page

by Jason McGensy -

After a mass of confusion with this very issue when we switched to Office365 authentication, we came up with the solution below - we have the form come in with a 3 sec transition on hover over the Office365 button. Any student or instructor will just click the button because there is nothing else to do there and will never see the form; any 3rd party user or manual account admin is given this video as instruction on how to login....voila! no more helpdesk calls about this

GIF showing how our login page functions

Average of ratings: Useful (2)