# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.