Our best plan is on SALE right now!

Skip to content
Home / Tutorials / EventPrime CSS Framework

EventPrime CSS Framework

Overview

EventPrime includes its own CSS that is designed to work only with the components and pages generated by the EventPrime plugin. We provide CSS classes specifically for elements rendered by EventPrime itself. We do not provide ready-made classes for custom components that you add outside the plugin, and we do not maintain a class for every possible layout or element beyond the plugin’s own interface. If you need to target a specific CSS class in order to override EventPrime styling, please fill out the request form at the end of this page. Our team will review it and, where possible, include a suitable class in a future version of EventPrime that you can target for overriding your own design requirements.

EventPrime wraps its frontend output in a main wrapper: 

<div class="emagic">
    <!-- All EventPrime UI lives here -->
</div>

Everything in this guide assumes your content is inside .emagic – this prevents your theme from breaking EventPrime styling and vice-versa.

1. How this CSS works on your site

Dark mode toggle

If you add ep-dark-mode-enabled on a parent element (often <body>): 

<body class="ep-dark-mode-enabled">

then the framework automatically:

  • darkens backgrounds
  • lightens text
  • adjusts borders and some button styles

You do NOT toggle dark colors one by one – this single class flips several CSS variables.

2. Design tokens (the core settings)

These are CSS variables in :root and .ep-dark-mode-enabled. They are the global knobs.

You usually set them:

  • via theme custom CSS
  • or in a custom plugin file
  • or in a child theme stylesheet

Important color variables

Variable What it controls Example effect
--themeColor (you add this) Your main brand color (RGB) Buttons, primary backgrounds, highlights
--ep-light-color Light background (e.g., panels) .ep-bg-light
--ep-dark-color Dark text / dark backgrounds .ep-btn-dark, text contrast
--ep-white-color Base “white” color .ep-bg-white, .ep-text-white
--ep-border-color / --ep-border-color-rgb Standard border color .ep-border, table borders
--ep-success-color, --ep-danger-color, --ep-warning-color Status colors Success / error / warning text & backgrounds

In dark mode (.ep-dark-mode-enabled), these are overridden to darker backgrounds and lighter text. That’s why you don’t manually change colors for dark theme; the framework does it by variable override.

Shape and modal variables

Variable What it controls
--ep-border-radius / -sm / -lg / -2xl / -pill Default corner rounding for boxes, buttons, badges, etc.
--ep-modal-width Base width for modals (.ep-modal-lg, etc. use this)

You rarely touch most of these. The one you do care about: --themeColor.

Example – set brand color once:

:root {
    --themeColor: 34,113,177; /* same as #2271b1 */
}

Everything “primary” (buttons, pills, progress bars, loaders) automatically picks this up.

3. How to use these classes in WordPress

In the block editor (Gutenberg)

  1. Add a block (e.g., Group, Paragraph, Buttons, Table).
  2. In the block sidebar → Advanced → “Additional CSS class(es)”.
  3. Type classes like:
    • ep-bg-primary ep-bg-opacity-10 ep-p-3 ep-rounded
    • ep-text-primary
    • ep-d-flex ep-justify-content-between

In page builders (Elementor, etc.)

Most builders have a CSS Classes / Class Name field per element. Just put the same class names there.

In templates / shortcodes

If you’re editing PHP templates or shortcode output, wrap content in emagic and apply classes as normal HTML class attributes: 

<div class="emagic ep-bg-light ep-p-3">
    <?php echo do_shortcode('[eventprime_events]'); ?>
</div>

4. Layout system: containers, rows, columns

This is the grid system, similar to Bootstrap.

4.1 Container

<div class="emagic">
  <div class="ep-box-wrap">
    <!-- Your EventPrime content -->
  </div>
</div>

ep-box-wrap:

  • centers content
  • adds left/right padding
  • keeps things readable on large screens

4.2 Rows & gutters

<div class="ep-box-row ep-g-4">
    ...
</div>
  • ep-box-row = row of columns
  • ep-g-* = gap between columns
Class Meaning
ep-g-3 Medium gap (1rem)
ep-g-4 Larger gap (1.5rem)
ep-g-5 Biggest gap (3rem)

4.3 Columns by screen size

Pattern:
ep-box-col-[breakpoint]-[number]

Where:

  • breakpoint: xsm, sm, md, or default (1068px and up)
  • number: 1–12 (fraction of 12-column grid)

Example:

