How to Customize Moodle™ login page

How to Customize Moodle™ login page

Why customize Moodle™ login page

The login page is one of the most important pages of your Moodle™ site – For you as well as your students. You can track the behavior of your logged-in learners which has great benefits when it comes to profiling your users, personalizing their learning experience, and overall reporting. For your students, the activity of filling out a login page unlocks access to restricted, member-only course content and helps them make the most of your Moodle™ courses.

Learners will visit your site again and again, probably to learn something new, get assignments or just revise what they had read earlier. Users who want to access their accounts can’t do so without the login page, and if it’s not designed well or if it’s a pain to use, you might lose users!

The first interaction with a learner is usually the Login page; it’s also where first impressions are made! So, as a site admin, take your Moodle™ login page design seriously! You have to make sure that it’s not just aesthetically pleasing but also easy to use and welcoming. 

Have you ever wondered how educators can make their Moodle™ login page more personal? Many teachers ask this question on online learning platforms. Luckily, customization is possible with Moodle™. In this article, we will show you how to customize the default Moodle™ log-in page to accentuate your e-learning site’s branding and identity.

Customizing the login page via a Moodle™ Theme with CSS editing tools 

The Moodle™ Plugin Directory offers a lot of attractive paid and free themes that you can still personalize using CSS. So It’s okay if you don’t have experience with CSS. We do not discourage you from customizing your Moodle™ login page. There are many themes available that combine flexibility and functionality. 

Free MoodleTM themes give your site a fresh new look. On the other hand, premium themes like Edwiser RemUI may be just what you need to elevate your branding and experience. The plugin not only comes with many layouts to choose from, but it anticipates your needs by adding new features and bundling other plugins.

How to easily customize the default Moodle™ login page using the Edwiser RemUI theme?

To customize the login page with Edwiser RemUI, enable the live customizer of the theme. To enable the live customizer you need to click on the paintbrush icon available in the top right region of the header menu for Edwiser RemUI 4.0 and in the secondary left navigation for Edwiser RemUI 3.9 to 3.11.

For Moodle™ 4.0

MdWH81RTtzzIUWZ9IaDbyue1dN0z LIbrf LZpI seJwpVcVmZ9a ZG

For Moodle™ 3.9,3.10 and 3.11

vwkexcnzp0jMwHdI58T 0SLxjO4HhCQ8Dx5NsnTn57t53BUfJfeT5jv4znVLcciviKL0jQOZvdNSv5isE ESX vRwlHdA5pmXnRwoyy5tz N3BaMNswIwFYalMw7L fm4WUAQlk3DoN1FHiEhQ

Once the live customizer is enabled, navigate to the ‘Login’ Tab to customize your login page. 

Note: The login page cannot be previewed in the live customizer because it is displayed to non-logged-in users only. You can preview the customization by saving the changes and opening the login page in incognito mode.

You can now customize the ‘Login panel’ and the ‘login page content’ once you are in the ‘Login’ Tab inside the Live customizer.

  1. Panel: Here you will find the options to customize the panel (card) of your login page.

For reference: JCdzV3JFpCU xyrsJA25IXPhc RMJ38NBo 2sQ7i7FM7krMGab Df ouch1fQpp0W6yo5IOwAH6QSN

Go ahead and customize the following elements to make it unique for your brand. 

i) Logo: Here you can add a logo that you need to display on the login and signup cards. 

ii) Page background: Change the background color of the panel, any color that resonates well with your brand identity. 

iii) Text/link/link-hover color: Change the color of the text/link that is displayed on the panel

iv) Page layout: You can choose between three layouts for your panel i.e Right, Left and center

For reference on the page layout option, check the screenshots below

  • Center Align:
Dok bYwqVXiX6nbczeaAEymajG5axAuGDGdRgYg9nhCRTAKGWYrxjvvYqHirGRlXVpPVqVOrmecpFBLAAuA3nHKa9obe8FWMHdL86XV6IYRbFB4Reli L NEz3pJ8ZhRtvPSjs O4a8ZQYTntQ
  • Left Align:
Hhv5wGb6xMx LbwQalc0sVsDPjTbzDtqRUnHX7IcXlSEFNgbfR969zbKlfSiXRrMUiJ4gS50kT8j6YzMR5eF
  • Right Align:
K6RDA9RolF j86AcRKCTtPQnya2JtX mvIYgHy5n5UQdwJOpYpMIiffS8qVHWWTC4xazy pcQwple0 x 0Cd1uDd3MdHrtCGtM1Iw9hA5xFLVsbJRI4OnPJdIGXMljCuePgAj L9h8GDhbM2fA

2) Page: Text

i) Site Description: Here you can add additional information that you need to display on the login page. It can be a description of your site, login instructions for users, or any other information that you need to share. 

You can also add images, and links and style the text in the editor. The editor is highlighted in the screenshot below:

uvdJVS8L HgcbIDAk92A5oVgmT6yDtwElT5fdINU0lqqopEX2R2tEQoFt4h9LK05DJxhodHQnK3yC 3oCbXwPbyC EIgU95znCxmu13GEV25zFRQyPJLeNO4Or 20xru14q3yufwQ2OLy 6WOw

ii) Upload Background image:  Last but not the least, upload a background image that looks good and compliments the login page t in a way that it stands out. Make sure you choose a subtle image that doesn’t capture much attention or something that isn’t too bright or vivid. 


So this was our guide to customizing your Moodle™ login page

You can try customizing traditionally if you have a fair knowledge of coding.

And if you’re looking for something simple and efficient without spending more time and effort in coding. You can be relaxed about customizing your Moodle™ site with Edwiser RemUI. Check it out! It’s a handy plugin to easily customize the default Moodle™ login page.

In case you have easier ways to customize the Moodle™ login page feel free to share your experience so others can also benefit from it.

Leave a Comment

Your email address will not be published. Required fields are marked *