Missing CSS on Create Account, Age Verification and Forgot Password pages (SOLUTION INCLUDED)

[r1ik]

Hello, Since i migrate to Moodle4, i saw that the login/forgot_password.php page isn't anymore correctly stylized by the Trema Theme. It seems that no style is applied to this page... Do i make an error ? Best regards,

Moodle 4.0.3+ (Build: 20220826) | Version 2022041903.01 Trema 4.0.0.2

[michael-milette]

Hi @r1ik

You are correct. I noticed that too and have had to fix it in a couple of new Moodle sites that I recently created for clients.

I will post a piece of CSS later today that you can add to your Trema SCSS as a temporary workaround until the issue is fixed in Trema itself.

Best regards,

Michael

[michael-milette]

Hi @r1ik ,

There are actually 3 pages that I have found so far which are missing a background colour, making them very difficult to read if you have some background images.

The workaround is to add the following to the RAW SCSS field in the Trema theme settings:

// === CREATE ACCOUNT, AGE VERIFICATION, FORGOT PASSWORD pages. ===

// Fix background color so that you can see the form.
#page-login-verify_age_location #region-main,
#page-login-forgot_password #region-main,
#page-login-signup .signupform {
    background-color: rgba(255,255,255,0.8)!important;
    padding: 1rem;
}

The 0.8 is the level of transparency. If you prefer a solid colour, set this to 1.0.

Hope you find this helpful.

Best regards,

Michael Milette

[r1ik]

Hi @michael-milette , thanks for your help, i added a margin-top too to #page-login-forgot_password #region-main because of the header which has a position fixed and which was hidding the #region-main. Best Regards, Erwannig Louf

[michael-milette]

Keeping this issue open until it is fixed in Trema,,

[Hootie298]

Thank you, @michael-milette. Your snippet is a good workaround for the short-term but still not a complete solution. The signup page is the main problem for me. Would be very grateful to see the theme updated with a robust solution.

[hribeir0]

So the issue is that the signup page doesn't have any specific css rules. I was able to quickly gather some that will make it acceptable. Please use try it on a test server.

body#page-login-signup {
    #region-main {
        padding-top: 0;
    }

    #page-wrapper {
        position: relative;
        min-height: 100vh;
        height: auto;
    }

    #page {
        background: none;
        #card-login,
        #card-login-instructions {
            margin-top: 50px;
        }
    }

    #page-content {
        margin: 0 auto 2rem;
    }

    #region-main-box {
        padding-top: 60px;
    }

    .card {
        @extend %border-frequency;
    }

    .card-header {
        background-color: transparent;
    }

    &.style-particles {
        canvas.particles-js-canvas-el {
            position: absolute;
            top: 0;
            z-index: -1;
            background-color: $particles-bg;
        }
    }

    &.style-image {
        #page-wrapper {
            background-image: url($login-backgroundimage);
            background-position: top center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    &.style-none {
        #page-wrapper {
            background-image: none;
        }
    }
}

[Hootie298]

I've come up with this, which works for me (formatting login, signup and lost password):

body#page-login-index { .card-title, .mt-3 { text-align: center; } a.btn.btn-link{ display: inline-flex; align-items: center;
}
}

body#page-login-forgot_password { display: flex;

#region-main {
    padding-top: 0;
    background-color: rgba(255,255,255,1.0)!important;
    max-width: 700px;       
    div[role=main] {                    
        display: flex;          
    }
}

#region-main-box {       
    display: flex;
    justify-content: center;
    align-items: center;
}

#page-wrapper {
    position: relative;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: center;
}

#page { 
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    div[role=main] {
        justify-content: center;
        display:flex;
        flex-direction: column;
    }
}

#page-content {
    justify-content: center;
}

}

body#page-login-signup { h1, .h1 { font-weight: 400; font-size: 1.5rem;
}

region-main {

    padding-top: 0;         
}

#page-wrapper {
    position: relative;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

#page {        
    background: none;
    #card-login,
    #card-login-instructions {
        margin-top: 50px;           
    }
    div[role=main] {
        justify-content: center;            
        display: flex;
    }
}

#page-content {
    margin: 0 auto 2rem;
}

#region-main-box {
    padding-top: 60px;
    justify-content: center;
}

.signupform {
    justify-content: center !important; 
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    max-width: 700px;
    background-color: rgba(255,255,255,1.0)!important;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}   
.card {
    @extend %border-frequency;
}

.card-header {
    background-color: transparent;
}

&.style-particles {
    canvas.particles-js-canvas-el {
        position: absolute;
        top: 0;
        z-index: -1;
        background-color: $particles-bg;
    }
}

&.style-image {
    #page-wrapper {
        background-image: url($login-backgroundimage);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

&.style-none {
    #page-wrapper {
        background-image: none;
    }
}

}

[michael-milette]

This issue should be completely fixed when the PR #178 (described in #163) has been applied.

Best regards,

Michael Milette

[rmady]

That's awesome guys! Thank you very much @michael-milette, @Hootie298, @hribeir0 and @r1ik :)

Kind regards, Rodrigo Mady