GoHighLevel Custom CSS and Dashboard Customization: Style It Your Way in Minutes

We may earn commissions if you buy via links on our website. Commissions don’t affect our opinions or evaluations. Learn more.

Customizing the look of GoHighLevel is key if you want it to match your brand and styling.

The downside is that GoHighLevel doesn’t offer you the greatest customization options. However, a seamless look is achievable by switching up the dashboard and adding custom CSS.

Key Takeaways:

  • Customize dashboards to display the required data in the preferred layout
  • Change fonts, colors, and other elements of GoHighLevel using custom CSS
  • Use a Chrome extension to create custom CSS easily

What Are the Advantages of Customizing GoHighLevel?

What Are the Advantages of Customizing GoHighLevel?

Each of your clients is unique, has their preferences, and wants to see the information most relevant to them.

While the standard layout of GoHighLevel works for some, it won’t suit everyone, so having the ability to customize it allows you to tailor the platform to each client. In doing this, you are providing them more value and a much better experience.

GoHighLevel works for some

Furthermore, if you sell GoHighLevel as SaaS, you don’t want to provide the same cookie-cutter layout as everyone else. Customization gives you the opportunity to put your stamp on the platform and make it your own product.

Moreover, anyone who has used GoHighLevel before can spot the platform a mile away since it looks distinctive. Therefore, if you don’t customize it before selling it as SaaS, the telltale signs that it is actually GoHighLevel will be as clear as day.

What Dashboard Customization Options Are Available?

What Dashboard Customization Options Are Available?

First, let’s look at the dashboard styling options, as this is the easiest thing to customize.

The great thing about this is that you can pick which datasets to show in relation to what your clients are doing. 

For example, if you have a client that takes and manages a lot of appointments, then showing booking statuses will be the most important thing. In contrast, someone who sells a lot of digital products will want to see their sales and pipeline data.

Widgets

Widgets

Each section on the dashboard is called a “widget” and will display a certain type of data. You can modify the data displayed, remove them, or add new ones to show precisely the data you—or your clients—need.

You will find widgets in each of these categories:

  • Contacts: Widgets include contact activity, tags, type, and name
  • Appointments: Booking counts for confirmed, canceled, no-show, and over a specific date range
  • Opportunities: Opened, won, lost, abandoned opportunities, and more
  • Calls: Incoming and outgoing calls, call duration, and first-time callers
  • Conversations: Read and unread messages and conversations, and more
  • General: The GoHighLevel dashboard comes preloaded with these datasets

You can move widgets around the dashboard in whatever order makes sense for you and change how the data is displayed. We’ll take more on that later, though.

External Objects

External Objects

This is a cool feature. To level up the dashboard, you can embed external objects such as websites, Google Docs, YouTube videos, social media post feeds, slideshows, and anything else you can think of.

For example, I uploaded the SupplyGem URL, and it displayed it in a little window. It even allowed me to fully use the website inside GoHighLevel!

This opens up lots of customization possibilities. You can add all your training material here, useful resources your clients might need, and even sales pages for any other services you offer.

How I Styled My GoHighLevel Dashboard (Step By Step)

You’ll be pleased to hear that styling your GoHighLevel dashboard is not laborious. It’s easy to use and is actually quite a fun thing to do.

How I Styled My GoHighLevel Dashboard (Step By Step)

Step 1: To get started, I headed to the sub-account of the dashboard I wanted to customize and clicked the little pencil icon in the top-right corner. This opened up the customization screen where I could make my changes.

top-right corner

Step 2: I found that the easiest—and fastest—way to change up the look of the GoHighLevel dashboard was to move the sections around into my preferred order.

To do this, I hovered my mouse at the top of each widget and then clicked to drag and drop each section in the desired spot.

I found that the easies

Step 3: If there was a widget I didn’t want displayed, I got rid of it by clicking the three dots in the top-right corner and hitting “delete.”

clicking the three dots

Step 4: My next job was to pick which extra widgets I wanted on my dashboard. I have lots of pipeline data, so this was my priority. After clicking on the “Add widget” button in the top-right, I started selecting my widgets.

Add widget

The widget menu that opens shows you the different categories of widgets and how many each category contains. To see the available widgets, click on each category to open the list.

opens shows

Step 5: Once I’d chosen my widgets, I simply clicked on them, and the system automatically added them to my dashboard.

However, that’s not all there is to it. Clicking on each widget opens up a further customization menu.

system automatically

I could change how the data was displayed by choosing my preferred chart type.

displayed by choosing

I could also overwrite the widget’s name and choose the data metric and group.

widget's name

It’s even possible to set conditions for the data, which is handy if you want to get specific about what the dashboard displays.

conditions for the data

Clicking on “Advanced settings” brings up further options such as changing the order of the data, how many fields you want displayed, and a few other things.

All these customization options vary slightly depending on which widget you have selected. I recommend playing around with the options to see what they do.

I chose to keep things simple and didn’t alter any of the widget’s settings except for the chart type.

Advanced settings

Step 6: Next, I wanted to add a couple of external objects. To do this, I clicked on the “Add widget” button, selected “Objects,” and then clicked the “Embed” option.

Here, you are essentially creating a new widget to use.

Objects

Step 7: Now, there are a couple of important options here. Under “Type,” you can select to add a URL or IFRAME embed code.

Enter a URL if you want to add a website or web page. However, for embedding stuff like videos and slideshows, you will need to grab the IFRAME embed code from whatever you’re trying to add.

