Customize Theme

Theme Customization

Dark Theme

Enable Dark Theme Toggle
Displays a toggle inside the Profile top right menu which let user to switch theme to Dark and vice versa.

General

Body Font
font-family
Fonts for your entire SAASY Theme.
Start typing for more fonts ...
Roboto
 
Header Background
header-nav-bg
Customize app header background color
Secondary
#f2f7fa
 
Header Button Border Color
header-button-border-color
App header controls border color
transparent
 
Header Button Border Shadow
header-button-shadow
App header controls shadow
.1
 
Sidebar Navigation Toggler Background
navbar-toggler-bg
Sidebar navigation toggler background
Accent
#3485ff
 
Sidebar Navigation Toggler Color
navbar-toggler-fore
Sidebar navigation toggler color
#ffffff
 
Header Title Color
header-content-title
App header title color
Accent
#3485ff
 
Header Description Color
header-content-description
App header description color
Accent
#3485ff

Custom Logo for Location

Custom Logo URL
logo_url
Make sure to customize the logo height and width when implementing this solution.
 
Upload Image
Logo Height
logo-height
Customize the height of your default and custom logo
80px
 
Logo Width
logo-width
Customize the width of your default and custom logo
80%
 

Custom Logo for Location (Collapse Sidebar)

Custom Logo URL
clpse-logo_url
Make sure to customize the logo height and width when implementing this solution.
Upload Image
 
Logo Height
clpse-logo-height
Customize the height of your default and custom logo
80px
 
Logo Width
clpse-logo-width
Customize the width of your default and custom logo
80%

Dashboard

SAASY Dashboard Cards
Enable Opportunities, Pipeline Value and Conversation Rate Dashboard Cards
Toggle: Off
Status Color
card-body-status-color
Opportunity Status, Conversion Rate, Stage Distribution status color
#333333
Card Value Background
card-body-value-bg
Customize Opportunities, Pipeline Value and Conversation Rate background color
#f2f7fa
Card Value Color
card-body-value-colors
Customize Opportunities, Pipeline Value and Conversation Rate color
#333333
Card Value Font Size
card-body-value-font
Customize Opportunities, Pipeline Value and Conversation Rate font size
56px
Open Stats Width
open-stats-width
105px
Closed Stats Width
closed-stats-width
125px
Lost Stats Width
lost-stats-width
85px
Closed/Abandoned Stats Background
card-closed-stats-bg
Customize the Opportunity Status Abandoned graph background
#202020
Closed/Abandoned Stats Color
card-closed-stats-color
Customize the Opportunity Status Abandoned graph text
#ffffff
Open Stats Background
card-open-stats-bg
Customize the Opportunity Status Open graph background
#3b3a3a
Open Stats Color
card-open-stats-color
Customize the Opportunity Status Open graph text
#ffffff
Lost Stats Background
card-lost-stats-bg
Customize the Opportunity Status Lost graph background
#5e5e5e
Lost Stats Color
card-lost-stats-color
Customize the Opportunity Status Lost graph text
#ffffff
Won Stats Background
card-won-stats-bg
Customize the Opportunity Status Won graph background
#528bff
Won Stats Color
card-won-stats-color
Customize the Opportunity Status Won graph text
#ffffff
Stats Value Background
card-stats-value-bg
Customize Opportunities, Pipeline Value and Conversion Rate stats value background
#eeeeee
Stats Value Color
card-stats-value-color
Customize Opportunities, Pipeline Value and Conversation Rate stats value color
#333333
Custom Dashboard Buttons Background
dashboard-btn-bg
GHL Customizer Custom Buttons background color
#000000
Custom Buttons Background (Hover)
dashboard-btn-hover-bg
GHL Customizer Custom Buttons hover background color
#202020
Custom Buttons Border
dashboard-btn-border
GHL Customizer Custom Buttons border color
#000000
Custom Buttons Border (Hover)
dashboard-btn-hover-border
GHL Customizer Custom Buttons hover border color
#202020
Custom Buttons Color
dashboard-btn-color
GHL Customizer Custom Buttons color
#ffffff
Custom Buttons Color (Hover)
dashboard-btn-hover-color
GHL Customizer Custom Buttons hover color
#ffffff

Card Headers

