Make sure you are using !important on your declarations. GHL's built-in styles have high specificity.Clear your browser cache or do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).Check that the CSS is saved in the correct field under agency settings.

GHL Dashboard Customization: CSS Styling Guide | GHL Experts

If you manage a GoHighLevel agency, you know the dashboard is where your team and clients spend most of their time. While full dashboard themes change the overall color scheme, sometimes you need more surgical control -- changing just the button colors, adjusting the header font, or tweaking the sidebar without affecting everything else.

This guide breaks down GHL dashboard styling element by element. Each section targets a specific part of the interface with CSS code you can copy, customize, and paste into your agency settings. Mix and match the pieces that matter to your brand.

Where to Add These CSS Snippets

All custom CSS goes into the same place:

Log into your GoHighLevel agency account.
Navigate to Settings > Company.
Find the Custom CSS field.
Paste your CSS code.
Click Save.

You can combine multiple snippets from this guide into a single stylesheet. Just paste them one after another in the Custom CSS field.

Pro tip: Start each snippet with a CSS comment (like /* Header Styling */) so you can quickly find and edit specific sections later.

Quick Action Buttons

The quick action buttons (commonly found at the top of the dashboard for actions like adding contacts, creating opportunities, or sending messages) are one of the first things users interact with. Here is how to restyle them.

Change Button Background Color

1/* Quick Action Button - Background Color */
2.quick-actions .btn,
3.quick-action-btn,
4.hl_quick-actions button {
5  background-color: #2563eb !important;
6  border-color: #2563eb !important;
7  color: #ffffff !important;
8  border-radius: 6px !important;
9  transition: all 0.2s ease-in-out;
10}
11
12.quick-actions .btn:hover,
13.quick-action-btn:hover,
14.hl_quick-actions button:hover {
15  background-color: #1d4ed8 !important;
16  border-color: #1d4ed8 !important;
17  transform: translateY(-1px);
18  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
19}

Outline-Style Buttons

If you prefer a lighter look, use outline-style buttons instead:

1/* Quick Action Button - Outline Style */
2.quick-actions .btn,
3.quick-action-btn {
4  background-color: transparent !important;
5  border: 2px solid #2563eb !important;
6  color: #2563eb !important;
7  border-radius: 6px !important;
8  font-weight: 600 !important;
9  transition: all 0.2s ease-in-out;
10}
11
12.quick-actions .btn:hover,
13.quick-action-btn:hover {
14  background-color: #2563eb !important;
15  color: #ffffff !important;
16}

Main Header Styling

The top header bar runs across the entire width of the dashboard. It typically contains the agency logo, search bar, notifications, and user profile. Customizing this area makes an immediate visual impact.

Header Background and Text Color

1/* Main Header - Background & Text */
2.topbar,
3.hl_header,
4header.navbar {
5  background-color: #0f172a !important;
6  border-bottom: 2px solid #1e293b !important;
7}
8
9.topbar .nav-link,
10.topbar .navbar-text,
11.hl_header a,
12.hl_header span {
13  color: #e2e8f0 !important;
14}
15
16.topbar .nav-link:hover,
17.hl_header a:hover {
18  color: #ffffff !important;
19}

Header with Gradient Background

For a more dynamic header, use a gradient:

1/* Main Header - Gradient Background */
2.topbar,
3.hl_header,
4header.navbar {
5  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
6  border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
7}

Custom Header Font

Change the font family in the header to match your brand typography:

1/* Main Header - Custom Font */
2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
3
4.topbar,
5.topbar *,
6.hl_header,
7.hl_header * {
8  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
9}

You can replace Inter with any Google Font. Popular choices for SaaS dashboards include Inter, Plus Jakarta Sans, DM Sans, and Outfit.

Sidebar Navigation

The sidebar is where users navigate between modules (contacts, conversations, opportunities, calendars, and more). Styling it properly creates a strong visual anchor for your brand.

Sidebar Background Color

1/* Sidebar - Background */
2.left-sidebar,
3.sidebar-nav,
4.hl_sidebar,
5nav.sidebar {
6  background-color: #0c1929 !important;
7}

Sidebar Link Colors and Active State

1/* Sidebar - Link Colors */
2.left-sidebar .sidebar-nav ul li a,
3.hl_sidebar a,
4nav.sidebar a {
5  color: #8ba3be !important;
6  padding: 10px 16px !important;
7  border-radius: 6px !important;
8  margin: 2px 8px !important;
9  transition: all 0.15s ease;
10}
11
12/* Sidebar - Hover State */
13.left-sidebar .sidebar-nav ul li a:hover,
14.hl_sidebar a:hover,
15nav.sidebar a:hover {
16  background-color: rgba(255, 255, 255, 0.06) !important;
17  color: #ffffff !important;
18}
19
20/* Sidebar - Active/Selected State */
21.left-sidebar .sidebar-nav ul li.active > a,
22.hl_sidebar a.active,
23nav.sidebar a.router-link-active {
24  background-color: #2563eb !important;
25  color: #ffffff !important;
26  font-weight: 600 !important;
27}

