Event Cards — Help

Beautiful event cards with five layout themes, granular visibility toggles, design presets, custom field slots, and code overrides.

🖼️

Screenshot coming soon

A live preview of the Event Cards widget will appear here.

What it does

Event Cards replaces the default look of your event search results with a flexible, configurable card design. Pick one of five built-in themes modeled after familiar industry leaders, then tune visibility, design, custom data, and custom code to fit your brand exactly.

The widget changes only the visual design and information shown — search logic, filters, pagination, and the grid/list toggle all keep working.

How it works

When visitors search for events on your directory, BD renders each result as a "card." This widget swaps the default card with a richly configurable card that supports:

5 visual themes (Eventbrite / Airbnb / GroupOn / Yelp / eBay)
12 visibility toggles so you show only the data fields that matter
5 design presets so colors match your brand
Custom field slots that map your post type's custom fields into the card
Custom CSS / JS / HTML override code that persists across widget updates

The five themes

Theme	Visual feel	Best for
Eventbrite	Clean list cards with prominent date badges	Professional, business-conference, formal events directories
Airbnb	Image-forward cards with overlay text	Visual-first event types: festivals, retreats, concerts, weddings
GroupOn	Deal-focused layout with discount emphasis	Promotional events, ticket sales, time-limited offers
Yelp	Rating and review-focused cards	Recurring events with attendee feedback (classes, workshops, meetups)
eBay	Marketplace-style grid cards	Browse-heavy directories with many simultaneous events

Each theme is fully responsive and works with both grid view and list view if your directory has the grid/list toggle.

Settings tab

Configure via Plugins → DirectoryCustomize → My Widgets → Event Cards → Configure → Settings.

Visibility toggles (12 fields)

Show or hide each card element independently:

Setting	Default	What it controls
Show Date	On	Date badge overlay on the event image
Show Category	On	Category pill on the event image
Show Recurring	On	"Recurring" badge next to title for events that repeat
Show Time	On	Start and end time row
Show Location	On	Venue name and address
Show Price	On	Ticket price for paid events
Show Description	On	Event description excerpt
Show Tags	On	Keyword tags at the bottom of the card
Show Author	On	Event organizer / author section
Show Calendar Button	On	"Add to Calendar" dropdown button
Show Free Badge	On	"Free" badge (data-driven; auto-shown for free events)
Show Buttons	On	View Event + Details buttons

Button labels and icons (5 fields)

Setting	Default	What it controls
Button 1 Label	View Event	Text on the primary action button
Button 1 Icon	`fa-external-link`	FontAwesome icon class for the primary button
Button 2 Label	Link	Text on the secondary details button
Button 2 Icon	`fa-external-link`	FontAwesome icon class for the secondary button
Calendar Button Icon	`fa-calendar-plus-o`	FontAwesome icon class for the Add to Calendar button

Save changes apply immediately — no rebuild needed.

Design tab

Configure via Plugins → DirectoryCustomize → My Widgets → Event Cards → Configure → Design.

Option	Values	What it controls
Design Preset	shoreline · bootstrap · system · bright · custom	Color theme applied to badges, buttons, accents. Each preset has its own primary, accent, and surface colors that work together.
Design Tint	-30 to +30	Lightness offset applied on top of the preset — shifts the entire palette lighter (negative) or darker (positive) without breaking the preset's harmony

The default preset is shoreline (teal/green tones). Try each preset in your DirectoryCustomize plugin's live preview before saving — they cover most directory aesthetics.

If none of the presets fit, pick custom and override individual colors via the Custom CSS field (see "Custom code overrides" below).

Custom field slots

Event Cards lets you map any custom field on your event post type into one of five card zones without editing the template HTML:

Zone	Where it appears
meta	Below the price row (good for capacity, dress code, age range, etc.)
body	Below the description (good for sponsor mentions, parking notes, accessibility info)
tags	Inline with keyword tags (good for skill level, difficulty, format)
author	Inline with the organizer section (good for "Hosted by" alternates)
promo	Image overlay (good for flash deals, urgency badges)

Configure via the Custom Fields section of the Settings tab. Each entry maps:

Field name — the database/form name of your custom field
Slot — which zone (meta / body / tags / author / promo)
Label — optional display label (leave blank to hide)
Icon — optional FontAwesome class (e.g. fa-users, leave blank for no icon)

Empty field values are auto-skipped — no empty rows appear if a particular event doesn't have that custom field filled in.

Example:

capacity    → meta   → Capacity   → fa-users
dress_code  → tags   → (no label) → fa-star
organizer   → author → Hosted by  → (no icon)
sponsor     → body   → Sponsored by → fa-heart
flash_deal  → promo  → (no label) → fa-bolt

