How to modify the appearance of login page?

How to modify the appearance of login page?

by Andre Tampubolon -
Number of replies: 8

Hi, I just installed Moodle 3.82 (Build: 20200309) on the development server.

So my 1st assignment is to modify the appearance of the login page.

Here's the default/unmodified:

Moodle's default Classic login page

And the new login page should look like this:

New modified Classic login page


How do I modify the CSS (and perhaps the relevant PHP files as well)?

I already take a look inside \theme\classic\ directory and at Site administration -> Appearance -> Themes -> Classic.

Still couldn't understand Moodle concept and code, though.

Hopefully someone doesn't mind providing a few hints.

Average of ratings: -
In reply to Andre Tampubolon

Re: How to modify the appearance of login page?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
It is not a good idea to be changing any of the core files as it will not survive updates. You should start by looking at available themes (try Fordson - it has a lot of login page modifications) or search on documentation for making a child theme. However, if you are unfamiliar with PHP, an already created theme would probably serve you best.
Average of ratings: -
In reply to Emma Richardson

Re: How to modify the appearance of login page?

by Andre Tampubolon -
I see. Well I'm pretty familiar with PHP (but not that much with JS/CSS, though).
OK I'll give a look at Fordson.
Average of ratings: -
In reply to Andre Tampubolon

Re: How to modify the appearance of login page?

by Priya Joy -
I am also facing the same issue.I need to change my login page and I am not able to change the login page style.Please help me.
Average of ratings: -
In reply to Priya Joy

Re: How to modify the appearance of login page?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
Have you followed Emma's suggestion above?
Even if you don't want/need to change a theme code there are lots of changes you might be able to make with CSS, but there are also a lot of themes in the community plugins database (I believe I gave you the link in another thread already - https://moodle.org/mod/forum/discuss.php?d=403579#p1628889), which have customisations such as background images etc as part of the theme settings.
Average of ratings: -
In reply to Richard Oelmann

Re: How to modify the appearance of login page?

by Priya Joy -

Once downloading the theme from the link you have provided, what is the next step I need to follow? I am working on the production server with more than 100 customers.So any error while doing the theme change will affect the customers too.If I get exact steps it will be helpful.Not getting a proper document to make the change.


Average of ratings: -
In reply to Priya Joy

Re: How to modify the appearance of login page?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Well you definitely don't want to play around with themes on a live site. However, you can change the setting to allow theme changes in the url (search docs on how to do this) which would allow you to test the theme without affecting the rest of the users until you are ready. You need to go through the theme documentation for all the options.
Average of ratings: -
In reply to Emma Richardson

Re: How to modify the appearance of login page?

by Priya Joy -
I searched regarding the theme change through the URL.I couldnt find a proper solution and still have many doubts like ,if I change the theme through the URL, the theme will be set permanently or its for just viewing the apperance?And one more thing is tht if I change the theme will it make any changes to the already uploaded courses other than the appreance change?It will be of great help for me if you could send  a link to a simple tutorial if possible.
Average of ratings: -
In reply to Priya Joy

Re: How to modify the appearance of login page?

by Jon Bolton -
Picture of Testers
Changing the theme via URL only affects YOU, and only for the current session - it will stop using the chosen theme when you log out. It does not affect any content, just the appearance.

Add ?theme=boost to the end of a url - but if that url already contains a ?, then add &theme=boost instead.

For example

yourmoodle.com/course/index.php?theme=boost

Or

yourmoodle.com/course/view.php?id=2&theme=boost

Obviously use the theme name that you are using - eg. adaptable or fordson.

See https://docs.moodle.org/38/en/Allow_theme_change_by_URL
Average of ratings: -