<!-- Two equal columns on tablet+; stacked on mobile -->
<div class="ep-box-row ep-g-3">
  <div class="ep-box-col-sm-6 ep-box-col-12">Left</div>
  <div class="ep-box-col-sm-6 ep-box-col-12">Right</div>
</div>
Class Effect
ep-box-col-12 Full width (mobile default)
ep-box-col-sm-6 50% width from 767px+
ep-box-col-sm-4 33.33% width from 767px+
ep-box-col-3 25% width from 1068px+

There are also special layout helpers:

  • ep-box-col-left-2 = 20% width (e.g., sidebar)
  • ep-box-col-right-10 = 80% width (main content)

5. Color & background helpers (no custom CSS needed)

5.1 Text color

Class What it does
ep-text-primary Brand color (--themeColor)
ep-text-white White text
ep-text-muted Grey, “secondary” text
ep-text-danger / ep-text-success / ep-text-warning Red/green/yellow semantic colors

Example:

<p class="ep-text-muted">This is secondary info.</p>
<p class="ep-text-danger">There was an error processing your request.</p>

5.2 Backgrounds

Class What it does
ep-bg-white White panel background
ep-bg-light Light grey background
ep-bg-dark Dark background
ep-bg-primary Solid brand background
ep-bg-secondary Neutral secondary
ep-bg-success / ep-bg-danger / ep-bg-warning / ep-bg-light-green Status backgrounds

5.3 Background opacity

Class Opacity
ep-bg-opacity-10 10% (very soft)
ep-bg-opacity-6 60%
ep-bg-opacity-4 40%
ep-bg-opacity-3 30%

Typical pattern:

<div class="ep-bg-primary ep-bg-opacity-10 ep-p-3 ep-rounded">
    Soft brand-colored box with padding
</div>

6. Borders & radius

6.1 Adding borders

Class Effect
ep-border Standard border with default color
ep-border-1 / ep-border-2 / ep-border-3 Adjust border width
ep-border-primary Border in brand color
ep-border-light Light border
ep-border-green Green border
ep-border-top / ep-border-bottom / ep-border-left / ep-border-right Borders on one side
ep-transparent-border Transparent border (useful for layout consistency)

6.2 Corner radius

Class Effect
ep-rounded Standard rounded corners
ep-rounded-1 Slightly rounded
ep-rounded-5 Very rounded (2xl)
ep-rounded-circle Perfect circle (for square elements)
ep-rounded-pill Pill shape (long rounded)
ep-rounded-top / ep-rounded-bottom Round only top or bottom corners

Example:

<div class="ep-border ep-border-primary ep-rounded-5 ep-p-3">
    Highlighted card
</div>

7. Spacing utilities (padding & margin)

The pattern is familiar:

  • p = padding, m = margin
  • t = top, b = bottom, l = left, r = right, x = left+right, y = top+bottom
  • 0–7 = size scale

7.1 Common classes

Class Effect
ep-p-0 / ep-m-0 Remove all padding / margin
ep-p-1 / ep-m-1 Very small spacing
ep-p-2 / ep-m-2 Small spacing
ep-p-3 / ep-m-3 Medium spacing
ep-p-4 / ep-m-4 Large
ep-p-5 / ep-m-5 Very large

Directional examples:

Class Effect
ep-pt-3 Padding-top medium
ep-py-3 Vertical padding medium
ep-px-3 Horizontal padding medium
ep-mb-3 Margin-bottom medium
ep-mx-auto Center block horizontally (auto left/right margin)

Example – card with spacing:

<div class="ep-bg-white ep-border ep-rounded ep-p-3 ep-mb-4">
    ...
</div>

8. Typography helpers

8.1 Font size

Class Size
ep-fs-6 1rem (base)
ep-fs-5 1.25rem
ep-fs-4 1.5rem
ep-fs-3 1.75rem
ep-fs-2 2rem
ep-fs-1 2.5rem

8.2 Weight & transform

Class Effect
ep-fw-bold Bold text
ep-fw-normal Normal weight
ep-text-uppercase Uppercase letters

8.3 Truncation and line clamping

Class Effect
ep-text-truncate Single-line with … at the end
ep-content-truncate Multi-line truncation (default 5 lines)
ep-content-truncate-line-3 / -4 / -5 Set line count

Example for multi-line description:

<p class="ep-content-truncate ep-content-truncate-line-3">
    Very long event description...
</p>

