Moodle v3.5 Login Page

Moodle v3.5 Login Page

by Mark Jones -
Number of replies: 8

Fellow Moodlers, lend me your ears.  

I've not long started a new contract with the NHS in Kent UK where I have persuaded them to use Moodle v3.5.2.  I'm relatively new to the Moodle platform but I'm getting to grips with it quite quickly.  

I have a small issue relating to a graphic I am trying to use on the Login page.

ACTIONS:

  1. Used a screen measuring tool to establish the size of the box above the login fields when the browser is at 100% zoom.  Microsoft Edge, Chrome and Firefox are the most common browsers used across the trust.
       
  2. I then went into Photoshop set the canvas size to the login page frame dimensions and saved the designed graphic as a PNG.

  3. I then went into the 'Appearance' section of Moodle v3.5.2 as a site administrator and uploaded the graphic.   At this point everything seemed fine, but there was a problem. 

PROBLEM

There is a border around the outside of the entire image (grey) when it sits inside the frame and I want the image to go edge to edge (represented by the red line) on all sides of the frame. (Sample As Shown below):

Login Page Display Problem Edge to Edge not Working

Can you proffer advice and actions please?


(Edited by Mary Cooch  to remove personal details- original submission Wednesday, 17 October 2018, 11:38 AM)

Average of ratings: -
In reply to Mark Jones

Re: Moodle v3.5 Login Page

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

What theme?

Average of ratings: -
In reply to Emma Richardson

Re: Moodle v3.5 Login Page

by Mark Jones -

Hi Emma,

Thanks for the taking the time to respond. 

The theme I'm using is the BOOST THEME.  

Please note I'm new to Moodle, so I apologise if I'm a little slow at finding my bearings.  I could really do with some help from the community if I'm honest.  However, I have a keen eye for detail and really want the interface to look smart and slick to ensure that the platform for our NHS frontline staff here in UK (Canterbury Kent) looks amazing and appeals. 

My colleague and I have 6000 staff to educate by autumn 2019 - on a new Healthcare solution called - "AllScripts Sunrise Clinical Manager" and there is just the 2 of us at the moment soon to be 4 of us by the end of November.   No pressure ... lol! smile   Any help one can offer is very much appreciated.

Do take care and thanks for your time.

Sincerely yours


Mark Jones

NHS T3 Training & Development Manager


Average of ratings: -
In reply to Mark Jones

Re: Moodle v3.5 Login Page

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mark,

Please try the following custom CSS (that you can put in the theme's Raw SCSS setting - theme_boost | scss):

#page-login-index .card {
    border: inherit;
}
#page-login-index .card-header {
    background-color: transparent;
    border-bottom: inherit;
    margin-bottom: .75rem;
    padding: 0;
}
#page-login-index .card-header img {
    max-width: 100%;
    height: auto;
}
#page-login-index .card-body {
    border: 1px solid rgba(0, 0, 0, .125);
}

You may need to tinker with the size of the image.

Cheers,

Gareth

Average of ratings: Useful (1)
In reply to Mark Jones

Re: Moodle v3.5 Login Page

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Mark,

This is my take on a solution for you, and it's one I have used myself at different times.

After adding the header image in the following location:

 Site Administration > Appearance > Themes > Logos

I added the following CSS to the Raw SCSS section (second box in Boost > Advanced Settings )

#page-login-index .card {
    background-image: url(http://localhost/moodle35/pluginfile.php/1/core_admin/logo/0x200/1540682518/LoginPageDisplayIssue.png);
    background-repeat: no-repeat;
    max-width: 100%;
    background-size: 100% auto;
}
#page-login-index h2.card-header img {
     visibility: hidden;
}

What's happening here is that after uploading the image as a Logo you then hide it using this CSS

#page-login-index h2.card-header img {
     visibility: hidden;
}
And replace it with this CSS below after getting the location of the uploaded header image by right clicking on it and  selecting "Copy Image Location"

#page-login-index .card {
    background-image: url(http://localhost/moodle35/pluginfile.php/1/core_admin/logo/0x200/1540682518/LoginPageDisplayIssue.png);
    background-repeat: no-repeat;
    max-width: 100%;
    background-size: 100% auto;
}
And this is the result:

Login Header Boost Theme Moodle 3,5.2

Hope this helps?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Moodle v3.5 Login Page

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

If you're serving the image Mary with both an IMG tag and a background, then hiding the former then that is a lot of waisted bandwidth!  Plus would slow down page load!  Unless the browser caches the URL, but then the URL has a hardcoded theme revision number, so it will break as soon as you do a purge all caches either on purpose or via a theme setting instigating it.

P.s. That will happen after you 'copy image location' and update the custom raw SCSS.

Average of ratings: -
In reply to Gareth J Barnard

Re: Moodle v3.5 Login Page

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

This is only in one place, it affects ONE image for the time you are in the LOGIN page. Your PC's Cache will cover that.

As for the bandwidth, well that too only relates to the ONE image, as soon as it is downloaded it's visibility is hidden in one area but shows up in another.

I purged all caches and I did not get even a blip of a crash.

Anyway it's an alternative.

If I had my way I would have insisted Moodle used background images rather than img tags which ar so old fashioned.

These are the areas that cause so much extra PHP coding or prating about in Mustache templates.

Sorry but this really rankles with me right now.

It's so obvious that the default setting for the header is so pathetic how it has been structured. Whoever put this together gave little or no thought to the logic behind how it could have been styled.

But that's Moodle for you.

Cheers

M


Average of ratings: -
In reply to Mary Evans

Re: Moodle v3.5 Login Page

by Mark Jones -

My sincerest thanks to all of you for taking time out of your busy schedules to help me with this I really do appreciate it.   I have read through all of your responses and will action them just as soon as I can.  Reposting my progress and outcomes.

Do take care and thanks again.  

Average of ratings: Useful (1)