Updated November 2021. Moodle ™ visual personalization cover updates courtesy of Edwiser.
With this article, you will learn how to manage and customize your Moodle ™ login page.
Depending on the design of your site, a login page can affect your interactions with users. The first time around would be nice to get a taste of what to expect through the connecting gate, both in form and in content. Repeat users might also find value in a good design. But for them, making the connection quick and painless is high on their list.
Whatever your use scenario, the following guide will get you set up. We start with an inventory of the assets and things you need to keep close at hand. Next, we dive into the customization options available to Moodle ™.
Let’s dive in!
Login Page Inventory: Needs and Wants
You can choose a login page that focuses on an efficient way to access a Moodle ™ site. Or you can create an engaging and meaningful page that reflects your learning experience. Most sites stay in the extremes. If all you’re interested in is speed, there’s nothing wrong with having a nice, bright picture next to it. You can also take advantage of a login page as a branding opportunity, where form and function reflect your values.
To continue, let’s break down the “assets” you’ll need to dispose of. First, think about mandatory functional assets:
- A username domain
- A the password domain
- A Log in button
- A “Remember username” check box
- A “Forgot your password” link
There are also “semi-mandatory” assets, which depend on the type of Moodle ™ site you are using and your business case.
- A “Create a new account“ button. (Note that activating it isn’t as easy as you might hope.)
- “Register using” buttons that allow users to log in using their credentials on Google, Facebook, or other platforms to authenticate using the OAuth 2 protocol.
- “Log in as a guest” button, in case you want to demonstrate part of your experience to the public.
Now the “optional” features. I put them in quotation marks because, while their absence will not affect functionality, not having them would be a wasted opportunity to promote the identity and values of your organization.
- Your logo
- Background images
- “Main” content: short text, images or videos prominently displayed on the page
- A stylesheet including your color scheme, custom fonts, and general design templates, as CSS or SCSS files
- Instructional or marketing copy. Sometimes the same content can serve two purposes
- A language button, in case you are serving multiple languages.
Back to the top
Authentication methods and your login page
In Moodle ™, the “username + password” method allowing users to connect to their platforms is hardly the only one. The open LMS is compatible with several options, often using third-party vendors. Some extensions are integrated, others are available through plugins. The availability of the method determines some of the icons on your site’s login page.
Some methods replace common Moodle ™ methods and add buttons to the login page. The Central Authentication Service (CAS) method, for example, effectively eliminates a Moodle ™ login page.
“Log in as a guest” is an interesting example, and perhaps too often overlooked for its potential. It allows access to courses that allow it, and it limits interactions. (It’s a read-only role, after all.)
As of Moodle ™ 3.3, a site can enable third party authentication without the need for plugins. This is possible thanks to OAuth2 compatibility. OAuth2 or “social login” is a widely adopted specification that logs login credentials. It keeps the data secure and private. When you click on “Connect using Google” or any other service, Moodle ™ obtains basic profile information. It never gets your full password. It is often considered a more secure and convenient option for manual connection. You can add as many buttons as you want from over 30 ‘social login’ compatible platforms.
Most modern LMSs support OAuth2, including Instructure Canvas, Blackboard, and Brightspace.
Back to the top
Themes or CSS: What are my login page design routes?
It is widely accepted that a Moodle ™ theme is the path of choice for any visual editing on your site. Moodle ™ documents imply that. In fact, think of the default “Boost” theme as the basis for your custom development, whether it is a pre-built theme or a full theme.
Editing a Moodle ™ Login Page Using a Theme
This route has the disadvantage of limiting you to a few layouts and options. That, in case the theme actually gives you login page editing capabilities. This means that the process depends directly on the theme settings page.
It also means that figuring out which theme lets you edit your login page isn’t straightforward. We know that the free “Fordson”, “Adaptable” and “Moove” themes, as well as the premium “Edwiser RemUI” theme, offer a certain degree of customization of the login page.
When it comes to dashing, if not highly editable, login pages, the all-new “Trema” theme is worth mentioning. Animated particles populate the screen in a fascinating way. See it in action.
If you’re happy with your theme, but it doesn’t provide a settings page, your best bet might be to go to the code. Good luck !
Direct Editing of Moodle ™ Login Page Files (Advanced)
To edit the code for your login page, you must have experience with HTML, CSS, and SCSS editing. Some familiarity with PHP and JavaScript syntax can also be helpful.
If you’ve ever worked with CSS (and if you’re reading this, it’s because you are), you know these security checks:
- As per the official recommendation, edit or create your login page as part of a custom theme.
- Work on a local or test version of your Moodle ™ site, never directly on the production site.
- Configure GitLab, GitHub or a similar version control tool, to keep track of your changes, being able to reverse the course if necessary; send to production and enable auditing and downstream collaboration as needed.
If you don’t have the experience, fear not. We don’t discourage you from tweaking your Moodle ™. The opposite is true. We previously outlined how CSS is an ideal introduction to programming syntax for educators. Plus, Moodle ™ offers tips on creating your own custom theme from scratch.
The ideal: choose a theme with the CSS editing tools
Lucky for you, there is a wide variety of themes that offer the best of both worlds. They offer a delicious design that you can still create through CSS editing. You can find many free and premium Moodle ™ themes on the Moodle ™ plugin directory.
Free Moodle ™ Themes make you look modern. But for those looking to take their branding to the next level, premium themes like Edwiser RemUI may be what you’ve been looking for. Not only does it include dozens of layouts for you to play and change easily, but it anticipates your needs by adding new features and bundling other plugins.
Back to the top
R&R
Disclaimer: LMSPulse is part of Open LMS. Plugin mentions on this website should not be construed as endorsement by Open LMS or any member of the team. Please consult Moodle™ plugins carefully before implementing them in production. Connect with the Online learning community to learn more about the availability of plugins and features in Open LMS systems.