Home / Help & Docs / Styling and page builders
Styling and page builders
KeepsYa’s front end is built to be restyled in any theme or page builder without
touching plugin code. There are four layers of control, from easiest to most
hands-on:
- The Style wizard (no code, with live preview): KeepsYa → Style. Point-and-
click controls for the brand color; button color, hover, text color, shape, and
text size; card background, border, corners, and the title/date/price text sizes;
body and muted text; text size; link color, hover, and size; the filter pills and
dropdowns (background, text/border, active background, active text, hover, shape, and
text size); the search box (background, text, border, shape, and text size); and the
pending/error colors. A live preview shows a real event card, the filter bar with
search, and a sign-up button updating as you change things; Save applies them
site-wide. This is the easiest path and the recommended starting point. - Settings (no code): Settings → General → Appearance has the same core controls
if you prefer them on the settings screen. - CSS variables (one snippet): override any
--keepsya-*design token in your
theme’s or builder’s custom-CSS box (covered below). - Turn KeepsYa’s CSS off and style the plain markup entirely yourself.
The wizard, the Appearance settings, and direct CSS-variable overrides all drive the
same --keepsya-* tokens, so you can mix them: a designer’s :root override always
wins (it’s unlayered; KeepsYa’s defaults sit in a low-priority cascade layer).
KeepsYa does not use the WordPress Customizer (block themes have deprecated it and
page builders bypass it). Everything below works the same in Bricks, Elementor,
Gutenberg / Full Site Editing, Divi, Beaver Builder, Oxygen, and classic themes,
because it all comes down to CSS variables and standard custom CSS.
Design tokens (CSS variables)
Every color, corner, and size is a --keepsya-* custom property. Override one and it
applies everywhere that token is used.
| Token | Default | Controls |
|---|---|---|
--keepsya-accent |
#1b5e20 |
Brand color: buttons, links, highlights, accent borders. |
--keepsya-accent-dark |
(auto, darker) | Button hover. |
--keepsya-btn-bg |
the accent | Button background (set to override just buttons). |
--keepsya-btn-bg-hover |
the accent-dark | Button hover background. |
--keepsya-btn-text |
#fff |
Button text color. |
--keepsya-btn-radius |
6px / 8px |
Button corner radius. |
--keepsya-btn-width |
auto |
Button width (auto or 100%). |
--keepsya-btn-align |
left |
Button alignment (left / center / right). |
--keepsya-radius |
10px |
Card corner radius. |
--keepsya-surface |
#fff |
Card background. |
--keepsya-text |
#222 |
Body text. |
--keepsya-muted |
#5a646e |
Secondary / muted text. |
--keepsya-border |
#e3e6ea |
Hairline borders. |
--keepsya-warn |
#9e7700 |
“Pending / awaiting review” notices. |
--keepsya-danger |
#b32d2e |
Cancel links and errors. |
--keepsya-font-size |
16px |
Base text size; everything else scales from this. |
--keepsya-btn-font-size |
~1.06em submit / 0.9em card | Button text size. |
--keepsya-card-title-size |
1.12em | Event-card title size. |
--keepsya-card-meta-size |
0.9em | Event-card date / time / venue / excerpt size. |
--keepsya-card-price-size |
1em | Event-card price size. |
--keepsya-link |
the accent | Text-link color. |
--keepsya-link-hover |
darker accent | Text-link hover color. |
--keepsya-link-size |
inherit | Text-link size. |
--keepsya-pill-bg |
#fff |
Filter pill / dropdown background (inactive). |
--keepsya-pill-text |
the accent | Filter pill / dropdown text and border. |
--keepsya-pill-border |
the pill text | Filter pill / dropdown border (set to override just the border). |
--keepsya-pill-active-bg |
the accent | Active (selected) pill background. |
--keepsya-pill-active-text |
#fff |
Active pill text. |
--keepsya-pill-hover-bg |
subtle tint | Pill hover background. |
--keepsya-pill-radius |
999px |
Filter pill / dropdown corner radius. |
--keepsya-pill-font-size |
~0.9x base | Filter pill / closed-dropdown text size. |
--keepsya-pill-option-size |
base size | Text size of the labels inside the open dropdown list. |
--keepsya-filter-width |
auto |
Width of the age / tag dropdowns (auto = fit content). |
--keepsya-search-bg |
#fff |
Search box background. |
--keepsya-search-text |
body text | Search box text. |
--keepsya-search-border |
hairline | Search box border. |
--keepsya-search-radius |
999px |
Search box corner radius. |
--keepsya-search-font-size |
0.9rem |
Search box text size. |
--keepsya-search-width |
auto |
Width of the search box (auto = fit content). |
--keepsya-avail-color |
muted | Availability line color (“Limited Spots Available”). |
--keepsya-almost-color |
warn | “Almost Sold Out” color. |
--keepsya-urgency-color |
danger | Scarcity color: the real low-spot count and the full state. |
--keepsya-avail-size |
~0.9x base | Availability line text size. |
(The events grid’s column count is set per shortcode with the columns attribute,
not a token.)
The one snippet that covers everything
The simplest and most reliable scope is :root, which reaches every KeepsYa
surface at once (the sign-up form, the account area, and the events grid):
:root {
--keepsya-accent: #0b66ff; /* your brand color */
--keepsya-radius: 4px; /* softer cards */
--keepsya-btn-radius: 999px; /* pill buttons */
--keepsya-font-size: 1rem; /* match your theme's text size */
}
Units & fluid (clamp) sizes. In the Style wizard, each size has a px / rem / em / %
selector, plus a Fluid checkbox: tick it and enter a min and max px size,
and KeepsYa builds a responsive clamp() that scales smoothly between them across the
viewport (e.g. min 16 / max 28 becomes clamp(16px, calc(8.8px + 1.5vw), 28px)). You
can also set any token to a hand-written clamp() in custom CSS, the token accepts
any CSS length expression, e.g.
:root{ --keepsya-card-title-size: clamp(1.1rem, 2.5vw, 1.7rem); }.
You can also scope to a single component when you only want to restyle one piece:
.keepsya-box (the sign-up form / account card) or .keepsya-events-wrap (the events
grid). Because KeepsYa’s own defaults live in a low-priority CSS cascade layer, your
override wins regardless of where it loads.
Where to paste the CSS, by builder
| Builder / theme | Where to put the snippet |
|---|---|
| Any theme | Appearance → Customize → Additional CSS (still works for this), or your child theme’s stylesheet. |
| Bricks | Bricks → Settings → Custom CSS (global), or a page/element’s CSS panel. Bricks is CSS-variable-native, so :root{ --keepsya-* } fits right in. |
| Elementor | Site Settings → Custom CSS (global), or a section/widget’s Advanced → Custom CSS (Pro). |
| Gutenberg / Full Site Editing | Site Editor → Styles → Additional CSS, or Appearance → Customize → Additional CSS. |
| Divi | Theme Options → General → Custom CSS, or a module’s Advanced → Custom CSS. |
| Beaver Builder / Oxygen | The builder’s global Custom CSS area. |
In every case the snippet is the same. Start with the :root{ … } block above.
Placing KeepsYa on a page in a builder
KeepsYa’s output comes from shortcodes, which drop into any builder:
[keepsya_event](single-event sign-up),[keepsya_events](filterable list/grid),
[keepsya_event_card],[keepsya_search](live event search box),
[keepsya_availability](the Urgency Creator line), and[keepsya_account](modular:
module="contact|emergency|player|bookings|balance|referral").- Gutenberg: use the KeepsYa block (it has a picker for which shortcode +
options), or the core Shortcode block. - Bricks: the native KeepsYa element, or a Shortcode element.
- Elementor / Divi / Beaver / Oxygen: their Shortcode (or HTML/Code) widget.
Building your own event card (fields in a query loop)
If you’d rather assemble an event card from native builder elements than use KeepsYa’s
grid, drop individual event fields into your builder’s query loop over the
tribe_events post type. There are two ways, and you can mix them.
1. The universal way: the field shortcode (works in every builder).
Important: a shortcode only runs inside the builder’s dedicated Shortcode
element / widget / block. A plain Text or Heading element usually does not
process shortcodes, it will print[keepsya_availability]literally. Either use a
Shortcode element, or (in Bricks) use the dynamic-data tag in a Text element (option 2).
Inside the loop, add a Shortcode element/widget/block (not a Text element) with:
[keepsya_event field="title"]
[keepsya_event field="date"]
[keepsya_event field="time"]
[keepsya_event field="venue"]
[keepsya_event field="price"]
[keepsya_availability] (the New / Limited / Almost / count line)
[keepsya_event field="register"] (the Register button)
With no id, each one reads the current event in the loop automatically. Outside a
loop (e.g. a one-off placement), pass the id: [keepsya_availability id="123"].
2. The native way per builder:
| Builder | How to place event fields in a card |
|---|---|
| Bricks | Native dynamic-data tags (the lightning-bolt picker, group “KeepsYa Event”): {keepsya_event_title}, {keepsya_event_date}, {keepsya_event_time}, {keepsya_event_location}, {keepsya_event_price}, {keepsya_event_availability}, {keepsya_event_spots_left}, {keepsya_event_new_badge}, |
{keepsya_event_id}, {keepsya_event_register_url}. (On KeepsYa’s own grid cards the “New |
|
Event” badge floats as a ribbon on the image automatically; {keepsya_event_new_badge} / |
|
the new_badge field let you place it yourself on a builder-built card, and |
|
{keepsya_event_availability} is the message only, no “New” badge.) Put text tags in a Text element (not a Heading, so the availability markup renders); use {keepsya_event_register_url} as a Button link. Or drop a Shortcode element with any shortcode above. Or use the native KeepsYa element. |
|
| Gutenberg / FSE | Inside a Query Loop block, add a Shortcode block (or the KeepsYa block) containing [keepsya_availability] etc. |
| Elementor (Pro) | Inside a Loop Grid template, add a Shortcode widget with [keepsya_availability]. (Elementor’s Text Editor widget also runs shortcodes.) |
| Divi / Beaver / Oxygen | Inside their loop / repeater module, use a Shortcode, Text, or Code module with the shortcode. |
Dynamic-data tags ({...}) are Bricks-specific. For Elementor, Gutenberg, Divi and
the rest, use the shortcodes ([...]); they are the portable, builder-agnostic way
and resolve the current loop event the same way. (Tip: in Bricks, curly braces are
dynamic data and square brackets are shortcodes; {keepsya_availability} will print
literally, use {keepsya_event_availability} or [keepsya_availability].)
Turning KeepsYa’s stylesheet off completely
For a from-scratch design: Settings → General → Appearance →
“Turn off KeepsYa’s front-end styles.” This removes KeepsYa’s CSS everywhere it
appears (single events, the account area, and the events grid), leaving clean,
single-class markup (.keepsya-box, .keepsya-events-wrap, .keepsya-register-button,
etc.) for you to style entirely in your builder. The color and shape settings stop
applying when this is on.
To hand the events page back to The Events Calendar entirely (its own template and
styles, with no KeepsYa output there), uncheck “Show the events page with KeepsYa’s
filterable grid” in the same place.
If an override does not seem to apply
KeepsYa keeps its own CSS at low specificity (single classes, no !important), so your
overrides normally win. If a specific element resists your change, the cause is almost
always your theme styling the same element more aggressively (a high-specificity
or !important rule on links/buttons). Two fixes:
- Scope your override more specifically, matching or beating the theme, e.g.
.your-theme-wrapper .keepsya-register-button{ background:#0b66ff !important; }. - Use the theme’s own button styling for that element, or set the KeepsYa button
color in Settings so it matches.
Some hosts and CDNs also run a “CSS optimization” step. If overrides behave oddly only
on the live site (not in a local/staging copy), check the host’s CSS-minify or
critical-CSS settings.
Full token defaults also live at the top of assets/css/registration.css. For the
data model and how the front end is rendered, see the Architecture reference.