Widget CSS selector reference

Use this reference to target specific elements in the Eventually widget with custom CSS. Enter your styles in the Advanced tab of the widget builder so they apply to every embedded instance automatically. For step-by-step instructions on opening the widget builder and using the Advanced tab, see Set up your calendar widget.

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-registration-date selector is the dedicated hook for the event date. It is available in every registration header variant, including the mobile takeover and mobile sheet. Use it when you want to style the date or date·time line without affecting the location line.

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

When you apply this override, the date/time line restyles while the location line above it is untouched.

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.

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;
}

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. Single-event view is unchanged.

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.

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;
}

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;
}

Registration question selectors

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