Click the links to see demo Responsive Login Screen

Code example:

  <div class="container-fluid ctd-login">
    <div class="row">
      <div class="ctd-left-nav">
        <h1 class="ctd-title">Header</h1>

        <div class="panel-body">
          <form accept-charset="utf-8" action="#" method="POST">
            <div class="form-group">
              <input type="email" class="form-control" id="userName" name="userName" placeholder="Email address">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" id="password" name="password" placeholder="Password">
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
            <div class="form-group">
              <div class="checkbox">
                <input type="checkbox" id="remember">
                <label for="remember" class=""><span class="checkbox-icon"></span> Remember me</label>
              </div>
            </div>
            <div class="form-group ctd-form-links">
              <a href="/forgot/">Forgot password?</a>
              <span>|</span>
              <a href="/register/?loginProcess=registerUser">Register</a>
            </div>
          </form>

          <p class="ctd-social-signins">
            Sign in with
            <a href="" class="ctd-facebook fa fa-facebook"></a>
            <a href="" class="ctd-twitter fa fa-twitter"></a>
            <a href="" class="ctd-linkedin fa fa-linkedin"></a>
          </p>

        </div>
        <h2 class="ctd-logo"><img src="../images/causeway_logo_black.svg" alt="Causeway Logo"></h2>
      </div>
      <div class="ctd-right-content">
        <h2 class="ctd-caption">Putting business content to work</h2>
      </div>
    </div>
  </div>
      

Class .login-image controls the background image of the login page.

If you need to change this image then define class .login-image in respective application css to overrule the default

Code example:

  .login-container .login-image {
    background: url("image url") no-repeat scroll center center transparent;;
  }
      

This login page is from the old version and is marked deprecated. We are still supporting it so that upgrading to new version is easier.

We strongly recommend to migrate to one of the new login page at the earliest.

Click to see the demo page Login_v1.0.6-0 --Deprecated

Code:

  <div class="login-container login-image">
    <div class="login-window">
      <h2>Log In</h2>

      <div class="login-form">
        <form class="form-inline">
          <div class="form-row">
            <div class="form-group">
              <div class="control-input">
                <input type="email" id="LoginName" class="form-control" name="username" value="" maxlength="50" size="30" placeholder="Username or Email">
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <div class="control-input">
                <input type="password" id="password" class="form-control" name="password" value="" maxlength="30" size="30" placeholder="Password">
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group clearfix">
              <div class="pull-left">
                <button type="button" class="btn btn-text btn-italic has-tooltip" title="" id="forgotPasswordButton" data-original-title="Click here to reset your password">Forgot Password?</button>
              </div>
              <div class="pull-right">
                <button type="button" class="btn btn-default has-tooltip" title="" id="submitButton" data-original-title="Click here to log in">Log In</button>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <div class="control-input">
                <div class="checkbox form-group form-group-inline">
                  <input type="checkbox" id="spass">
                  <label for="spass" class=""><span class="checkbox-icon"></span>Save Password</label>
                </div>
                <div class="checkbox form-group form-group-inline">
                  <input type="checkbox" id="suser">
                  <label for="suser"><span class="checkbox-icon"></span>Save Username</label>
                </div>
              </div>
            </div>
          </div>

          <div id="message"></div>
        </form>
      </div>
    </div>
    <div class="copyright">Copyright © 1999-2015 Causeway Software Solutions Limited.</div>
  </div>
      

Please define the application background image in a CSS class .login-image and include in the application css.

  .login-image {
    background: url("image url") no-repeat scroll center center transparent;;
  }