Custom code overrides

Three override fields let you customize behavior beyond what the Settings and Design tabs expose. Code in these fields persists across widget updates — when DirectoryCustomize ships a new Event Cards version, your custom code stays put.

Field	Purpose	Example use
Custom CSS	Add CSS rules that override or extend the theme's styles	Change the date-badge color on Friday events; hide a specific element on mobile; restyle the Add to Calendar button
Custom JS	Add JavaScript that runs after the cards render	Track card-click conversions; auto-scroll to a specific event; integrate with a third-party calendar/booking widget
Custom HTML	Add HTML or PHP to render before the card content	Inject a banner, a sponsor logo, an A/B test snippet, or a pixel for analytics

Configure via Plugins → DirectoryCustomize → My Widgets → Event Cards → Configure → Custom Code.

These fields are saved per-site and survive any future widget update — so you don't lose your customization when we ship a new version. Recommended for advanced customization that isn't covered by the standard settings.

Add to Calendar button (optional)

Each theme can include an Add to Calendar button on every event card. The button generates a standard .ics calendar file that opens in the visitor's preferred calendar — Google Calendar, Apple Calendar, Outlook, or any standard calendar app — with the date, time, location, and description pre-filled.

This dramatically increases attendance because visitors who would have forgotten about an event get a calendar reminder automatically. Recommended for any directory where attendance matters.

Toggle via the Show Calendar Button setting in the Settings tab.

Choosing a theme

A few questions to help pick:

What do visitors care about most? If it's the date → Eventbrite. The atmosphere or venue → Airbnb. The price → GroupOn. The reviews → Yelp. Browsing many at once → eBay.
What does your homepage look like? Match your event cards to the rest of your site's visual register so they don't feel like a different platform bolted on.
Do you offer ticket sales? GroupOn shines if pricing or discounts are core. Other themes work with or without sale info.
Are events one-off or recurring? Yelp's review-card style is built for recurring events with accumulated feedback; if every event is one-off, pick Eventbrite or Airbnb instead.

You can switch themes any time without affecting your event data.

Common questions

Can I switch between themes after installing one?

Yes. Switching is just a template change in your BD admin — no data migration, no broken links, no SEO impact. Your event listings stay the same; only the card visuals change.

Will my existing search filters and pagination still work?

Yes. The themes only change how each individual card is styled — they don't touch the search logic, filters, sort options, pagination, or the grid/list toggle.

Does my Custom CSS / JS / HTML survive when the widget is updated?

Yes. The three override fields (Custom CSS, Custom JS, Custom HTML) are stored separately from the widget's core code. When DirectoryCustomize pushes a new widget version, your overrides stay in place.

What's the difference between "Design Preset" and "Custom CSS"?

Design Preset is a one-click color theme that changes badges, buttons, and accents in a coordinated way. Custom CSS is for fine-grained overrides — e.g. "make the date badge red on weekends" or "hide tags on mobile only." Use the preset first; reach for Custom CSS only when the preset can't get you there.

How do I add a custom field to the card without editing the template?

Use the Custom Field Slots feature in the Settings tab. Add a row mapping your custom field name to one of the 5 zones (meta / body / tags / author / promo) with an optional label and icon. The widget renders the field automatically, with empty values auto-skipped.

Does the Add to Calendar button work on iOS and Android?

Yes. The button generates a standard .ics calendar file that opens in the visitor's default calendar app — Google Calendar, Apple Calendar, Outlook, or any other calendar that handles standard calendar invites. Works on every modern browser, mobile and desktop.

Are the themes mobile-friendly?

Yes. All five themes are responsive and tested on phones and tablets. Cards stack into a single column on small screens with appropriate touch targets.

Can I use Event Cards alongside other Customize widgets?

Yes. Event Cards changes the look of event search results only — it doesn't conflict with widgets that target other surfaces (member profiles, headers, footers, etc.).

Where it lives

In your DirectoryCustomize plugin admin: Plugins → DirectoryCustomize → My Widgets → Event Cards.

Three configuration tabs:

Settings — visibility toggles, button labels, custom field slots
Design — preset + tint
Custom Code — CSS / JS / HTML overrides

Save changes apply immediately — no rebuild or republish needed.

Need more help?

If you've installed Event Cards and something isn't rendering correctly, contact support with:

Your directory URL
Which theme you installed (Eventbrite / Airbnb / GroupOn / Yelp / eBay)
A screenshot of how the cards are currently rendering
Whether you're seeing the issue in grid view, list view, or both
A copy of any Custom CSS / JS / HTML you've added (so we can rule it in or out)

We'll help you sort it out — most theme display issues are 5-minute fixes.

Contact support