Sidebar Icons

If you want to change the color of sidebar icons:

1/* Sidebar - Icon Colors */
2.left-sidebar .sidebar-nav ul li a i,
3.left-sidebar .sidebar-nav ul li a svg,
4.hl_sidebar a svg {
5  color: #607d9b !important;
6  opacity: 0.8;
7  transition: all 0.15s ease;
8}
9
10.left-sidebar .sidebar-nav ul li a:hover i,
11.left-sidebar .sidebar-nav ul li a:hover svg,
12.left-sidebar .sidebar-nav ul li.active > a i,
13.left-sidebar .sidebar-nav ul li.active > a svg {
14  color: #ffffff !important;
15  opacity: 1;
16}

Sidebar Divider Lines

Add subtle dividers between sidebar sections:

1/* Sidebar - Section Dividers */
2.left-sidebar .sidebar-nav ul li.nav-section {
3  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
4  margin-top: 8px !important;
5  padding-top: 8px !important;
6}
7
8.left-sidebar .sidebar-nav ul li.nav-section span {
9  color: #4a6580 !important;
10  font-size: 0.7rem !important;
11  text-transform: uppercase !important;
12  letter-spacing: 0.08em !important;
13}

Card Headers and Link Colors

Dashboard cards display data summaries, charts, and quick-access panels. Styling card headers and their links can tie the dashboard together visually.

Card Header Background and Text

1/* Card Headers */
2.card .card-header,
3.card-header {
4  background-color: #f8fafc !important;
5  border-bottom: 1px solid #e2e8f0 !important;
6  padding: 14px 20px !important;
7}
8
9.card .card-header h4,
10.card .card-header h5,
11.card .card-header .card-title {
12  color: #1e293b !important;
13  font-weight: 600 !important;
14  font-size: 0.95rem !important;
15}

Card Header Link Colors

Links inside card headers (like "View All" or date range selectors) often need their own styling:

1/* Card Header - Link Colors */
2.card .card-header a,
3.card-header a {
4  color: #2563eb !important;
5  text-decoration: none !important;
6  font-weight: 500 !important;
7  transition: color 0.15s ease;
8}
9
10.card .card-header a:hover,
11.card-header a:hover {
12  color: #1d4ed8 !important;
13  text-decoration: underline !important;
14}

Card Body Styling

1/* Card Body */
2.card {
3  border: 1px solid #e2e8f0 !important;
4  border-radius: 10px !important;
5  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
6  overflow: hidden;
7}
8
9.card .card-body {
10  padding: 20px !important;
11}

Loading Animation

GoHighLevel displays a loading spinner or animation when navigating between pages or loading data. You can customize its color to match your brand.

Loading Spinner Color

1/* Loading Animation - Spinner Color */
2.spinner-border,
3.loading-spinner,
4.hl-loading {
5  color: #2563eb !important;
6  border-color: #2563eb !important;
7  border-right-color: transparent !important;
8}

Loading Bar Color

If the dashboard uses a top loading bar (progress bar style):

1/* Loading Bar - Top Progress Bar */
2.nprogress .bar,
3#nprogress .bar {
4  background-color: #2563eb !important;
5  height: 3px !important;
6}
7
8.nprogress .peg,
9#nprogress .peg {
10  box-shadow: 0 0 10px #2563eb, 0 0 5px #2563eb !important;
11}

Table and Data Styling

Many GHL dashboard views display data in tables (contacts, opportunities, campaigns). Here is how to style them:

1/* Tables */
2.table thead th {
3  background-color: #f8fafc !important;
4  color: #475569 !important;
5  font-weight: 600 !important;
6  font-size: 0.8rem !important;
7  text-transform: uppercase !important;
8  letter-spacing: 0.04em !important;
9  border-bottom: 2px solid #e2e8f0 !important;
10  padding: 12px 16px !important;
11}
12
13.table tbody td {
14  padding: 12px 16px !important;
15  border-bottom: 1px solid #f1f5f9 !important;
16  color: #334155 !important;
17  vertical-align: middle !important;
18}
19
20.table tbody tr:hover {
21  background-color: #f8fafc !important;
22}

Form Input Styling

Text fields, dropdowns, and other form inputs appear throughout the dashboard. Consistent input styling ties the interface together.

