Auth0 Login templates - AngelaMeow/Design-wiki GitHub Wiki

Getting Started with Login Templates

If you want to use one of the templates that we provide below, please read the instructions to customize Auth0 login here.

Now, check out the templates:

Template 1

Here is the code to replace:

    /* Font family */
    .auth0-lock.auth0-lock {
      font-family: 'Your-font-family', sans-serif !important;
    }

    /* Page background */
    .auth0-lock.auth0-lock .auth0-lock-overlay {
      background: transparent!important;
      background-image: url('../image.png')!important;
      background-size: cover!important;
    }

    /* Logo background */
    .auth0-lock.auth0-lock .auth0-lock-header-bg {
      background: none!important;
    }

    /* Logo size */
    .auth0-lock.auth0-lock .auth0-lock-header-logo {
      height: 50px !important;
    }

    /* Login widget */
    .content, .auth0-lock.auth0-lock .auth0-lock-widget {
      width: 50vw !important;
      min-width: 310px!important;
      position: absolute!important;
      top: 0!important;
      left: 0!important;
      height: 100vh!important;
    }

    .auth0-lock.auth0-lock .auth0-lock-cred-pane {
      height: 100vh!important;
      border-radius: 0!important;
      overflow: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-widget {
      box-shadow: none !important;
      border: 1px solid #DDD !important;
      border-radius: 0;
    }

    /* Login button */
    .auth0-lock.auth0-lock .auth0-lock-submit {
      padding: 8px 14px!important;
      width: calc( 100% - 40px )!important;
      border-radius: 0!important;
      margin: 0 auto 40px!important;
      height: 60px !important;
    }

    /* Messages - (Error & Success shared styles) */
    .auth0-lock.auth0-lock .auth0-global-message {
      width: 300px;
      margin: 20px auto 0;
      text-transform: none!important;
      font-size: 12px;
      padding: 4px;
    }

    /* Error message */
    .auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-error {
      background: mistyrose!important;
      border: 1px solid darksalmon!important;
      color: darkred!important;
    }

    /* Success message */
    .auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-success {
      background: honeydew!important;
      border: 1px solid mediumaquamarine!important;
      color: seagreen!important;
    }

    /* Auth0 Powered by - Button */
    .auth0-lock.auth0-lock .auth0-lock-badge-bottom {
      background: rgba(0,0,0,0.5)!important;
    }

Important Remember to edit the color, font-family, borders, and font-sizes to match your design.