Toolkit›Customize›Widgets

DirectoryCustomize — Event Cards — Help

Beautiful event cards with 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. Tune visibility, design, custom data, and custom code so each card matches 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:

  • 12 visibility toggles so you show only the data fields that matter
  • 4 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
  • Optional Add to Calendar button

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 rainbow · system · bootstrap · custom Color theme applied to badges, buttons, and accents. Each preset has a coordinated set of colors that work together
Design Tint -30 to +30 Lightness offset applied on top of the preset — shifts lighter (negative) or darker (positive) without breaking the preset's harmony

Preset guide:

  • rainbow — pulls from the DirectoryToolkit brand color matrix; vibrant accents that tie all your Customize widgets together visually across the site
  • system — neutral grayscale, works on any directory regardless of accent color
  • bootstrap — uses your BD theme's existing button + badge styles for seamless blending with the rest of your site
  • custom — pick "custom" when none of the presets fit and you want to override individual colors via the Custom CSS field

If none of the presets is exactly right, start with the closest one and use Design Tint to nudge lighter or darker before reaching for custom CSS.

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)
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 preset'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 an analytics pixel

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)

Event Cards 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.

Common questions

Will my existing search filters and pagination still work?
Yes. Event Cards only changes how each individual card is styled — it doesn'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 the design presets?
rainbow pulls from the DirectoryToolkit brand color matrix for a cohesive look across all your Customize widgets. system is neutral grayscale that works anywhere. bootstrap uses your BD theme's existing styles for seamless blending. custom means "I'll handle styling via Custom CSS." Try presets first; only reach for custom when none fit.

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 cards mobile-friendly?
Yes. The card layout is 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
  • Your Design Preset (rainbow / system / bootstrap / custom)
  • 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 issues are 5-minute fixes.

Contact support