Widget CSS selector reference

Use this reference to target specific elements in the Eventually widget with custom CSS. Enter your styles under Advanced in the calendar editor so they apply to every embedded instance automatically, or under Advanced on the Global Styles page to style every calendar. For step-by-step instructions on opening the calendar editor and using the Advanced section, see Set up your calendar widget.

What custom CSS supports

Custom CSS is kept by an allowlist. Every selector must be rooted in the .ev- classes of the widget, such as the hooks in this reference. Rules that target the page root, such as html, body, :root, or a bare *, are omitted, and a selector list that mixes widget and non-widget selectors drops the whole rule. The supported at-rules are @media, @supports, @keyframes, and @font-face; @import is not supported.

Content the allowlist does not keep is omitted from the rendered CSS. When anything is dropped, a trailing comment in the rendered output names the removed rules and confirms your saved CSS is unchanged.

Widget shell selectors

These root modifiers switch whole-widget treatments on and off. Each one is present only when the matching setting applies.

Background and Blocks colors

Background colors set the widget's overall surface, and Blocks colors set the ground your event blocks sit on, one level in front of the Background. Blocks stays unset until you name a Blocks color; until then, cards keep reading the Background surface tokens.

When a Blocks color is set, the widget root carries the .ev-blocks class and you can style Blocks text and grounds with these tokens:

Cards also have their own ground token, --ev-card-surface; when it is not set, cards fall back to the Background surface token. Three surfaces stay outside the Blocks scope: the tinted registration panel, the mobile list row, and the category fallback behind card images.

Registration panel selectors

These selectors target the registration panel that appears when a visitor selects an event. They apply to inline panels, the mobile takeover, and the mobile sheet.

Style the event date separately from the location

The .ev-single-meta-date selector is the hook for the event date in the registration panel head. The panel head renders the same markup in every registration header variant, including the mobile takeover and the mobile sheet. Use it when you want to style the date without affecting the location line, which carries .ev-event-location.

.ev-single-meta-date {
  color: #c0392b;
  font-weight: 600;
}

Sale pricing selectors

When a ticket tier has an original price higher than its current price, the widget shows the original amount struck through beside the sale price. These selectors target that sale display on event cards and in the registration panel.

The same nested original and current price classes also appear inside .ev-ticket-price rows in the registration panel. Non-sale tiers keep a single price without the on-sale wrapper or struck-through original. For how hosts set Original price, see Creating ticket tiers and pricing.

Price label selectors

When a team sets a price label on Event Defaults, events with multiple currently purchasable prices show that label before the lowest applicable price. These selectors style the visible label; they do not change which price the widget shows.

Long labels stay on one line and truncate with an ellipsis.

Free price selectors

Free-price labels in the reserve flow carry an is-free modifier so you can hide or restyle them without touching paid prices. .ev-ticket-price.is-free targets a $0 ticket tier's price, .ev-order-line-total.is-free targets a $0 line item in the order summary, and .ev-order-total.is-free targets the $0 order total. Together they cover the ticket row, order summary line, and order total, so the label stays hidden through the whole flow. Paid prices keep their existing selectors and never receive the modifier. For on-sale free tiers, the current price is separately wrapped in .ev-price-current so it can be styled independently of the compare-at price.

.ev-ticket-price.is-free {
  display: none;
}

Event Series price and offer selectors

On a session of an event series that also sells a series ticket, the single event embed shows a suffix after the session's price and a bordered panel under it that offers the series ticket. The offer panel is drawn only while series tickets still sell.

Card view status selectors

On card view, the category pill can switch to a status chip, and sold-out status can move onto the card image. These selectors target that card-only presentation. The single event embed shows only its first category, described in Single event embed category selectors below.

Category and status pill

Card footers (grid cards and sidebar cards) use one pill element with the class .ev-category-pill. The pill shows one of these labels, in this order:

1. JOIN THE WAITLIST: the event is sold out and the waitlist is open

