CSS AND STYLING

Resources

SCRIPTS AND HACKS

ghl-experts-logo-light
  • CSS AND STYLING

    RESOURCES

    SCRIPTS AND HACKS

  • Login CSS V1

    Add below CSS into agency Custom CSS

    /*  Color CSS Code */
    :root {
        --loginBtnColor: #42984f;
        --loginBtnHover: #42984f;
        --bodyBgColor: #fff;
    }
    
    /* BG Image CSS Code*/
    .hl_login {
        background-image: url("https://firebasestorage.googleapis.com/v0/b/highlevel-backend.appspot.com/o/location%2F3WajUBzHFZ72vq6QGWIS%2Fimages%2F8b834445-c09d-4ce5-8492-8595fe7f4788.png?alt=media") !important;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        margin-top: -82px !important;
        height: 100vh;
    }
    
    .hl_login--header {
        background: #fff0 !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }
    
    div.hl_login--body {
        max-width: 450px !important;
        width: 100% !important;
        background: var(--bodyBgColor) !important;
        border-radius: 10px !important;
        box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.08);
    }
    
    .hl_login--body .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .hl_login--body .card .card-body {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .hl_login .form-control {
        background: #fff !important;
        font-size: .875rem;
        color: #2a3135;
        border: 1px solid #bdbdbd !important;
        border-radius: 5px !important;
        padding: 10px 10px !important;
    }
    
    .hl_login--body .login-card-heading {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .hl_login--body .heading2 {
        margin-bottom: 10px;
        font-size: 25px;
    }
    
    
    .hl_login .button-holder.form-group {
        margin: 10px auto !important;
    }
    
    .hl_login .btn.btn-blue,
    .hl_login .btn.btn-blue:active,
    .hl_login .btn.btn-blue:focus {
        background-color: var(--loginBtnColor);
        border-color: var(--loginBtnColor);
        color: #fff;
        transition: 0.3s ease-in;
    }
    
    .hl_login .btn.btn-blue:hover {
        background-color: var(--loginBtnHover);
        border-color: var(--loginBtnHover);
        color: #fff;
        transition: 0.3s ease-in;
    }

    Welcome to GHL Expert Tools

    We are still in the process of finalizing all of our trainings and setup instructions. If you need help in the meantime, please join our Facebook Group.

    Join our Facebook Group

    Join our Facebook Group to get support, platform insights, ask questions and receive updates.

    Latest Update

    Visit our changelog page to see our most recent update.

    FOMO

    Capture leads before they leave the page by creating
    entincing offers that create a fear of missing out.

    Affiliate area

    Join our affiliate program to earn commissions when you refer people to GHL Experts