Skip to toolbar

Alternate Moodle Login Page Template

I created a really cool login page template for Moodle.  It is just CSS and 3 images.  Check out the login page here:  The background image auto-sizes itself to the dimensions of the browser.  Here are the steps to use this on your site.

  • Download and Unzip the Login Page Template:  Moodle Alternate Login Page Template
  • Change the name of the folder to whatever you’d like.  We use “dps” since it is the abbreviation for our district.
  • Edit login.php and make the following changes:
    • Line 106 — Change “My School Name Goes Here” to your school name.
    • Line 110 — Change “”  Make your Moodle server URL.  Be sure to leave the “/login/index.php”.
  • The image file bkg.jpg is the background image.  Please use your own photo and be sure to save it as bkg.jpg
  • logo.png is the image you see in the login panel.  Please edit or create your own file and save it as logo.png
  • Upload the entire folder into your moodle/login/ folder
  • You may want to test the login url first before switching to make sure everything works!  Just open up login.php in your browser and make sure you can login.
  • Login as Site Admin and goto Site Administration > Plugins > Authentication > and click on Manage Authentication.  Scroll down to Alternate Login URL and add the URL to the login.php file you just uploaded.  Assuming moodle is in the root folder the URL will be something like:


Initial Login Page with Photo
Initial Login Page with Photo
Homepage Logged In
Homepage Logged In

BE CAREFUL!!!  If it doesn’t work you will need to dig into the database to remove the alternate url to return to normal login.  Please test the login page first before switching it in Moodle.


Leave a Comment