Transom Styling & Customization
All styling is configured from The Everything Calendar app inside your Commerce7 dashboard. Changes are reflected on your site within seconds — no code changes or redeployments needed. A live preview updates as you edit.
Colors
Section titled “Colors”Header
Section titled “Header”- Header Background — background color of the calendar header bar
- Header Text — color of the month/year label and navigation buttons in the header
Event types
Section titled “Event types”Each event type has its own color, shown as dots on the calendar grid and as a color accent on event cards.
| Setting | Event type |
|---|---|
| Event Ticket color | Ticketed events (e.g. Harvest Dinner, Wine Release) |
| Experience color | Recurring experiences (e.g. Wine Tasting, Cave Tour) |
| Reservation color | Customer reservations — only shown to logged-in customers |
| Club Shipment color | Club shipment dates — only shown to logged-in customers |
Calendar
Section titled “Calendar”- Background — background of the calendar grid area
- Text — color for dates, labels, and body text
Buttons
Section titled “Buttons”- Button Background / Text — default state
- Button Hover Background / Text — on hover
- Button Border — border color (only visible when Border Width > 0)
- Button Border Hover — border color on hover
Typography
Section titled “Typography”- Heading Font — applied to event titles and section headings. Enter a font name that is already loaded on your site (e.g.
Playfair Display,Cormorant Garamond). Leave blank to inherit your site’s default heading font. - Body Font — applied to descriptions, dates, and metadata. Same rules apply.
Calendar appearance
Section titled “Calendar appearance”- Border Radius — rounds the corners of the calendar container (0–20px)
- Border Width — width of the calendar border (0–4px). Set to 0 for no border.
- Border Color — color of the calendar border
Event cards
Section titled “Event cards”Layout
Section titled “Layout”- Image Left — event image on the left, details on the right (default)
- Image Top — image above the details, card stacks vertically
- Detail — larger card with full description visible
Columns
Section titled “Columns”Display events in 1, 2, or 3 columns in the list view.
Card appearance
Section titled “Card appearance”- Border Radius — rounds the corners of each event card
- Border Width — width of the card border. Set to 0 for no border.
- Border Color — color of the card border
- Horizontal Padding — left/right padding inside the card
- Vertical Padding — top/bottom padding inside the card
Buttons
Section titled “Buttons”- Style — choose from Filled, Outline, or Ghost
- Border Radius — rounds the button corners (0–20px)
- Border Width — width of the button border (used with Outline and Ghost styles)
Event categories
Section titled “Event categories”Toggle which types of events appear on the calendar. Disabling a category hides it from all views — the calendar grid, the list view, and the legend.
- Event Tickets — ticketed one-time events
- Experiences — recurring tastings and tours
- Reservations — requires customer to be logged in to your C7 storefront
- Club Shipments — requires customer to be logged in to your C7 storefront
Exclusions
Section titled “Exclusions”Add event names (or keywords) to prevent specific events from showing on the calendar. Useful for hiding internal events, sold-out events you don’t want to promote, or anything that shouldn’t appear publicly.
Enter the full event title, or a keyword that appears in it. Matching is case-insensitive.