# Events: Custom CSS with Live Element Selection > 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. - Source: https://docs.ghlcustomercare.com/docs/marketing/events/events-custom-css-with-live-element-selection - Section: Marketing / Events - Reading time: 6 min - Images: 4, each explained below - Modified on Mon, 3 Aug at 9:06 AM --- [Check-in Experience for In Person Events](https://docs.ghlcustomercare.com/docs/marketing/events/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 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. Table of Contents [1What is the Custom CSS Editor?](#section-1) [2Key Features](#section-2) [3How to Use the Custom CSS Editor](#section-3) [4Quick Style Presets](#section-4) [5Public Page Coverage](#section-5) [6Copying and Duplicating Events with Custom CSS](#section-6) [7Frequently Asked Questions](#section-faq) ## 1What is the Custom CSS Editor? 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. ![Custom CSS editor interface showing the CSS input panel and live preview](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155077493692/original/hnbhq8L5mEW68nH1lsAnsHubDxROresqqw.png) **How to Use the Custom CSS Editor (image 1 of 4)** 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…. - Controls: Live CSS Editor, Click-to-Select Elements, Quick Style Presets, Complete Public Page Coverage, Copy & Duplicate Support, Pages & Design → Custom CSS, Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout Step 2 Select an Element 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. ![Click-to-select interface showing an element's CSS selector with copy and insert options](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155077493862/original/T7IiPd7lu0ABME81PjZ1yh7KpvzAZJ-d1A.gif) **How to Use the Custom CSS Editor (image 2 of 4)** 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…. - Controls: Live CSS Editor, Click-to-Select Elements, Quick Style Presets, Complete Public Page Coverage, Copy & Duplicate Support, Pages & Design → Custom CSS, Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout Step 3 Write or Insert CSS 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)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155077494146/original/YoTBZk4UMKPJn_R1SUWm1ZegAs2I45FKZw.png) **How to Use the Custom CSS Editor (image 3 of 4)** 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…. - Controls: Live CSS Editor, Click-to-Select Elements, Quick Style Presets, Complete Public Page Coverage, Copy & Duplicate Support, Pages & Design → Custom CSS, Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout Step 4 Preview and Save 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 menu showing options like border, background, text color, and typography](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155077494267/original/xH10J7a4tgfF0etYaGqBrsqjxg3wjLxpdg.png) **Quick Style Presets (image 4 of 4)** 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…. - Controls: Live CSS Editor, Click-to-Select Elements, Quick Style Presets, Complete Public Page Coverage, Copy & Duplicate Support, Pages & Design → Custom CSS, Details, Schedule, Checkout, Payment, Confirmation, Leave Checkout Pro Tip 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. [](#) [](#)[How to Create and Manage Events in GHL Customer Care\[Private Beta\]](https://docs.ghlcustomercare.com/docs/marketing/events/how-to-create-and-manage-events-in-ghl-customer-care) [ Events: Customizing Event Details Page ](#)[](#)[](#) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com