2. SALE: the displayed default ticket tier is marked down (original price higher than current price)

3. The category name, when neither status applies

The element and .ev-category-pill class stay the same in every state, so existing custom CSS for the pill still applies. Status states add a modifier class and display the label in uppercase.

/* Emphasize sale status chips on cards */
.ev-category-pill.is-sale {
  letter-spacing: 0.08em;
}

/* Soften waitlist chips */
.ev-category-pill.is-waitlist {
  opacity: 0.9;
}

Sold-out image badge on grid cards

On grid cards that have an image surface (event image, category fallback image, category icon, or category color), Sold out appears as a top-right overlay on the image instead of in the card footer. The footer availability indicator is hidden in that case so the badge is not shown twice. Imageless cards keep the sold-out treatment in the footer.

/* Move or restyle the sold-out overlay on grid cards */
.ev-image-badge {
  top: 12px;
  right: 12px;
}

For the struck-through sale price next to the current price, see the sale pricing selectors above. For how hosts set Original price, see Creating ticket tiers and pricing.

Category pills and availability badges

Category chips and availability badges share one styling vocabulary of five choices: shape, size, lettering, fill, and outline. Each choice adds a modifier class to the widget root, and the modifiers apply wherever the pill or badge renders.

Three things to know before you override these classes:

• Every rule is a compound selector on the widget root, such as .ev-widget.ev-catchip--fill-solid .ev-category-pill, so it outranks a single-class override like .ev-category-pill.

• The solid, tinted, and outline fills drop the pill's leading dot.

• A sold-out badge keeps its own colors whatever fill is picked; restyle it through --ev-badge-sold-out-bg and --ev-badge-sold-out-color.

Category chip and badge slots on card images

When a category chip or availability badge sits on a card image, it takes one of these slots.

Single event embed category selectors

The single event embed shows only the event's first category above the event title. The hosted event page renders that same embed, so it shows the first category too. The first category is the one that comes first in the order the categories are attached to the event. Other views keep every category: the calendar's event modal, the detail view the single embed opens, and every other embed shape such as cards and lists.

An event series still shows its series badge, together with its first category.

The chips after the first stay in the rendered widget with the class .ev-single-pill--extra. The widget's built-in styling hides them at every width with .ev-single .ev-single-pill--extra { display: none; }, so custom CSS can show them again without !important:

/* Show every category chip again in the single event embed */
.ev-single .ev-single-pill--extra {
  display: inline-flex;
}

Calendar view selectors

These selectors target the month grid and calendar-day elements.

Hide calendar background images

To remove the featured-event background images that fill day cells in the month grid:

.ev-day-image {
  background-image: none !important;
}

Extension overlay selectors

The Squarespace extension modal shows your calendar in its own overlay, where the calendar is the whole screen. The html.ev-es-overlay treatment is part of the built-in widget styling: custom CSS rules that target the overlay document root, such as html.ev-es-overlay .ev-widget, are omitted from the rendered CSS.

Custom CSS still styles the overlay calendar through the regular widget selectors in this reference.

Pagination selectors

These selectors target the widget's paging controls.

Event tag and category selectors

These CSS hooks appear on event rows across the widget so you can style events by their category or tags. They apply to single-event wrappers, takeover views, day-panel event rows, and other event chips in calendar and list views.

Style events by tag or category

To highlight every event tagged "Workshop" with a different background color:

.ev-tag-workshop {
  background-color: #f1c40f;
}

To change the border color for events in the "Fundraiser" category:

.ev-category-fundraiser {
  border-color: #e74c3c;
}

Control style modifiers

These modifiers restyle the widget's controls: the search input, the control buttons, and the view toggle.

Preview-only selectors

These hooks appear only on the admin preview canvas in the widget builder. A live embed matches none of them, so styles aimed at these selectors never reach your site.

Registration question selectors

These selectors target the custom registration question controls on public widget registration forms.