9. Flexbox & alignment

9.1 Display & direction

Class Effect
ep-d-flex Display: flex
ep-flex-column Stack items vertically
ep-flex-row-reverse Reverse row order
ep-flex-wrap Allow items to wrap
ep-flex-1 Item grows to fill remaining space

9.2 Horizontal alignment

Class Effect
ep-justify-content-between Space between items
ep-justify-content-center Center items
ep-justify-content-end Align to right
ep-content-center / ep-content-right / ep-content-left Similar helpers

9.3 Vertical alignment

Class Effect
ep-items-center Vertically center in flex container
ep-items-start Align to top
ep-items-end Align to bottom
ep-align-middle / ep-align-top / ep-align-bottom Table / inline vertical alignment

Example – event card header:

<div class="ep-d-flex ep-justify-content-between ep-items-center ep-mb-2">
    <h3 class="ep-m-0">Event Title</h3>
    <span class="ep-text-muted ep-text-small">Free</span>
</div>

10. Buttons

The base button class is ep-btn.

10.1 Basic usage

<button class="ep-btn ep-btn-primary">Book Now</button>
<button class="ep-btn ep-btn-outline-primary">Outline</button>
<button class="ep-btn ep-btn-danger">Delete</button>
<button class="ep-btn ep-btn-warning">Warning</button>
<button class="ep-btn ep-btn-dark">Dark</button>
<button class="ep-btn ep-btn-light">Light</button>
<button class="ep-btn ep-btn-green">Confirm</button>

10.2 Sizes and states

Class Effect
ep-btn-sm Smaller button
disabled or :disabled Greyed out / disabled
ep-button-text Looks like plain text, clickable

Example – text-style button:

<button class="ep-button-text">Edit details</button>

10.3 Button groups & radio-like buttons

Use .ep-btn-group and .ep-btn-check to create options that look like buttons: 

<div class="ep-btn-group">
  <input type="radio" class="ep-btn-check" name="view" id="view_list" checked>
  <label class="ep-btn ep-btn-outline-secondary" for="view_list">List</label>

  <input type="radio" class="ep-btn-check" name="view" id="view_grid">
  <label class="ep-btn ep-btn-outline-secondary" for="view_grid">Grid</label>
</div>

When checked, the framework:

  • adds a small checkmark
  • highlights the selected button

11. Forms & validation messages

11.1 Basic fields

Class Used on Effect
ep-form-control <input>, <textarea> Standard text field styling
ep-form-select <select> Dropdown styling with custom arrow
ep-form-control-sm input Smaller height

Example:

<input type="text" class="ep-form-control" placeholder="Your name">
<select class="ep-form-select">
  <option>Standard</option>
  <option>VIP</option>
</select>

11.2 Input groups

<div class="ep-input-group">
  <span class="ep-input-group-text">@</span>
  <input class="ep-form-control" placeholder="Username">
</div>

11.3 Validation & messages

Class Usage
ep-invalid-feedback Error text under a field (hidden by default; show via JS)
ep-error-message General error block
ep-success-feedback Success text (under field)
ep-success-message General success block

Example:

<input class="ep-form-control">
<div class="ep-invalid-feedback">This field is required.</div>

12. Lists, tabs, and pills

12.1 List group (side menus, account menu)

<ul class="ep-list-group ep-myaccount-tabs">
  <li class="ep-list-group-item ep-tab-item">
    <a class="ep-tab-link ep-tab-active">Profile</a>
  </li>
  <li class="ep-list-group-item ep-tab-item">
    <a class="ep-tab-link">Bookings</a>
  </li>
</ul>
  • ep-list-group = container
  • ep-list-group-item = each row
  • ep-tab-link ep-tab-active = active tab (background becomes theme color)

12.2 Tabs (top tab strip)

<ul class="ep-nav-tabs">
  <li class="ep-tab-item">
    <a class="ep-tab-link ep-tab-active">Details</a>
  </li>
  <li class="ep-tab-item">
    <a class="ep-tab-link">Attendees</a>
  </li>
</ul>
  • ep-nav-tabs = horizontal tabs with bottom border
  • ep-tab-link ep-tab-active = active tab with white background and border

12.3 Pills (rounded filters)

<ul class="ep-nav-pills">
  <li class="ep-tab-item">
    <a class="ep-tab-link ep-tab-active">Upcoming</a>
  </li>
  <li class="ep-tab-item">
    <a class="ep-tab-link">Past</a>
  </li>
