How To Customize Your Moodle Login Page — A 2019 Guide

1904
How To Customize Your Moodle Login Page — A 2019 Guide

With this article, you are going to learn how to manage and customize your Moodle login page.

WIRIS

Depending on the design of your site, a login page can affect your user interactions. First-time would do well getting a taste of what awaits them across the login gate, in both form and content. Recurrent users could find value in good design as well. But for them, making the actual login quick and painless is on top of their list.

No matter your use case scenario, the following guide will set you up. We begin with an inventory of assets and things you need to keep at hand. Then we dive into the customization options Moodle has available. We will finally talk a little about ways to push the envelope, aided by technology and research.

Let’s dive in!

Login page inventory: Make a list

You can choose a login page that focus on an efficient way to access a Moodle site. Or you can make an engaging, sensory-rich page that reflects your learning experience. Most sites stay within the extremes. If all you care about is speed, there is nothing wrong with a nice, light image next to it. You could also envision a multimedia hub with several authentication methods. In which case you should still care about a straightforward login, if not more so.

To go on, let’s break down the “assets” you will need to have available. First, think about the functional assets:

  • A username field
  • A password field
  • A login button
  • A “remember username”
  • A “Forgot password” link
  • Optionally, a “Create new account” button. Keep in mind that this depend on the authentication methods you have enabled. We discuss them briefly in the next subsection
  • Also optionally, a set of “Sign up using” buttons, that lets users bring their credentials on Google, Facebook or other platforms to authenticate using the OAuth 2 protocol
  • And also optionally, a “Login as guest” button, also depending on the site’s available authentication methods

Now, list the visual elements you want to display. They are all optional:

  • Your logo
  • One or more (not recommended) background images
  • A video about your organization, product or educational content
  • A style sheet including your color palette, custom fonts and general design patterns, in the form of CSS or SCSS files
  • Your page could be made by a designer, in which they might give you the patterns in a visual layered document type. Common file extensions include PSD (proprietary Adobe file), EPS or PDF
  • Instructional or marketing copy. Sometimes, the same content can serve both purposes
  • A language button. If you add extra copy to the site, you might want to add language strings with each language your site will support.

Authentication methods and your login page

In Moodle, the “username + password” method for users to log into their platforms is hardly the only one. The open LMS is compatible with several options, often using third-party providers. Some of the extensions are built-in, others are available through plugins. The method availabilty determines some of the icons on your site’s login page.

Some methods override Moodle’s common ones, and add buttons to the login page. The CAS (Central Authentication Service) method, for instance, effectively makes a Moodle login page unnecessary. “Log in as a guest” is an interesting example, and perhaps one too often overlooked for its potential. It allows access to courses that allow it, and it limits the interactions. (It is a read-only role, after all.)

Since Moodle 3.3, a site can enable third-party authentication without the need of plugins. This is possible thanks to OAuth2 compatibility. OAuth2 or “social login” is a widely adopted specification that connects login information. It keeps data secure and private. When you click on “Log in using Google” or any other service, Moodle gets basic profile information. It never gets your full password. It is often considered a more secure and practical option to manual login. You can add as many buttons as you want, from the over 30 platforms compatible with “social login.”

Most modern LMS suppory OAuth2, including Instructure Canvas, Blackboard, and Brightspace.

Check out the full list of authentication alternatives at the official Moodle Docs. See also the full list of authentication-type plugins at the Moodle plugin directory.

Themes or CSS: What are my login page design routes?

It is a widespread opinion that a Moodle theme is the path of choice for any visual editing on your site. The Moodle Docs imply it. In fact, think of default “Boost” theme as the basis for your custom development, be it a preset or a full-blown theme.

Editing a Moodle login page using a theme

This route has the downside of limiting you to a few layout and options. That, in case the theme actually gives you login page editing capabilities. This means the process depends squarely on the theme’s settings page.

It also means figuring out which theme lets you tweak your login page is not straightforward. We know that the free “Fordson,” “Adaptable” and “Moove” themes, as well as premium “Edwiser RemUI,” offer some degree of login page customization.

When it comes to dashing, if not very editable, login pages, the brand new “Trema” theme is worth mentioning. Animated particles populate the screen in a mesmerizing way. See it in action.

If you are happy with your theme, but it does not provide a settings page, your best bet could be to go to the code. Godspeed!

Editing the Moodle login page files directly (Advanced)

To edit the code of your login page, you should have experience with HTML, CSS and SCSS editing. Some familiarity with PHP and JavaScript syntax can also come in handy.

If you have worked with CSS before (and if you are reading this it’s because you are), you are aware of these safety checks:

  • In line with the official recommendation, edit or build your login page within the context of a custom theme.
  • Work on a local or test version of your Moodle site, never on production site directly.
  • Set up GitLab, GitHub or a similar version control tool, to keep track of your changes, be able to reverse course if necessary; send to production, and enable auditing and collaboration down the line if necessary. You may need a Git cheatsheet.

Learn more about the structure of a Moodle theme here.

If you don’t have the experience, fear not. We are not discouraging you from tweaking your Moodle. The opposite is true. We have stressed before how CSS is an ideal introduction into programming syntax for educators. Furthermore, Moodle offers some advice on creating your own custom theme from the ground up.


eThink LogoThis Moodle Practice related post is made possible by: eThink Education, a Certified Moodle Partner that provides a fully-managed Moodle experience including implementation, integration, cloud-hosting, and management services. To learn more about eThink, click here.