Styling

The look and feel of the interface can include two modes:

1. Unstyled: All the markup none of the CSS. The logic will all be there, but styling will not be included. (TODO: We're creating a reference for all the classes and where they are applied.)
2. Default (TODO): This is a neutral tone and identity for the interface, that should be enough for most cases with only some changes to CSS variables for personalization.

Template hooks

You can use the following hooks to run code before and after the template element, where the application is loaded. The code you run can output anything allowing external developers the ability to add a custom header and footer, for example.

• admira_before_tickets_template

add_action( 'admira_before_tickets_template' , function () {
    printf(
        '<header class="custom-header">%s</header>',
        esc_html__( 'Welcome to your magical experience', '[your-domain]' );
    );
} );

• admira_after_tickets_template

add_action( 'admira_after_tickets_template' , function () {
    printf(
        '<footer class="custom-footer">%s</footer>',
        esc_html__( '©2025 Awesome enterprises, Ltd.', '[your-domain]' );
    );
} );

These hooks also allow passed a variable that indicates if the system is under maintenance. You can learn more in the hooks docs page.

Classes reference

Layout

The following classes are used at the top level and might be customized to provide the page's layout. The layout includes a sidebar, breadcrumbs and main content areas as top level blocks.

• admira-layout
• admira-main
• admira-root

Steps

Each step in the process has one of the following top classes:

• admira-checkout
• admira-empty
• admira-payment-mbway
• admira-payment-cc
• admira-payment
• admira-sessions
• admira-success
• admira-ticket-types

Blocks

Some classes are aggregated under a block name.

• admira-description
• admira-overlay
• admira-title
• admira-sidebar
  • admira-sidebar__title
• admira-breadcrumbs
  • admira-breadcrumbs__title
  • admira-breadcrumbs__list
• admira-cart-items
  • admira-cart-items__date
  • admira-cart-items__date-start
  • admira-cart-items__date-end
  • admira-cart-items__price
  • admira-cart-items__ticket-type
• admira-customer-data
  • admira-customer-data__name
  • admira-customer-data__email
  • admira-customer-data__confirm-email
  • admira-customer-data__vat-number
  • admira-customer-data__address
  • admira-customer-data__postal-code
  • admira-customer-data__country
  • admira-customer-data__phone
• admira-mbway-timer
  • admira-mbway-timer__time
  • admira-mbway-timer__description
• admira-notifications
  • admira-notifications__list
  • admira-notifications__item
  • admira-notifications__item--[type] (type: error, warning, info, success)
• admira-calendar
  • admira-calendar__title
• admira-sessions-list
  • admira-sessions-list__title
  • admira-sessions-list__item
• admira-sidebar-summary
  • admira-sidebar-summary__item
  • admira-sidebar-summary__item-label
  • admira-sidebar-summary__item-value
• admira-downloads
  • admira-downloads__link
  • admira-downloads__link--tickets
  • admira-downloads__link--invoice
• admira-tickets
  • admira-tickets__item
  • admira-tickets__item-label

CSS Variables

In the default style the following variables control how the interface is presented.

TBD