Disable Card Header Border
Toggle
Hide the bottom border on the card header
Off
Card Header Background
hl-card-header-bg
Card header background for Opportunities, Funnel, Conversion Rate, etc.
#0e0e0e
Card Header Color
hl-card-header-color
Card header text color
#ffffff
Card Header Border Color
hl-card-header-border-color
Card header border color
#eaecf0
Card Header Shadow
hl-card-header-shadow
Card header shadow color
rgb(0 0 0 / 15%)
Card Header Border Radius
hl-card-header-radius
Card header border radius
15px
Card Datepicker Background
hl-card-datepicker-bg
Datepicker background on dashboard cards
#f4f4f4
Card Datepicker Color
hl-card-datepicker-color
Datepicker text color on cards
#333333
Datepicker Background
hl-datepicker-bg
Date & time selector background color
#ffffff
Datepicker Border
hl-datepicker-border
Datepicker border color
#f4f4f4
Datepicker Color
hl-datepicker-color
Text color for date & time pickers
#333333
Cards Border
  • -hl-card-border-color
Border color around all cards
#eeeeee

Inside Wrapper

App Background
app-bg-color
GHL App wrapper background color
#f2f7fa
App Border
app-border-color
GHL App border color
#3485ff
App Foreground Color
app-color
Entire GHL app foreground color
#3485ff
Table Header Background
contacts-flex-bar
Contact list table header background color
#ffffff
Table Header Text Color
contacts-flex-bar-color
Contact list table header text color
#333333

Secondary Top Navigation

Top Navigation Background
header-topnav-bg
GHL App top navigation header background color
#f2f7fa
Top Divider Color
header-topnav-divider
GHL App top navigation divider color
#f2f7fa
Top Menu Item Spacing
  • -header-top-nav-item-spacing
5px
Top Menu Title Font Size
  • -header-top-nav-item-title-font-size
16px
Top Menu Item Font Size
  • -header-top-nav-item-font-size
14px
Top Menu Item Line Height
  • -header-top-nav-item-line-height
1em
Top Menu Item Vertical Padding
  • -header-top-nav-item-tb-padding
10px
Top Menu Item Horizontal Padding
  • -header-top-nav-item-lr-padding
10px
Top Heading Background
header-topnav-title-bg
Heading background color
transparent
Top Heading Color
header-topnav-title-color
#3485ff
Top Menu Item Background
header-topnav-item-bg
Top menu items background color
#f2f7fa
Top Menu Item Background (Active)
header-topnav-active-item-bg
Active top menu items background color
#3485ff
Top Menu Item Border
header-topnav-item-border
Top menu items border color
#3485ff
Top Menu Item Border (Active)
header-topnav-active-item-border
Top menu items active border color
#3485ff
Top Menu Item Color
header-topnav-item-color
Top menu items text color
#3485ff
Top Menu Item Color (Active)
header-topnav-active-item-color
Top menu items active text color
#ffffff
Top Menu Item Icon Background
header-topnav-item-icon-bg
Top menu icons background
transparent
Top Menu Item Icon Background (Active)
header-topnav-active-item-icon-bg
Top menu icons active background
#ffffff
Sub Menu Item Background
header-topnav-subitem-bg
Sub menu items background color
#f2f7fa
Sub Menu Item Background (Active)
header-topnav-active-subitem-bg
Active sub menu items background color
#3485ff
Sub Menu Item Border
header-topnav-subitem-border
Sub menu item border color
#3485ff
Sub Menu Item Border (Active)
header-topnav-active-subitem-border
Sub menu item active border color
#3485ff
Sub Menu Item Color
header-topnav-subitem-color
Sub menu item text color
#3485ff
Sub Menu Item Color (Active)
header-topnav-active-subitem-color
Sub menu item active text color
#ffffff

Left Sidebar Menu – Hide Tooltips

No specific class name shown
Toggles tooltip visibility on the left sidebar menu
On

Left Sidebar Menu – Top Section & Settings