1/* Form Inputs */
2.form-control,
3input[type="text"],
4input[type="email"],
5input[type="password"],
6input[type="search"],
7textarea,
8select.form-control {
9  border: 1px solid #cbd5e1 !important;
10  border-radius: 6px !important;
11  padding: 8px 12px !important;
12  font-size: 0.875rem !important;
13  color: #334155 !important;
14  background-color: #ffffff !important;
15  transition: border-color 0.15s ease, box-shadow 0.15s ease;
16}
17
18.form-control:focus,
19input:focus,
20textarea:focus {
21  border-color: #2563eb !important;
22  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
23  outline: none !important;
24}

Global Font Override

To change the font across the entire dashboard:

1/* Global Font Override */
2@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
3
4body,
5.page-wrapper,
6.left-sidebar,
7.topbar,
8.card,
9.form-control,
10.btn {
11  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
12}

Badge and Tag Styling

Contact tags, pipeline stage labels, and status badges appear frequently. Custom styling makes them easier to scan:

1/* Badges and Tags */
2.badge,
3.tag,
4.label {
5  border-radius: 20px !important;
6  padding: 4px 10px !important;
7  font-size: 0.75rem !important;
8  font-weight: 500 !important;
9  letter-spacing: 0.02em !important;
10}
11
12.badge-primary {
13  background-color: #dbeafe !important;
14  color: #1e40af !important;
15}
16
17.badge-success {
18  background-color: #dcfce7 !important;
19  color: #166534 !important;
20}
21
22.badge-warning {
23  background-color: #fef3c7 !important;
24  color: #92400e !important;
25}
26
27.badge-danger {
28  background-color: #fee2e2 !important;
29  color: #991b1b !important;
30}

Putting It All Together: A Complete Example

Here is a compact, combined stylesheet that applies a cohesive look using a modern blue brand color. Copy this entire block as a starting point and adjust the color values to match your brand.

1/* ================================================
2   GHL Dashboard - Complete Custom Styling
3   Brand Color: #2563eb (adjust to your brand)
4   ================================================ */
5
6@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
7
8:root {
9  --brand: #2563eb;
10  --brand-dark: #1d4ed8;
11  --brand-light: #dbeafe;
12  --sidebar-bg: #0c1929;
13  --header-bg: #0f172a;
14  --content-bg: #f1f5f9;
15  --card-bg: #ffffff;
16  --border: #e2e8f0;
17  --text-primary: #1e293b;
18  --text-secondary: #64748b;
19}
20
21/* Font */
22body, .page-wrapper, .left-sidebar, .topbar {
23  font-family: 'Inter', sans-serif !important;
24}
25
26/* Sidebar */
27.left-sidebar, .sidebar-nav {
28  background-color: var(--sidebar-bg) !important;
29}
30
31.left-sidebar .sidebar-nav ul li a {
32  color: #8ba3be !important;
33  border-radius: 6px !important;
34  margin: 2px 8px !important;
35}
36
37.left-sidebar .sidebar-nav ul li.active > a {
38  background-color: var(--brand) !important;
39  color: #fff !important;
40}
41
42/* Header */
43.topbar {
44  background-color: var(--header-bg) !important;
45}
46
47/* Content Area */
48.page-wrapper {
49  background-color: var(--content-bg) !important;
50}
51
52/* Cards */
53.card {
54  border: 1px solid var(--border) !important;
55  border-radius: 10px !important;
56  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
57}
58
59/* Buttons */
60.btn-primary, .btn-blue {
61  background-color: var(--brand) !important;
62  border-color: var(--brand) !important;
63}
64
65.btn-primary:hover, .btn-blue:hover {
66  background-color: var(--brand-dark) !important;
67}
68
69/* Inputs */
70.form-control:focus {
71  border-color: var(--brand) !important;
72  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
73}

Troubleshooting Common Issues

Styles not applying?

Make sure you are using !important on your declarations. GHL's built-in styles have high specificity.
Clear your browser cache or do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac).
Check that the CSS is saved in the correct field under agency settings.

Styles broke after a GHL update?

Open browser DevTools (F12) and inspect the affected element.
Look for changed class names and update your selectors.
GHL occasionally restructures its UI components, especially during major version updates.

CSS applies to places you did not intend?

Use more specific selectors. Instead of styling all .btn elements, target .quick-actions .btn to limit scope.
Use parent selectors to restrict where styles apply.

Need to find a specific element's class name?

Right-click the element in your browser and select "Inspect."
The DevTools Elements panel will highlight the HTML and show all applied classes.
Copy the class name and use it in your custom CSS.

Final Thoughts

Element-by-element dashboard styling gives you precise control over how GoHighLevel looks for your team and clients. You do not have to change everything at once. Start with the highest-visibility elements (header, sidebar, buttons) and layer in additional customizations as needed.

Keep your CSS organized with comments, store a backup copy outside of GHL, and review your styles after platform updates. With a few well-chosen customizations, your dashboard will look like a purpose-built tool for your agency rather than an off-the-shelf product.

GoHighLevel Dashboard Styling: Element-by-Element CSS Customization Guide (2026)