Get Your Free 14 Day Trial Of HighLevel Here!!
Learn how to create a custom GoHighLevel login screen with CSS. Whether it’s an additional advantage to purchasing your SaaS platform, a way to impress clients or more! Check out the helpful resources below.
Contact me via email!
will@growthcomarketing.com
Visit Growth Co Marketing!
/
Websites shown in video:
s
/
Custom CSS Shown in Video:
/* Color CSS Code */
:root {
–loginBtnColor: #e45d4b;
–loginBtnHover: #e45d4b;
–bodyBgColor: #fff;
–login-button-background-color: #e45d4b;
–login-button-background-hover-color: #f06d5b;
–login-button-text-color: #fff;
}
/* BG Image CSS Code*/
.hl_login {
background: #4b6aaa !important;
display: flex !important;
flex-direction: column !important;
justify-content: left !important;
align-items: left !important;
margin: 0 auto !important;
padding: 0 !important;
margin-top: -82px !important;
height: 110vh;
}
.hl_login–header {
background: #fff0 !important;
border-bottom: 0 !important;
padding: 0 !important;
margin-bottom: 20px !important;
position: absolute;
left: 210px;
top: 200px;
}
div.hl_login–body {
max-width: 600px !important;
width: 100% !important;
background: var(–bodyBgColor) !important;
border-radius: 0px 100px 0px 0px !important;
box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);
height: 100%;
float: left;
margin-top: 130px;
}
.hl_login–body .card {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
box-shadow: none !important;
margin: 0 !important;
padding: 40% 0px 0px 0px;
background-color: transparent;
}
.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;
}
.hl_login button {
background-color: var(–login-button-background-color);
color: var(–login-button-text-color);
min-height: 55px;
}
.hl_login .hover:bg-curious-blue-600:hover,
.hl_login button:hover {
background-color: var(–login-button-background-hover-color) !important;
}