Code Library

HighLevel customizations, copy-paste ready

Every CSS and JS snippet from the library — sidebar rebrands, checkout tweaks, login pages, calendars, forms and more.

96 snippets across 18 categories

:root {
  --main-body-bg: #fff;
  --main-body-image: url(https://example.com/bg.png);
  --login-logo: url(https://example.com/logo.svg);
  --login-button-bg: #404040;
  --login-button-hover-bg: #0D7680;

FeaturedLogin Pages · CSS

Custom HighLevel Agency Login Screen

Full-page custom login redesign: split layout with background image on the right, custom logo, dark panel background, responsive breakpoints for tablet/mobile.

Where to paste

Agency > Settings > Whitelabel > Custom CSS

Showing 24 of 96 · 96 total

```
/* Hide original text from sidebar menu labels */
#sb_launchpad span,
#sb_dashboard span,
#sb_conversations span,
```
CSS
Rename Sidebar Menu Items
Sidebar & Menu
Renames the default HighLevel sidebar labels (Launchpad, Dashboard, Conversations, etc.) to custom text using CSS content injection.
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
#sb_ai-employee-promo{display:none!important;}
#sb_launchpad{display:none!important;}
#sb_dashboard{display:none!important;}
#sb_conversations{display:none!important;}
```
CSS
Hide Main Sidebar Menu Items
Sidebar & Menu
Hides any main sidebar menu items (Launchpad, Dashboard, Payments, Memberships, App Marketplace, etc.) via CSS display:none.
Where to paste
Agency > Settings > Whitelabel > CSS Code box

(function () {
  const hiddenMenuLocationIds = ['CY3NuKb45jDC4NkqpHV3','Sr99nTAsuyDCbfQCL1JQ','1yOGYfoijdDCBjR2YTJ5','L7bCRcMLEmDCtNi77ZQQ'];
  const menuSelectorsToHide = ['#sb_ai-employee-promo','a[href*="ai-agents"]','#sb_ai-agents','.sidebar-v2-menu-item[href*="/ai-agents"]','[id="sb_AI Agents"]','#sb_location-mobile-app','#chat-connect','#fb-connect','#launchpad-chatwidget-connect','#whatsapp-connect','#launchpad-stripe-connect','#invite-user','#sb_reporting','#tb_reputations-requests','#tb_quiz-builder','#tb_online-listings','#sb_memberships','#sb_app-marketplace','#reputation-yext-overview-card','#sb_objects','#sb_agency-dashboard','#sb_whatsapp'];
  function hideMenuItemsForLocation() {

Hide Menu Items by Location ID

Sidebar & Menu

JS that conditionally hides a large list of sidebar/menu elements only for specific location IDs, using a MutationObserver so it re-applies as the SPA re-renders.

Where to paste

Agency > Settings > Whitelabel > JS Code box

```
#chat-connect{display:none!important;}
#gmb-connect{display:none!important;}
#fb-connect{display:none!important;}
#launchpad-chatwidget-connect{display:none!important;}
```
CSS
Hide Launchpad Connect Buttons
Sidebar & Menu
Hides individual connect buttons (Chat, GMB, Facebook, WhatsApp, Stripe, Invite User) on the Launchpad page.
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
#tb_funnels{display:none!important;}
#tb_websites{display:none!important;}
#tb_stores{display:none!important;}
#tb_webinars{display:none!important;}
```
CSS
Hide Sub-Menu Links: Sites
Sidebar & Menu
Hides sub-navigation links under the Sites menu (Funnels, Websites, Stores, Webinars, Analytics, Blogs, Form/Survey/Quiz Builder, Chat Widget, QR Codes).
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
#tb_social-planner{display:none!important;}
#tb_email-templates{display:none!important;}
#tb_countdown-timer .items-center{display:none!important;}
#tb_email-builder{display:none!important;}
```
CSS
Hide Sub-Menu Links: Marketing
Sidebar & Menu
Hides sub-navigation links under Marketing (Social Planner, Email Templates, Countdown Timer, Email Builder, Trigger Links, Affiliate Manager, Brand Boards, Ad Manager).
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
#tb_payment-invoices{display:none!important;}
#tb_proposals-estimates{display:none!important;}
#tb_payment-orders-new{display:none!important;}
#tb_payment-subscriptions{display:none!important;}
```
CSS
Hide Sub-Menu Links: Payments
Sidebar & Menu
Hides sub-navigation links under Payments (Invoices, Proposals, Orders, Subscriptions, Links, Transactions, Products, Coupons, Settings, Integrations).
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
#tb_clientportalCommunities{display:none!important;}
#tb_courses{display:none!important;}
#tb_communities{display:none!important;}
#tb_certificates{display:none!important;}
```
CSS
Hide Sub-Menu Links: Memberships
Sidebar & Menu
Hides sub-navigation links under Memberships (Client Portal Communities, Courses, Communities, Certificates, GoKollab).
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
.-right-2.bottom-5.z-50 {
  bottom: auto !important;
  top: 5rem !important;
}
```
CSS
Move Sidebar Toggle to Top
Sidebar & Menu
Moves the sidebar collapse/expand toggle button from the bottom of the menu to the top.
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
.hl_alert_twilio{display:none!important;}
```
CSS
Hide Twilio No-Phone-Number Warning Banner
Sidebar & Menu
Hides the red Twilio warning banner that appears when no phone number is connected.
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
.flex.items-center > .text-purple-600 {
  display: none !important;
}
```
CSS
Hide Voice AI Missed Call Banner
Sidebar & Menu
Hides the purple 'Voice AI missed call' text banner shown in the app.
Where to paste
Agency > Settings > Whitelabel > CSS Code box
```
<script>
function redirectToAgencyDashboard() {
  const defaultPath = '/ai-employee-promo';
  const targetPath = '/agency_dashboard/';
```
JS
Bypass AI Promo Landing Page Redirect
Sidebar & Menu
Automatically redirects users away from the default AI Employee promo landing page to the agency dashboard.
Where to paste
Agency > Settings > Whitelabel > JS Code box
```
a[href*="/settings/team"] {display:none!important;}

/* To restore temporarily: open DevTools console and run: */
$('a[href*="/settings/team"]').attr("style","display:none!important;");
```
CSS
Remove TEAM MANAGEMENT Menu Item
Sidebar & Menu / SaaS Mode
Hides the Team Management link from Settings (useful for per-user SaaS pricing). Includes a bonus console snippet to temporarily restore it for yourself via DevTools.
Where to paste
Custom CSS box under /settings/company
```
#nav-agency_services {display:none;}
```
CSS
Remove AGENCY SERVICES Menu Item
Sidebar & Menu / SaaS Mode
Hides the Agency Services navigation item from Settings/Users (deduplicated - identical snippet appeared 3 times in the source library).
Where to paste
Custom CSS box under /settings/company
```
$('h2:contains("Facebook Ads")').parents().closest('.pmd_dashboard--appointments').css('display','none');
```
JS
Remove Facebook Ads Widget from Dashboard
Sidebar & Menu
Removes the Facebook Ads widget/card from location dashboards.
Where to paste
Custom Javascript box in Agency Settings

/* This will change the sidebar menu to a red/white gradient. To change from RED to something else, update the 2nd rgba number. */
.hl_navbar{background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

CSS

Change Left Nav Bar Color (Whitelabel Gradient)

Sidebar & Menu / Branding

Changes the sidebar navigation background to a custom color gradient.

Where to paste

Custom CSS box in Agency Settings

```
<script>
let myElement = document.querySelector("link[rel=icon]");
// update this link below to your own favicon URL
myElement.href = "https://media.flaticon.com/dist/min/img/home/editor-1.png";
```
JS
Change Favicon
Branding
Updates the favicon shown across all locations/accounts by replacing the icon link element via JS (deduplicated - appeared twice in source).
Where to paste
Custom Javascript box under /settings/company
```
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
setTimeout(function() {
  /* Add 'Powered By' configuration logic here */
```
JS
Configure / Remove 'Powered By HighLevel'
Branding
Advanced framework loader (jQuery + timeout wrapper) used to configure or remove the 'Powered By HighLevel' branding.
Where to paste
Custom Javascript box under /settings/company (Advanced Framework)
```
[placeholder="Custom Javascript"]{height:20em;}
```
CSS
Update Number of Rows on Custom CSS/JS boxes
Branding
Increases the visible height of HighLevel's Custom CSS / Custom Javascript textarea editors in Agency Settings.
Where to paste
Custom CSS box under /settings/company
```
.hl_opportunities--set {min-width: 300px;}
```
CSS
Visually More Compact Opportunities
Opportunities
Reduces the minimum width of the opportunities/pipeline board cards for a more compact view.
Where to paste
Custom CSS box under /settings/company
```
/* Update the 500px below to set the size */
.hl_opportunities--set {min-width: 500px!important;}
.hl_opportunities--set ul {width: 100%!important;}
```
CSS
Update Opportunities Pipeline Width
Opportunities
Adjusts the width of the opportunities pipeline columns/cards (edit the 500px value to your preferred size).
Where to paste
Custom CSS box under /settings/company

/* Opportunity Tag Example CSS - Change "hot" to your tag name */
#OpportunitiesList .hr-config-provider .cardWrapper .ui-card .tag-hot { background: rgb(123,45,45) !important; }
#OpportunitiesList .hr-config-provider .cardWrapper .ui-card .tag-hot { background: rgba(255,255,255,.2); color: #fff !important; padding: 10px; margin: 0px; margin-bottom: 5px; border-radius: 3px; }
#OpportunitiesList .hr-config-provider .cardWrapper .ui-card .tag-hot *:not(a) { color: #fff !important; }

CSS

Opportunity Tag Styles (Custom Colored Tags)

Opportunities

Custom CSS template to style opportunity/pipeline card tags with custom background colors per tag name (e.g. 'hot').

Where to paste

GHL Customizer / Funnel Custom CSS

```
.branding-wrap {display:none;}
```
CSS
Remove Account Branding From Forms in Form Builder
Forms
Hides the 'powered by' account branding wrap shown at the bottom of forms.
Where to paste
Custom CSS section inside the form editor > Styles

/* CSS */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
#el_YOURFORMID_header_0 p { text-align:center; font-size:2.5rem; font-weight:700; background:linear-gradient(135deg,#2d3748,#4a5568); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
#el_YOURFORMID_first_name_0 label, #el_YOURFORMID_last_name_1 label, #el_YOURFORMID_phone_2 label, #el_YOURFORMID_email_3 label { position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; transition:all .2s ease; background:white; padding:0 4px; }

CSS+JS

Google-Style Floating Labels for Forms

Forms

Turns form field labels into animated floating labels (Google Material style) that move above the input on focus/fill, plus font styling for the form title.

Where to paste

Form Builder > Custom CSS box + HTML element under the form

HighLevel customizations, copy-paste ready

Custom HighLevel Agency Login Screen

Rename Sidebar Menu Items

Hide Main Sidebar Menu Items

Hide Menu Items by Location ID

Hide Launchpad Connect Buttons

Hide Sub-Menu Links: Sites

Hide Sub-Menu Links: Marketing

Hide Sub-Menu Links: Payments

Hide Sub-Menu Links: Memberships

Move Sidebar Toggle to Top

Hide Twilio No-Phone-Number Warning Banner

Hide Voice AI Missed Call Banner

Bypass AI Promo Landing Page Redirect

Remove TEAM MANAGEMENT Menu Item

Remove AGENCY SERVICES Menu Item

Remove Facebook Ads Widget from Dashboard

Change Left Nav Bar Color (Whitelabel Gradient)

Change Favicon

Configure / Remove 'Powered By HighLevel'

Update Number of Rows on Custom CSS/JS boxes

Visually More Compact Opportunities

Update Opportunities Pipeline Width

Opportunity Tag Styles (Custom Colored Tags)

Remove Account Branding From Forms in Form Builder

Google-Style Floating Labels for Forms