Brand new Moodle theme released! Based on Boost and packed with exciting new features.
View Demo

Moodle Maker Theme – How to Display Moodle’s Default Login Form After The Social Logins

By default on Moodle’s login page Moodle will display the default login form before all the social login options. If social media logins are your site’s main login methods you might want to give priority to the social login buttons by displaying them before Moodle’s default login form. In this blog post we will share the custom css code snippet you can use to do just that.

Default Login Page View:

moodle-login-page-default-layout

Step1

Copy the following code snippet.

#page-login-index .auth-blocks-wrapper .form-col {order: 12}

Step 2

Go to Maker theme’s Advanced Settings page and paste the code into the “Raw SCSS” input field. Save changes.

moodle-maker-css-code

Now on the login page all the social login buttons should be displayed on the left hand side (on desktop) and above the Moodle login form (on mobile).

moodle-social-login-change-position

Want to master Moodle?

Moodle 3.0x Masterclass: Complete Educator's Guide to Moodle

Moodle Tutorial for Educators - Learn Moodle to create WORLD CLASS online courses. Leverage Moodle 3 like a BOSS!

2900+ students enrolled

Are you a Moodle admin?

Moodle Administration Tutorial: Beginner, Intermediate Guide

Learn World Class Moodle LMS Admin, Configure, Theme, Manage Courses, Users, Permissions, Roles, Security, Plugins...

4000+ students enrolled