If you want to know how to customize the GoHighLevel dashboard with CSS, the good news is that GHL gives you a real injection point for custom styles—and a few hundred lines of well-written CSS can transform the stock purple dashboard into something that looks like your own product. This guide covers where the CSS goes, how to find and target elements safely, working examples you can adapt, and the defensive habits that keep your styling alive when GoHighLevel ships updates.
Where to add custom CSS in GoHighLevel
Agency-level CSS lives in Agency Settings → Company → Custom CSS (on white-label-enabled plans). Styles added here apply across the whole platform for every sub-account, which makes it the right place for your brand theme.
There are two other injection points worth knowing. Sub-account level custom code (via custom values or the sub-account settings, depending on plan) lets you style one client differently. And funnel/website pages have their own per-page CSS in the builder's settings, which is separate from the dashboard entirely—dashboard CSS never touches your funnels, and vice versa.
Finding what to target: DevTools first
Before writing a single rule, open the dashboard in Chrome, right-click the element you want to change, and choose Inspect. You're looking for two things: a stable-looking class name or attribute you can select, and the existing rule you need to override.
GoHighLevel's interface is a Vue single-page app, and some class names are auto-generated and change between deployments. Prefer selectors anchored to IDs, semantic attributes, or stable structural classes (like sidebar and header containers) over long chains of utility classes. If a class looks like random characters, don't build on it.
A working example: rebrand the sidebar
Here's the pattern I use for a branded sidebar—the highest-impact change you can make, since it's visible on every screen. Define your brand palette once as CSS variables, then apply it:
:root { --brand-dark: #1a2b3c; --brand-accent: #e8734a; --brand-text: #f5f2ea; }
#sidebar-v2, .sidebar-v2-location { background: var(--brand-dark) !important; } #sidebar-v2 .hl_nav-header a, .sidebar-v2-location a { color: var(--brand-text) !important; } #sidebar-v2 a.active, .sidebar-v2-location a.active { background: var(--brand-accent) !important; }
Two things to note. First, the variables: change --brand-accent once and every rule using it updates—this is what makes a theme maintainable. Second, yes, !important: in injected CSS competing with a compiled app's styles, it's usually necessary. Use it deliberately on your theme layer, not scattered randomly.
More quick wins with copy-adaptable patterns
Once the sidebar carries your brand, these patterns cover the next most-visible surfaces. Selectors current as of this writing—always verify in DevTools first:
- Buttons: target the primary button classes and swap GoHighLevel's blue for your accent color, with a matching hover state—instant brand consistency across every form and modal.
- Login page: the login screen accepts agency CSS too; a background image, centered card, and your logo turn it into a real branded entry point.
- Top bar: restyle the header background and icon colors to match the sidebar so the frame of the app reads as one design.
- Hide elements: display:none on menu items or promo banners you don't want clients seeing—though for per-client hiding, JavaScript gives you more control.
- Fonts: inject a font-family override to replace the stock font—load your webfont via custom JS or use a widely available system font.
Writing CSS that survives GoHighLevel updates
GoHighLevel ships interface updates continuously, and careless CSS breaks silently. Three habits prevent most of it. First, prefer stable anchors: IDs and long-lived structural classes over auto-generated ones. Second, keep every rule scoped to the specific component you're styling—broad selectors like div or .container will style things you never intended, including future UI. Third, keep your CSS in version control outside GHL, commented, so when something does break you can diff and fix in minutes instead of re-reverse-engineering your own work.
Even with good habits, budget for occasional maintenance: a platform update every few months will move something. The difference between engineered CSS and pasted snippets is whether that's a five-minute fix or a broken dashboard nobody knows how to repair.
When CSS isn't enough
CSS can restyle what exists, but it can't add menu items, reorder navigation, change text labels, or build new widgets—that's JavaScript territory, and GoHighLevel's SPA architecture makes naive scripts fail in ways that are hard to debug. If your dashboard customization goals include structural changes, or you'd rather not maintain a theme yourself, that's exactly what I do: engineered dashboard customization and custom CSS as a service, documented and update-safe. And if you're building toward a full rebrand, this pairs with theme customization across the whole platform.
Frequently asked questions
Does custom CSS require the white-label plan?
Agency-wide custom CSS is a white-label-plan feature. On lower plans you can still style funnels and websites per page, but not the dashboard interface.
Can custom CSS break my GoHighLevel account?
CSS can't break functionality or data—worst case, styling looks wrong and you remove the offending rule. The real risk is sloppy broad selectors making the UI confusing, which is why scoping matters.
Will my CSS apply to my clients' sub-accounts?
Yes—agency-level custom CSS applies platform-wide to all sub-accounts, which is exactly what you want for consistent white-label branding.