Customize Your GoHighLevel Login Screen With CSS | GHL Tutorial

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;

You May Also Like