Code Snippet Explanation

This code snippet updates the login and signup page styling to a more modern look and feel. You can change the background of the page and the colors of the login form using the CSS variables at the top of the code.

Installation Instructions

Step 1: Navigate to the Code Snippets section of your domain Theme and paste the below code at the bottom of the Global Code Snippet. 

Snippet Code - Add to Global Code Snippet in Theme:

<!-- START Login / Signup Page Stylings -->
<style>
/* Below are a set of CSS variables you can use to style the login/signup pages */
body {
  /* login/signup page and form stylings */
  --login-page-background: #A6CEF7; /* background color or image behind form */
  --login-form-background-color: #FFFFFF; /* form background color */
  --login-form-title-color: #133D76; /* form title text color */
  --login-form-text-color: #133D76; /* form standard text color */
  
  /* login/signup button stylings */
  --login-button-bg-color: #0166CC; /* CTA button background color */
  --login-button-hover-bg-color: #133D76; /* CTA button hover background color */
  --login-button-text-color: #FFFFFF; /* CTA button text color */
}

/* CODE BELOW HERE DOES NOT NEED TO BE EDITED */

/* background image or color */
.sj-page-login #skilljar-content, .sj-page-signup #skilljar-content {
    background: var(--login-page-background);
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* login form stylings */
.sj-page-login #login-content, .sj-page-signup #login-content {
    background-color: var(--login-form-background-color);
    border-radius: 4px;
    box-shadow: 0 2px 12px 4px rgba(0,0,0,.15);
    float: unset;
    left: unset;
    margin: 50px auto;
    max-width: 680px;
    padding: 35px 50px;
    right: unset;
    width: unset;
    margin-top: 50px;
}

/* set width of login box to 100% */
.sj-page-login #login-content .large-6.columns.push-3, .sj-page-signup #login-content .large-6.columns.push-3 {
    left: 0;
    width: 100%;
}
/* hide default login / sign up banner */
.sj-page-login #login-tab-container, .sj-page-signup #login-tab-container {
    display: none;
}

/* login page title stylings */
.sj-page-login .sj-text-login-note {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: var(--login-form-title-color);
    margin-bottom: 10px;
}

/* login page custom signup text stylings */
p.lp-sign-up-text {
    text-align: center;
    font-size: 17px;
}

/* email / password field stylings */
.sj-page-login input, .sj-page-signup input {
    font-size: 17px;
}

/* field label stylings */
.sj-page-login label, .sj-page-signup label {
    font-size: 16px;
    margin-bottom: 5px;
    align-self: baseline;
    color: var(--login-form-text-color);
}

/* Sign in / forgot password wrapper stylings */
.sj-page-login #login_form .large-12.columns, .sj-page-signup #login_form .large-12.columns {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* sign in button stylings */
.sj-page-login button#button-sign-in, .sj-page-signup button#button-sign-up {
    font-size: 17px;
    margin-right: 0 !important;
    background-color: var(--login-button-bg-color);
    color: var(--login-button-text-color);
}

/* sign in button hover color */
.sj-page-login button#button-sign-in:hover, .sj-page-signup button#button-sign-up:hover {
  background-color: var(--login-button-hover-bg-color);
}

/* Sign Up Custom Title stylings */
.sj-page-signup h1.signup-custom-header {
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
    color: var(--login-form-title-color);
}

/* Sign Up Custom Paragraph stylings */
.sj-page-signup p.signup-custom-link {
    font-size: 17px;
    margin-bottom: 25px;
    text-align: center;
    color: var(--login-form-text-color);
}

/* Hide social media logins */
.socialaccount_providers{
  display: none !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    /* login page - add custom link to get to the signup page */
    var loginPage = document.querySelector('.sj-page-login');
    if (loginPage) {
        var loginNote = document.querySelector('.sj-text-login-note');
        var signUpText = document.createElement('p');
        signUpText.classList.add('lp-sign-up-text');
        signUpText.innerHTML = 'Need an account? <a href="' + document.querySelector('.sj-text-sign-up').getAttribute('href') + '">Sign Up</a>';
        loginNote.parentNode.insertBefore(signUpText, loginNote.nextSibling);
        
        /* remove social media providers and adjust CSS if they exist */
        document.querySelector('.sj-text-login-note').parentElement.style.width = '100%';
        document.querySelector('.socialaccount_providers').parentElement.style.display = 'none';
    }
    
    /* signup page - add custom link to get to the login page */
    var signUpPage = document.querySelector('.sj-page-signup');
    if (signUpPage) {
        var loginContent = document.getElementById('login-content');
        var signInHref = document.querySelector('.sj-text-sign-in').getAttribute('href');
        var signupPageHeader = document.createElement('h1');
        signupPageHeader.classList.add('signup-custom-header');
        signupPageHeader.textContent = 'Sign up for your Skilljar Academy account.';
        var signupPageCustomLink = document.createElement('p');
        signupPageCustomLink.classList.add('signup-custom-link');
        signupPageCustomLink.innerHTML = 'Already have an account? <a href="' + signInHref + '">Sign In</a>';
        loginContent.insertBefore(signupPageCustomLink, loginContent.firstChild);
        loginContent.insertBefore(signupPageHeader, signupPageCustomLink);
        
        /* remove social media providers and adjust CSS if they exist */
        document.querySelector('.signup').parentElement.style.width = '100%';
        document.querySelector('.socialaccount_providers').parentElement.style.display = 'none';
    }
});
</script>
<!-- END Login / Signup Page Stylings -->