Chat To ClientsHelp Center

How can we help?

Knowledge base › Marketing › Events

Events: Custom CSS with Live Element Selection

Check-in Experience for In Person EventsEvents 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


Customize your event pages in Chat To Clients CRM using the Custom CSS Editor with live element selection and instant previews. You can adjust colors, typography, spacing, and other design elements to match your brand.


 This guide explains how to apply custom CSS, use quick style presets, and preview your changes across event pages.

TABLE OF CONTENTS

1

What is the Custom CSS Editor?

The Custom CSS Editor allows you to customize the appearance of your public event pages directly within Chat To Clients CRM. With live element selection, you can identify CSS selectors, insert starter code, and preview styling changes without manually inspecting the page's HTML.

2

Key Features

The Custom CSS Editor makes it easier to personalize event pages and maintain consistent branding across the attendee experience.


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.
3

How to Use the Custom CSS Editor

The Custom CSS Editor lets you select page elements, apply custom styles, and preview changes before saving them.


Step 1


Navigate to Client Apps → Events and open the event you want to customize.


Select Pages & design, then click the Custom CSS icon in the left toolbar.


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
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.

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.

4

Quick 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
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.

5

Public 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.


Important Considerations

Understanding how Custom CSS is applied helps prevent unintended styling changes and makes it easier to reuse event designs.

  • Event-Specific Styling: Custom CSS applies only to the selected event's supported public pages.

  • Responsive Design: CSS affects desktop and mobile layouts. Use media queries when device-specific adjustments are needed.

  • CSS Conflicts: If a style does not apply, check selector specificity before using additional overrides.

  • Event Duplication: When duplicating an event or using Copy from another event, select Custom CSS among the available design options to retain its styling.

  • Removing Styles: Delete the custom CSS rules and save to restore the affected elements to their default appearance.

For detailed duplication instructions, see How to Duplicate and Reuse Events.

6

Copying 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.

7

Frequently 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 Chat To Clients CRM's default styles?
Your custom CSS is applied after Chat To Clients CRM'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 Chat To Clients CRM'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.
Last updated Thu, 5 Nov, 2026 at 8:40 AM