Style your GHL Customer Care event pages instantly with the new live Custom CSS editor. Click elements to get selectors, use quick presets, and preview changes in real time.
6 min read1,437 words4 explained imagesUpdated Mon, 3 Aug at 9:06 AM
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
Style your event pages with a live CSS editor, click-to-select elements, quick style presets, and instant preview—no DOM inspection required.
What You'll Learn
GHL Customer Care's Events Custom CSS editor eliminates the need to manually inspect the DOM. You can now style all your public event pages directly from Pages & Design with live element selection, starter CSS snippets, and real-time preview.
This article explains how to use the live Custom CSS editor, select elements by clicking them, apply quick style presets, and preview your design changes instantly.
The Custom CSS editor is a live styling tool built into GHL Customer Care's Events management area. It allows you to write and apply custom CSS rules to your public event pages without leaving the Pages & Design interface.
Previously, customizing event page styles required manually inspecting the page's HTML structure in the browser to identify CSS selectors. The new editor eliminates this step by providing click-to-select functionality, instant preview, and pre-configured starter snippets for common styling needs.
All CSS you add in the editor applies globally across your public event pages, including Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout, and Online Event pages.
2Key Features
The Custom CSS editor includes several features designed to simplify event page styling and speed up your workflow.
Live CSS Editor — Add custom CSS that applies across all public event pages with instant preview of your changes.
Click-to-Select Elements — Click any element in the page preview to identify its CSS selector. Copy the selector or insert a starter CSS rule with one click.
Quick Style Presets — Generate starter CSS for commonly customized properties like borders, backgrounds, text color, button color, border radius, spacing, shadow, and typography.
Complete Public Page Coverage — Custom CSS applies to all public event page types, including Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout, and Online Event pages.
Copy & Duplicate Support — Custom CSS is automatically retained when duplicating an event or copying settings from another event.
3How to Use the Custom CSS Editor
Follow these steps to access the Custom CSS editor and start styling your event pages. The editor provides both manual CSS editing and click-to-select functionality to identify page elements.
Step 1
Open the Custom CSS Editor
Navigate to your event in GHL Customer Care, then go to Pages & Design → Custom CSS. The editor opens with a live preview of your event page on the right and a CSS input panel on the left.
How to Use the Custom CSS Editor (image 1 of 4)What this shows Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a…What this showsIllustrates the "How to Use the Custom CSS Editor" section of "Events: Custom CSS with Live Element Selection".This screenshot appears in the "How to Use the Custom CSS Editor" section of "Events: Custom CSS with Live Element Selection". For context, this section explains: Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a live CSS editor, click-to-select elements, quick style presets, and instant preview—no DOM inspection required. What You'll Learn GHL Customer Care's Events Custom….Image 1 of 4
Click any element in the page preview to identify its CSS selector. The selector appears in a popup with options to copy it or insert a starter CSS rule into the editor.
How to Use the Custom CSS Editor (image 2 of 4)What this shows Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a…What this showsIllustrates the "How to Use the Custom CSS Editor" section of "Events: Custom CSS with Live Element Selection".This animation appears in the "How to Use the Custom CSS Editor" section of "Events: Custom CSS with Live Element Selection". For context, this section explains: Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a live CSS editor, click-to-select elements, quick style presets, and instant preview—no DOM inspection required. What You'll Learn GHL Customer Care's Events Custom….Image 2 of 4
Add your custom CSS rules in the editor. You can write CSS manually or use the quick style presets (see next section) to generate starter code for common styling properties. Changes appear instantly in the preview pane.
How to Use the Custom CSS Editor (image 3 of 4)What this shows Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a…What this showsIllustrates the "How to Use the Custom CSS Editor" section of "Events: Custom CSS with Live Element Selection".This screenshot appears in the "How to Use the Custom CSS Editor" section of "Events: Custom CSS with Live Element Selection". For context, this section explains: Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a live CSS editor, click-to-select elements, quick style presets, and instant preview—no DOM inspection required. What You'll Learn GHL Customer Care's Events Custom….Image 3 of 4
Review your changes in real time using the preview pane. Once satisfied, save your custom CSS. The styles will apply to all public event pages automatically.
Tip
Use the click-to-select feature to quickly identify complex nested elements without inspecting the DOM manually.
4Quick Style Presets
Quick style presets allow you to generate starter CSS code for commonly customized properties without writing CSS from scratch. After selecting an element, choose a preset to insert pre-configured CSS rules into the editor.
The following presets are available:
Preset 1
Border
Inserts CSS rules to customize border width, style, and color for the selected element.
Preset 2
Background
Generates CSS to change the background color or image of the selected element.
Preset 3
Text Color
Inserts a CSS rule to modify the text color of the selected element.
Preset 4
Button Color
Generates CSS to change the background and text color of buttons.
Preset 5
Border Radius
Inserts CSS to adjust the corner rounding of the selected element.
Preset 6
Spacing
Generates CSS rules to modify padding and margin of the selected element.
Preset 7
Shadow
Inserts a CSS rule to add or modify box shadow effects on the selected element.
Preset 8
Typography
Generates CSS to change font family, size, weight, and line height of the selected text element.
Quick Style Presets (image 4 of 4)What this shows Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a…What this showsIllustrates the "Quick Style Presets" section of "Events: Custom CSS with Live Element Selection".This screenshot appears in the "Quick Style Presets" section of "Events: Custom CSS with Live Element Selection". For context, this section explains: Check-in Experience for In Person Events Events Management Events: Custom CSS with Live Element Selection Style your event pages with a live CSS editor, click-to-select elements, quick style presets, and instant preview—no DOM inspection required. What You'll Learn GHL Customer Care's Events Custom….Image 4 of 4
After inserting a preset, customize the generated CSS values to match your brand guidelines. The starter code provides a working foundation you can refine.
5Public Page Coverage
Custom CSS applies globally to all public-facing event pages. This ensures consistent branding and styling across your event participant experience.
The following event page types support Custom CSS:
Details — The event details page where participants view event information.
Schedule — The page displaying event schedule and session timings.
Checkout — The checkout page where participants register or purchase tickets.
Payment — The payment processing page for paid events.
Confirmation — The confirmation page displayed after successful registration or purchase.
Leave Checkout — The page shown when a participant exits the checkout flow.
Online Event — The page participants access for virtual/online events.
6Copying and Duplicating Events with Custom CSS
When you duplicate an event or copy settings from another event, custom CSS is automatically retained. This allows you to quickly replicate your styling across multiple events without re-entering CSS code.
Use these workflows to preserve custom CSS:
Option 1
Duplicate an Event
When you duplicate an event, all custom CSS from the original event is copied to the new event. The duplicated event will have identical styling out of the box.
Option 2
Copy Settings from Another Event
When you copy settings from one event to another, custom CSS is included in the copied settings. This allows you to apply an existing event's design to a new or different event.
Tip
After duplicating or copying settings, you can modify the custom CSS in the new event without affecting the original event's styles.
7Frequently Asked Questions
Q: Does custom CSS apply to all events in my account?
No. Custom CSS is event-specific. Each event has its own custom CSS settings. To apply the same CSS to multiple events, use the duplicate or copy settings features.
Q: Can I preview my changes before saving?
Yes. The Custom CSS editor includes a live preview pane that updates instantly as you write CSS. This allows you to see the effect of your changes before saving them.
Q: Do I need to know CSS to use this feature?
Basic CSS knowledge is helpful, but not required. The quick style presets generate starter CSS for you. You can also click elements to identify selectors and use the presets to customize common properties without writing CSS from scratch.
Q: What happens if my custom CSS conflicts with GHL Customer Care's default styles?
Your custom CSS is applied after GHL Customer Care's default styles. In most cases, your custom rules will override the defaults. If a style does not apply as expected, use more specific CSS selectors or add !important flags to increase rule priority.
Q: Can I remove or reset custom CSS after applying it?
Yes. Delete the CSS code in the editor and save your changes to remove all custom styles. The event pages will revert to GHL Customer Care's default styling.
Q: Do quick style presets work for all elements?
Quick style presets generate CSS based on the selected element. Some presets (like Typography) apply best to text elements, while others (like Border or Background) work on most container elements. You can always edit the generated CSS to suit your specific needs.
Q: Will custom CSS affect event pages on mobile devices?
Yes. Custom CSS applies to all screen sizes. If you want to create mobile-specific styles, use CSS media queries (e.g., @media (max-width: 768px)) in your custom CSS to target smaller screens.
Q: Can I share custom CSS between events without duplicating the entire event?
Currently, custom CSS is retained when using the duplicate event or copy settings features. For manual sharing, copy the CSS code from one event's Custom CSS editor and paste it into another event's Custom CSS editor.
Related Articles
Explore these articles to learn more about customizing your Events experience in GHL Customer Care.
