• Login page has a more compact structure and generally needs fewer scripts and stylesheets unless you want to include some extra plugins for some form fields.
    For more info about this please see Login Layout
  • Basically it consists of three optional widget boxes for login, signup and password sections.
  • You should add .login-layout class to body element:
    <body class="login-layout">
    <body class="login-layout blur-login">
    <body class="login-layout light-login">
  • There are three optional background styles:
    1. .login-layout default login background
    2. .login-layout.blur-login blurred image background
    3. .login-layout.light-login light login background
  • The (optionally) three boxes are inside .login-container:
  • Inside login box, there are the optional social login buttons inside .social-or-login and .social-login container:
  • The bottom links that are used to move between boxes and are inside .toolbar which have a class only used to color them:
    Each link has a data-target attribute.
  • data-target is the selector of target. The following code should also be included in your page for switching between pages:
    jQuery(function($) {
     $(document).on('click', '.toolbar a[data-target]', function(e) {
        var target = $(this).data('target');
        $('.widget-box.visible').removeClass('visible');//hide others
        $(target).addClass('visible');//show target