Location Switcher Background
location-switcher-bg
Search Sub Account Location Switcher background color
#ffffff
Location Switcher Border
location-switcher-border
#3485ff
Location Switcher Color
location-switcher-color
Search Sub Account Location Switcher text color
#333333
Location Switcher: Hide Location Address
Toggle setting
On
Quick Action Background
quick-action-button-bg
Quick Action button background color
#3485ff
Quick Action Background (Hover)
quick-action-button-hover-bg
#3485ff
Quick Action Border
quick-action-button-border
#3485ff
Quick Action Border (Hover)
quick-action-button-hover-border
#3485ff
Quick Action Color
quick-action-button-color
#3485ff
Quick Action Color (Hover)
quick-action-button-hover-color
#3485ff
Search Opener Background
search-opener-bg
#ffffff
Search Opener Border
search-opener-border
#3485ff
Search Opener Color
search-opener-color
#3485ff
New Menu Item Background
new-badge-bg
#f2f7fa
New Menu Item Color
new-badge-color
#3485ff
Back Button Background
back-button-bg
#f2f7fa
Back Button Color
back-button-color
#3485ff
Sub Heading Color (Settings Title)
sub-heading-color
#3485ff
Hide Settings Labels
Toggle
Hides the titles in the Settings Area: My Business, Business Services, Other Settings
Off

Left Sidebar Menu – Menu Colors

🧱 Sidebar Settings

Sidebar Background
sidebar-bg-color
App Sidebar background color
#f2f7fa
Sidebar Border
sidebar-border-color
App Sidebar border color
transparent
Left Menu Divider
left-link-divider
Sidebar menu divider color
#3485ff
Left Menu Items Background
left-link-bg
Sidebar menu items background color
transparent
Left Menu Items Background (Active)
left-active-bg
Sidebar menu active item background
#f2f7fa
Left Menu Items Color
left-link-color
Sidebar menu items text color
#333333
Left Menu Items Color (Active & Hover)
left-active-fore
Sidebar active/hover item text color
#3485ff
Left Menu Items Icon Background
left-link-icon-bg
Sidebar item icon background
#f2f7fa
Left Menu Items Icon Background (Active)
left-active-link-icon-bg
Sidebar item icon active background
#333333
Left Menu Icon (White)
Toggle for white icons
Off
Left Menu Icon (Black)
Toggle for black icons
On
Left Menu Icon Active/Hover (White)
Off
Left Menu Icon Active/Hover (Black)
On

📂 Sub Menu Settings

Left Sub Menu Items Background
left-sub-bg
Sub menu background color
#f2f7fa
Left Sub Menu Items Background (Active)
left-sub-active-bg
Sub menu active background
#f2f7fa
Left Sub Menu Items Color
left-sub-fore
Sub menu text color
#333333
Left Sub Menu Items Color (Active)
left-sub-active-fore
Sub menu active text color
#3485ff
Left Sub Menu List Border
Toggle sub menu list borders
Off
Left Sub Menu List Color
left-sub-list-border-color
#f2f7fa

✍️ Typography & Radius

Left Menu Font Weight
  • -left-link-font-weight
Sidebar font weight
normal
Left Menu Border Radius
  • -left-link-border-radius
Sidebar rounded border radius
5px

Left Sidebar Menu – Font Size, Font, Weight & Letter Spacing

📋 Menu Header Settings

Hide Menu Header Dividers
Toggle
Hides the menu header dividers
Off
First Menu Header: Disable Top Spacing
Toggle
Removes top spacing on first menu header
Off
Menu Header Font Size
menu-header--font-size
10px
Menu Header Color
menu--header-color
#333333
Font Weight (Menu Header)
menu--header-font-weight
500
Menu Header Top Spacing
menu--header-top-spacing
10px
Menu Header Bottom Spacing
menu--header-bottom-spacing
10px

🅰️ Font Settings

Main Menu Font Size
sidebar--font-size
14px
Font Weight (Main Menu)
  • -main-font-weight
500
Font Weight (Sub Menu)
  • -sub-font-weight
500
Main Menu Letter Spacing
  • -letter-spacing
0px

📏 Spacing & Padding

Menu Vertical Margin
  • -vertical-spacing
5px
Menu Vertical Padding
  • -menu--vertical-padding
5px
Disable Sub Menu Items Dividers
Toggle
Removes dividers between sub menu items
Off

Left Sidebar – Scrollbar

Scrollbar Width
scrollbar-width
2px
Scrollbar Background
scrollbar-bg
#f2f7fa
Scrollbar Color
scrollbar-color
#3485ff

Opportunities – Scrollbar

Scrollbar Background
opp-scrollbar-bg
#ffffff
Scrollbar Color
opp-scrollbar-color
#1540d5
Scrollbar Width
opp-scrollbar-width
12px
Horizontal Scrollbar Height
opp-scrollbar-height
12px