</ul>
  • ep-nav-pills = pill-shaped filter tabs

13. Modals (popups)

The modal framework handles overlay and animation; you provide content.

Basic structure:

<body class="ep-modal-open-body">
  <div class="ep-modal-view">
    <div class="ep-modal-wrap ep-modal-lg">
      <div class="ep-modal-dialog ep-modal-dialog-centered ep-modal-in">
        <div class="ep-modal-content">
          <div class="ep-d-flex ep-modal-titlebar ep-p-3 ep-justify-content-between">
            <h3 class="ep-m-0">Modal Title</h3>
            <a class="ep-modal-close">×</a>
          </div>
          <div class="ep-modal-body ep-p-3">
            Modal content goes here...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Key classes:

Class Role
ep-modal-view Full-screen overlay (dark background)
ep-modal-wrap Centers modal; uses --ep-modal-width
ep-modal-dialog-centered Vertically center within viewport
ep-modal-content Actual popup box
ep-modal-body Inner content area
ep-modal-lg / ep-modal-xl / ep-modal-xxl Size presets
ep-modal-in / ep-modal-out Show/hide animation
ep-modal-overlay-fade-in / ep-modal-overlay-fade-out Overlay fade animations

EventPrime uses this structure internally for things like booking forms and GDPR, so you mostly style around it, not build from scratch.

14. Tables

Basic table:

<table class="ep-table ep-table-hover ep-bg-white ep-rounded ep-shadow-sm">
  <thead>
    <tr><th>Ticket</th><th>Qty</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>General</td><td>2</td><td>$40</td></tr>
  </tbody>
</table>
  • ep-table = base styles
  • ep-table-hover = row highlight on hover
  • ep-table-borderless = remove borders
  • ep-table-danger = red “danger” table styling (e.g., declined bookings)

15. Loaders, progress, spinner

15.1 Full-page loading overlay

<div class="ep-loader-fw-overlay">
  <div class="ep-loader"></div>
</div>
  • ep-loader-fw-overlay = full-screen dark overlay
  • ep-loader = spinning circle, uses brand color for inner border

15.2 Inline spinner (button)

<button class="ep-btn ep-btn-primary">
  <span class="ep-spinner ep-spinner-border-sm ep-is-active"></span>
  Loading...
</button>
  • ep-spinner = small spinner
  • ep-spinner-border-sm = smaller size
  • ep-is-active = actually show it (otherwise hidden)

15.3 Progress bar

<div class="ep-progress">
  <div class="ep-progress-bar" style="width: 60%;"></div>
</div>
  • ep-progress = track
  • ep-progress-bar = bar filled with brand color (or dark green in dark mode)

16. Misc helpers

Some useful ones:

Class Effect
ep-img-fluid Make image scale to container width
ep-img-100 Image fills width and height of parent
ep-object-cover-fit Image covers box without distortion
ep-d-none Hide element
ep-inline-block / ep-d-inline-flex Inline layouts
ep-overflow-hidden / ep-overflow-auto Control scroll/clip
ep-z-index, ep-z-index-1 / -2 / -3 Layer priority
ep-desc-truncate Truncate long descriptions to 3 lines
ep-white-space / ep-white-space-normal No-wrap vs normal wrapping
ep-ui-show-on-top Force element above others (z-index: 99999)

17. GDPR & Cookie banner

You saw classes like #ep_gdpr_modal, .ep-cookie-banner, etc. You don’t typically write HTML for these yourself – EventPrime outputs them. The CSS simply:

  • Positions and styles the GDPR modal
  • Styles the cookie consent banner at the bottom left/right
  • Uses ep-cookie-accept and ep-cookie-decline button styles, which inherit from the same system (brand color on Accept button)

If you theme them, you usually only tweak text from plugin settings. The visual behavior comes from this CSS.

Request a Custom EventPrime CSS Class

Use this form to tell us which EventPrime component or layout you want to style, and what kind of design change you need. Our team will review your request and, where possible, add a suitable CSS class in a future update so you can target it with your own custom styling.

Questions, Support & Custom Solutions

  • Need more details or can't find what you're looking for? Let us know how we can help! Contact our support team here.
  • Looking for a tailor-made solution to meet your specific needs? Our dedicated customization team is here to help! Use this link to share your requirements with us, and we'll collaborate with you to bring your vision to life.

Leave a Reply

Your email address will not be published. Required fields are marked *