website or web page

For example, I found the embed code for a YouTube video I wanted to add by clicking the “Share” button underneath the video and selecting “Embed.”

Share

Doing that revealed the embed code, so I copied it and added it into GoHighLevel.

Once I hit “Save,” the video appeared on my dashboard, and I could play it as and when I wanted.

GoHighLevel. Once I hit

Step 8: Once I was happy with my new layout, I clicked “Save changes” so I wouldn’t lose all my hard work!

Save changes

While customizing, I found a couple of things really cool.

The widgets are all different sizes, so fitting them nicely on the page was challenging until I worked out that you can change their size! 

Grab the bottom right corner of each widget and drag to adjust its size. This has its limitations, though, as they each have their own minimum size.

Grab the bottom right

Another thing I found is that you can create more than one dashboard for the same sub-account.

Click the blue icon next to where it says “Dashboard,” and click to create a new one. Users can switch between dashboards as needed. This is a fab way to organize things neatly if there’s a requirement to display many different data sets.

Dashboard

Finally, if you click the three dots found next to the edit icon, you will find the ability to: 

  • Clone your dashboard
  • Duplicate it into another sub-account
  • Manage the access permissions
  • Delete it

How and Where Can You Add Custom CSS?

How and Where Can You Add Custom CSS?

So, you have your new shiny dashboard, but everything else still looks, well, very GoHighLevelly

You can remedy this by adding custom CSS to your GoHighLevel account, which will switch up the platform’s colors, fonts, and style in pretty much any way you choose.

Want a hot pink background? It can be done!

The catch is that custom CSS is code, so if you don’t know how to code, the usual route would be to find and pay for a coder to do it for you.

Want a hot pink

I have a clever workaround for that, though. There’s a Chrome extension called “Visual CSS Editor” that you can use to edit your GoHighLevel dashboard with ease.

Visual CSS Editor

While in a GoHighLevel sub-account, open up the extension. Click on any element on the page so it highlights with a blue border. 

The extension will open up an editing menu where you can change the font, color, spacing, and a bunch of other things for the highlighted element. You can even add shadows and animations, so you can go to town with it!

sub-account

When you have finished making the page look pretty, click the green “Export” button.

Export

The CSS code for your work is revealed! Copy it, and add it to the relevant area described below.

Admin Console

Admin Console

To add custom CSS to your admin console (dashboard and menu), make sure you’re in your account’s Agency view and click on “Settings.”

Settings

Click on “Company,” then scroll down until you see the custom CSS box. Paste your code in there and click “Update company.”

Forms and Surveys

Forms and Surveys

Adding custom CSS to a form or survey is just as simple. 

Open the form or survey in the editor and click the slider icon underneath the “Save” button. A side menu will appear. Make sure the “Styles” tab is selected.

custom CSS

Scroll down the menu until you see the custom CSS box, and paste in your code. Hit “Save,” and you’re good to go!

Examples of Custom CSS

If you need some inspiration, here are a few examples of what others have done to customize the look of their GoHighLevel SaaS login pages. 

You can see there are endless possibilities and make the GoHighLevel platform fit seamlessly with your brand.

Examples of Custom CSS

To compare, here is the basic login page without any customization added.

CleanCore

Here is CleanCore’s effort. They have changed the font and color scheme, added their logo, and included a nice graphic to jazz up the page.

Nerdly

Nerdly has chosen a clean look with a black-and-white background. To add interest, the logo overlaps with the sign-in form. They have also chosen to use custom fonts.

Lead Savage

LeadSavage has gone for a striking gold and black look with a prominent logo. They haven’t changed the default color of the sign-in button, though, which may not have been the best choice.

Frequently Asked Questions

You cannot customize the GoHighLevel Agency view dashboard. Customization options only apply to sub-accounts.

You do not need to know coding to add custom CSS to GoHighLevel. You can either hire a coder to do the job for you, or use a Chrome extension called “Visual CSS Editor” to do it yourself.

Yes, you can add custom CSS to any GoHighLevel sub-account dashboard. This allows you to customize the appearance and aesthetics to fit your brand.

Reddit
Facebook
Twitter
LinkedIn
Email

About Authors

  • Janette Bonnet

    Janette Bonnet is a Senior Writer at SupplyGem. She’s been in the teaching and training field for over 10 years and has been writing about it for more than 5 years. She knows a lot about online course tools like GoHighLevel, Systeme.io, and Teachable. Thanks to her long experience and a professional training certification she earned from CIPD, she’s great at helping readers understand these platforms. When you read her articles, you’re getting advice from someone who’s actually used and knows these tools inside out. Beyond her professional endeavors, Janette has dedicated many years to volunteering, especially in animal welfare, showcasing her commitment to giving back to the community.

  • Nicole Marron

    Nicole Marron is an editor at SupplyGem. She brings over three years of editing expertise and a strong academic background to her role. Equipped with her High Level Proofreading Pro certification, Nicole has collaborated with numerous coaches, course creators, and authors to refine their messaging and amplify their impact. With her eye for detail and intuitive grasp of flow, Nicole elevates the clarity and effectiveness of the content she refines.

More from SupplyGem

Disclosure: I am an independent HighLevel Affiliate, not an employee. I receive referral payments from HighLevel. The opinions expressed here are my own and are not official statements of HighLevel.

NEW & EXCLUSIVE OFFER FOR A LIMITED TIME

Hours
Minutes
Seconds