CSS Class Reference

All public-facing CSS classes used by PB Gig Diary — target these in your theme stylesheet to customise the appearance of your gig listings.

How to add custom CSS

Add your custom CSS to your theme’s stylesheet or via Appearance → Customise → Additional CSS in WordPress. All PB Gig Diary classes are prefixed with gd- so they won’t conflict with your theme.

Style editor available Pro licences and above include a built-in style editor under Gig Diary → Settings → Style — covering the most common customisations without writing CSS. The classes below are for more advanced control.

Gig listing — outer structure

Class	Element	Notes
`gd-shows-wrap`	div	Outermost wrapper for the entire gig listing shortcode output
`gd-shows-section`	div	Wrapper for each section (upcoming or past)
`gd-past-shows`	div	Additional class on the past gigs section
`gd-section-heading`	h2	Section heading — “Upcoming Shows” / “Past Shows”
`gd-gig-table`	table	The gigs table
`gd-past-table`	table	Additional ID on the past gigs table (used by Load more)

Gig listing — individual rows

Class	Element	Notes
`gd-gig-row`	tr	Each gig row
`gd-status-confirmed`	tr	Added to row when gig is confirmed
`gd-status-provisional`	tr	Added to row when gig is provisional
`gd-status-cancelled`	tr	Added to row when gig is cancelled
`gd-col-date`	td	Date column cell
`gd-col-date-inner`	div	Inner wrapper for date content
`gd-col-venue-addr`	td	Venue and address column cell

Gig listing — date elements

Class	Element	Notes
`gd-date-day`	span	The date — e.g. “Sat 14 Jun 2026”
`gd-date-time`	span	The time — e.g. “20:00”
`gd-tag`	span	Base class for status badges
`gd-provisional`	span	Provisional badge
`gd-cancelled`	span	Cancelled badge

Gig listing — venue elements

Class	Element	Notes
`gd-venue-name`	div	Venue name — links to venue website if set
`gd-venue-addr`	div	Address line and map link
`gd-map-link`	a	The “Map” link — opens Google Maps
`gd-gig-extras`	div	Age restriction, admission, phone, and public notes
`gd-setlist-link`	a	“View setlist →” link

Load more

Class	Element	Notes
`gd-load-more-wrap`	div	Wrapper around the Load more button
`gd-load-more-btn`	button	The “More ↓” button
`gd-load-more-spinner`	span	“Loading…” text shown while fetching

Feeds

Class	Element	Notes
`gd-feeds`	p	The RSS / iCal subscribe links at the bottom of the listing

Widget

Class	Element	Notes
`gd-widget-inner`	div	Inner wrapper for widget content
`gd-widget-list`	ul	List of upcoming gigs in the widget
`gd-widget-gig`	li	Each gig in the widget list
`gd-widget-status-confirmed`	li	Added when gig is confirmed
`gd-widget-status-provisional`	li	Added when gig is provisional
`gd-widget-status-cancelled`	li	Added when gig is cancelled
`gd-widget-date`	span	Gig date in the widget
`gd-widget-time`	span	Gig time in the widget
`gd-widget-venue`	span	Venue name and city in the widget
`gd-widget-badge`	span	Base class for widget status badges
`gd-widget-provisional`	span	Provisional badge in widget
`gd-widget-cancelled`	span	Cancelled badge in widget
`gd-widget-none`	p	“No upcoming shows scheduled” message
`gd-widget-viewall`	p	View all gigs link at bottom of widget

Next gig shortcode

Class	Element	Notes
`gd-next-gig`	div	Wrapper for the next gig shortcode output

Example customisations

Change the section heading style

.gd-section-heading {
    font-size: 1.5rem;
    color: #333;
    border-bottom: 2px solid #DB6313;
    padding-bottom: 0.5rem;
}

Style the date column

.gd-date-day {
    font-weight: 700;
    color: #DB6313;
    display: block;
}

.gd-date-time {
    font-size: 0.85rem;
    color: #888;
}

Customise the provisional badge

.gd-tag.gd-provisional {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
}

Hide the map link

.gd-map-link {
    display: none;
}

Style rows by status

/* Dim cancelled gigs */
.gd-gig-row.gd-status-cancelled {
    opacity: 0.5;
}

/* Highlight provisional gigs */
.gd-gig-row.gd-status-provisional {
    background: #fffbeb;
}