Skip to main content
Drecha logo DRECHA
Drecha Events & Bookings Pro

Official plugin manual

Manual navigation
Pro Updated

Advanced CSS customization

Use Events Pro global, component, and named-instance styling without leaking rules into unrelated WordPress content.

Choose the smallest useful styling level

Events Pro intentionally uses three styling levels. There is no separate per-event CSS record.
Level Use it for Scope
Public design template A tested visual starting point Every supported Events public surface
Global custom CSS Media queries or advanced selectors that are intentionally broad Whatever the entered selectors match
Component override One kind of interface, such as every booking form A verified data-drecha-component wrapper
Named instance override One reusable shortcode or supported block placement One component plus a validated data-drecha-style-id
Start with a template. Use the existing global editor only when a rule should be broad. Prefer a component override for a repeated interface and create a named instance only when one placement must differ.

Open the styling screen

  1. Sign in to WordPress as an Administrator.
  2. Confirm that Events Pro has active license or trial access.
  3. Open Events Pro → Styling.
  4. Choose Global, Components, or Named instances.
  5. Save and test the real public page in a private browser window.
The global editor continues to use the existing drecha_activities_custom_css option. Component and named-instance rules are stored separately in drecha_events_css_customizations, so upgrading the plugin does not replace either saved value.

Customize a component

The Components tab lists only registered public output. Current targets include:
  • Calendar, event collection, event details, booking form, availability and attendee status
  • Customer account, service directory, appointment booking, and individual event fields
  • Event search and filters, event count, calendar links, and venue or organizer profiles
  • Pro waitlists, class passes, memberships, and protected booking-management output
  1. Open Components and choose the component that owns the visible output.
  2. Choose the narrow target, such as Event card, Form fields, or Booking button.
  3. Enter CSS declarations only. Do not enter the displayed selector or surrounding braces.
  4. Save styling and reload a page that renders that component.
For example, the Event collections → Event card editor accepts:
css
background-color: #ffffff;
border-color: #cbd5e1;
box-shadow: 0 12px 30px rgb(15 23 42 / 10%);
Events Pro compiles those declarations behind these verified selectors:
css
[data-drecha-component="event-collection"] .drecha-event-card,
[data-drecha-component="event-collection"] .drecha-agenda-session
A booking action can be targeted through the Booking form → Booking button editor. Its generated selectors are:
css
[data-drecha-component="booking-form"] button[type="submit"],
[data-drecha-component="booking-form"] .drecha-button
Because every selector starts at the component wrapper, these declarations cannot style an unrelated theme form or button.

Customize one named placement

Named instances are useful when the homepage calendar needs a different appearance from the calendar on the complete schedule page.
  1. Open Named instances.
  2. Enter an internal label, such as Homepage events.
  3. Enter a style ID such as homepage-events. Use 1–64 lowercase letters, numbers, hyphens, or underscores, beginning with a letter or number.
  4. Choose the component rendered by the shortcode or block.
  5. Select Create instance, add declarations to its targets, and save.
  6. Pass that exact ID to a supported placement.
text
[drecha_events view="grid" columns="3" limit="3" style_id="homepage-events"]
The matching wrapper renders as:
html
<div data-drecha-component="event-collection" data-drecha-style-id="homepage-events">
The named Event card rule is therefore compiled behind:
css
[data-drecha-component="event-collection"][data-drecha-style-id="homepage-events"] .drecha-event-card
Use a different ID for an independent placement. Reusing homepage-events deliberately shares the same saved rules across every matching placement, including when the shortcode appears more than once. The HTML attributes remain stable in cached output; Events Pro emits the saved CSS once per rendered component and instance on the page.
For one placed event card, the same pattern works with the Event details component:
text
[drecha_event id="123" style_id="featured-event"]
Replace 123 with a real event ID. This does not create entity-level CSS and does not alter other renderings of event 123.

Use contextual CSS skeletons

Every editor offers Insert skeleton or Restore skeleton. The skeleton is generated from the same registry that decorates frontend markup, so it names the selected target and displays its current scoped selector.
  • On an empty editor, choose Insert skeleton to add the commented starting point.
  • On an editor with content, Restore skeleton requires a second deliberate click before replacement.
  • A skeleton never replaces custom CSS silently.
  • Component and instance skeletons are comments because those editors accept declarations only. Add declarations below the comment; do not paste selector braces into the field.
css
/* Event card
 * Selector: [data-drecha-component="event-collection"] .drecha-event-card, [data-drecha-component="event-collection"] .drecha-agenda-session
 * Add declarations below. Example:
 * background-color: #ffffff;
 * color: #172033;
 */
The Global skeleton is different: that editor accepts complete CSS rules and includes broad selectors such as .drecha-event-card, .drecha-button, and .drecha-detail-button.

Understand precedence and output

  1. The selected public template supplies the base design.
  2. Existing global custom CSS keeps its broad, backward-compatible behavior.
  3. Component rules load only after a matching component renders and stay under its data-drecha-component wrapper.
  4. Named-instance rules include both wrapper attributes and are therefore more specific than the corresponding component rule.
Normal CSS cascade rules still apply. A more specific theme selector or an existing !important declaration can win. When component and instance declarations have equal importance, the named instance has the additional attribute selector and normally takes precedence.
Events Pro does not enqueue every saved granular rule on every page. It collects the component and named-instance rules needed by rendered output, deduplicates them, and prints that CSS once. Two different style IDs can coexist on one page without affecting each other.

Reset or remove styles

  • Global: remove only the unwanted rules from Global custom CSS and save. There is no automatic global reset, so copy important CSS before making a large change.
  • Component: choose Reset component, confirm the deliberate second click, and save. Only that component's overrides are removed.
  • Named instance: choose Delete instance, confirm the deliberate second click, and save. Remove its style_id from the shortcode or block when it is no longer useful.
  • One target: clear that declaration field and save while leaving the other targets intact.
Removing a granular rule does not remove events, bookings, plugin settings, public templates, or the legacy global CSS value.

Troubleshoot styling conflicts

Symptom Check
The Styling screen is missing Confirm Administrator access, the standalone Pro package, and an active license or trial. Free intentionally has no granular editor.
A component rule has no effect Use declarations only; remove braces and selectors, save, then confirm the public wrapper has the expected data-drecha-component value.
A named rule has no effect Confirm the instance component matches the shortcode output and the exact style_id appears as data-drecha-style-id in the rendered HTML.
Two placements look the same They share a style ID by design. Assign a different ID when they need independent rules.
A rule affects more output than intended Move broad CSS from Global into the narrowest component or named-instance target that can express it.
A saved declaration is ignored Review the sanitization notice. Selectors, braces, @import, executable values, and unsafe legacy properties are not compiled into granular output.
The old appearance remains Purge WordPress, page-builder, CDN, and browser caches, then inspect selector specificity and !important declarations.

Free, Pro, and Priority Service

Free and Pro share stable public wrappers so compatible theme CSS remains possible in either edition. Pro adds the existing global editor, dedicated component editors, and named-instance controls; losing Pro access leaves stored styling data intact but does not expose licensed editing or new Pro mutations.
Priority Service is a separate optional monthly subscription available to eligible Free and Pro customers. Where CSS customization is technically applicable, it can provide reasonable help with colors, typography, spacing, alignment, responsive adjustments, and supported snippets. It does not unlock these Pro editors, include a Pro license, or provide unlimited custom development or a full website redesign.
Continue with the Advanced CSS Customization feature overview or review the Free versus Pro comparison.

Functional cookies only

Drecha only uses functional cookies for sign-in, security, and core product flows. By continuing to use the site, you agree to that use.

Privacy Policy