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.
Scotify Solutions' 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.
1What is the Custom CSS Editor?
The Custom CSS editor is a live styling tool built into Scotify Solutions' 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.
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 Scotify Solutions, 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.
- 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.
- 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 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.
Pro 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.
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.
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.
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.
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.
7Frequently Asked Questions
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.
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.
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.
What happens if my custom CSS conflicts with Scotify Solutions' default styles?
Your custom CSS is applied after Scotify Solutions' 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.
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 default styling.
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.
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.
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.