> For the complete documentation index, see [llms.txt](https://docs.allthingsghl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.allthingsghl.com/login/lvustom.md).

# Custom GHL Login

<figure><img src="/files/WVcSo9HpmgyVchMKGqiQ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/EPCq19C0pnIVmYT9fjSr" alt=""><figcaption></figcaption></figure>

## CSS

```css
/* Custom GHL Login Screen */
:root {
  --main-body-bg: #fff;

/* Change Image */
--main-body-image: url(https://storage.googleapis.com/msgsndr/wyGfur5GgixhPSNohGQ2/media/68529bb9cce1919cfd714e29.png);
  --main-login-bg: #fff;

/* Change Image */
--login-logo: url(https://storage.googleapis.com/msgsndr/wyGfur5GgixhPSNohGQ2/media/68528bf01d27cf6f550aed42.svg);
  --login-heading-color: #fff;
  --login-input-color: #000;
  --login-input-border: #fff;
  --login-error-color: red;
  --login-forgot-pass-color: #fff;
  --login-button-bg: #404040; /* medium shade of grey */
  --login-button-color: #fff;
  --login-button-hover-bg: #0D7680; /* Darker Coelia Greenshade for hover */
  --login-button-hover-color: #fff;
  --login-foot-note-color: #fff;
  --login-foot-note-link-color: #fff;
}

span.text-gray-700 {
  color: #333;
}

p.ml-2 {
  color: white !important;
}

body .hl_login--body * {
  font-family: var(--main-font);
}

.hl_login {
  background: var(--main-body-bg) !important;
}

.hl_login--header {
  position: absolute;
  background: transparent !important;
  margin-bottom: 0 !important;
  border: none !important;
  z-index: 99;
}

.hl_login--header .container-fluid a img {
  display: none;
}

.hl_login--body .container-fluid {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 0 !important;
  background: #1D1F25;
}

.hl_login--body .card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  border: none !important;
  box-shadow: none !important;
  background: var(--main-login-bg) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}



.hl_login--body .card .card-body {
  display: block;
  margin-top: 40px !important;
  box-sizing: border-box;
  width: 50rem !important;
  text-align: left;
}

/* Button styling */
.hl_login--body .card .card-body button {
  background-color: var(--login-button-bg);
  color: var(--login-button-color);
}

.hl_login--body .card .card-body button:hover {
  background-color: var(--login-button-hover-bg);
  color: var(--login-button-hover-color);
}

.hl_login--body .container-fluid:after {
  content: '';
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  max-width: 70%; /* Adjusted width to fill right side */
  background-image: var(--main-body-image);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #1D1F25;
}

.hl_login--body .card .login-card-heading h2.heading2:before {
  content: '';
  background-image: var(--login-logo);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  display: block;
  margin: 0 auto 10px;
  width: 300px;
  height: 125px;
  left: 0;
  right: 0;
}

/* Responsive Adjustments */

/* Tablet adjustments */
@media (max-width: 1024px) {
  .hl_login--body .card .card-body {
    width: 75%;
    margin-top: 40px;
  }

  .hl_login--body .container-fluid:after {
    max-width: 50%;
    background-position: center;
  }

  .hl_login--body .card .login-card-heading h2.heading2:before {
    width: 250px;
    height: 100px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hl_login--body .container-fluid {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Original centering */
  }

  .hl_login--body .card {
    height: auto;
    box-sizing: border-box;
    width: auto;
  }

  .hl_login--body .card .card-body {
    width: auto;
    margin-top: -40px !important;
    text-align: center;
  }

  /* Adjust the space above the logo */
  .hl_login--body .card .login-card-heading h2.heading2:before {
    width: 250px;
    height: 150px;
  }

  h2, h1, .heading, .login-card-heading h2.heading2 {
    font-size: 1.5rem;
  }

  .hl_login--body .container-fluid:after {
    display: none; /* Hide background image on small screens */
  }
}


```

## HTML

```html
<!-- Add this code component at the end of your form -->
<script>
/* 
===========================================
🎯 REPLACE THESE IDs WITH YOUR FORM'S IDs
===========================================
*/

// STEP 1: Replace the base ID below with your form's unique base ID
const BASE_ID = "el_LMJooqORZBylcpi6wBnH";

// STEP 2: Update these field suffixes to match your form structure
const FIELD_CONFIG = {
  firstName: `#${BASE_ID}_first_name_0`,
  lastName:  `#${BASE_ID}_last_name_1`,
  phone:     `#${BASE_ID}_phone_2`,
  email:     `#${BASE_ID}_email_3`,
  // Add more fields here if needed:
  // company: `#${BASE_ID}_company_4`,
  // message: `#${BASE_ID}_message_5`,
};

/* 
=========================================
⚠️  DON'T EDIT ANYTHING BELOW THIS LINE
=========================================
*/

// Convert config object to array for processing
const fields = Object.values(FIELD_CONFIG);

function initField(field) {
  const wrapper = document.querySelector(`${field} .form-builder--item`);
  const input = wrapper?.querySelector("input");
  
  if (!wrapper || !input) {
    console.warn(`Enhanced field not found: ${field}`);
    return;
  }

  // Add focus/blur event listeners
  input.addEventListener("focus", () => wrapper.classList.add("focused"));
  
  input.addEventListener("blur", () => {
    wrapper.classList.remove("focused");
    wrapper.classList.toggle("filled", input.value.trim() !== "");
  });

  // Set initial filled state
  if (input.value.trim()) wrapper.classList.add("filled");

  // Handle error layout shift prevention
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (
          node.nodeType === 1 &&
          (node.classList?.contains("error") || node.id === "error-container")
        ) {
          node.remove();
          wrapper.parentNode.insertBefore(node, wrapper.nextSibling);
        }
      });
    });
  });
  
  observer.observe(wrapper, { childList: true, subtree: true });
}

// Initialize when DOM is ready
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", () => fields.forEach(initField));
} else {
  fields.forEach(initField);
}
</script>
```

## Instructions

1. Add HTML code to an HTML element under the form
   1. Follow instructions to find IDs
2. Add CSS code to the form Custom CSS box
3. Save


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.allthingsghl.com/login/lvustom.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.