Theming

How to customize the look of the customer-facing estimator beyond the per-estimator accent color setting.

CSS Variable Surface

The public estimator’s CSS uses scoped custom properties so theme overrides do not require fighting with specificity. All variables are namespaced --ax-.

Variable	Default	Drives
`--ax-accent`	`#EA580C` (orange)	Primary buttons, total highlight, progress steps, brand accents.
`--ax-accent-hover`	computed darker shade	Button hover state.
`--ax-text`	`#0F172A` (slate-900)	Body text.
`--ax-text-muted`	`#64748B` (slate-500)	Secondary text, hints, captions.
`--ax-bg`	`#FFFFFF`	Form background.
`--ax-bg-alt`	`#F8FAFC` (slate-50)	Card backgrounds, alternating rows.
`--ax-border`	`#E2E8F0` (slate-200)	Borders and dividers.
`--ax-radius`	`8px`	Border radius on cards and inputs.
`--ax-shadow`	subtle 0/2/8 black	Card shadow.

The Per-Estimator Accent Color

Each estimator’s accent color (set in the workshop’s style sidebar) overrides --ax-accent for that estimator’s form only. So a single site with three estimators can have three different brand colors.

The accent is set inline on the form’s container element:

HTML

<div id="ax-estimator-42" class="ax-estimator" style="--ax-accent: #2563eb;">
    </div>

Your theme can override the accent globally by setting --ax-accent higher in specificity than the inline style—but that is almost never what you want. The per-estimator setting is the intended override point.

Targeting the Form Scope

All estimator-side classes are prefixed .ax-. Top-level container is .ax-estimator. Common selectors:

Selector	Targets
`.ax-estimator`	Outer container.
`.ax-step1`, `.ax-step2`	Step containers.
`.ax-service-card`	Each service tile.
`.ax-service-check`	The hidden checkbox (use `:checked` for state).
`.ax-service-label`	The clickable service row.
`.ax-quantity-input`	Per-unit quantity input.
`.ax-addon-label`	Add-on rows under a service.
`.ax-package-card`	Each package option.
`.ax-running-total`	The live total display.
`.ax-next-btn`, `.ax-back-btn`, `.ax-submit-btn`	Step navigation / submit buttons.
`.ax-contact-form`	The Step 2 contact form.
`.ax-question-card`	A project question row.

Customizing Buttons via Your Theme

CSS

/* Make submit buttons square-cornered to match a brutalist theme */
.ax-estimator .ax-submit-btn {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

Adjusting Card Padding for a More Spacious Feel

CSS

.ax-estimator .ax-service-card {
    padding: 24px;
    margin-bottom: 16px;
}

Overriding the Font

CSS

.ax-estimator {
    font-family: 'Inter', sans-serif;
}

.ax-estimator h1,
.ax-estimator h2,
.ax-estimator .ax-running-total {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

Where to Put the Overrides

Three options, in increasing order of robustness:

1. WordPress Customizer → Additional CSS

For one-off tweaks. Survives theme updates. Fastest path.

2. Child Theme Stylesheet

For sites with a child theme, put overrides in your child theme’s style.css. Loads after the plugin’s stylesheet so cascade order is correct.

3. Enqueued from a Custom Plugin

For production sites that want to manage estimator styling alongside other custom logic:

PHP

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-ax-overrides',
        plugin_dir_url( __FILE__ ) . 'ax-overrides.css',
        array( 'ax-public-style' ),  // load after the plugin's stylesheet
        '1.0.0'
    );
}, 20 ); // priority > 10 so it runs after the plugin

Depending on ax-public-style ensures the cascade order is right even if the plugin renames stylesheets in future versions.

Email Styling

Estimate emails are HTML emails—they use inline styles only (no CSS classes, no stylesheets). This is required for email-client compatibility.

The per-estimator accent color is applied inline to the email header bar via PHP. To customize email layout beyond what the accent allows, the cleanest path is to hook the ax_email_brand_mark filter (if you want to swap the brand area) or build a full replacement using ax_send_notification_email.

If you want to apply a custom logo image in the email header instead of text, intercept ax_email_brand_mark:

PHP

add_filter( 'ax_email_brand_mark', function ( $current, $from_name, $context ) {
    if ( $context !== 'customer' ) return $current;
    return '<img src="https://example.com/logo.png" alt="' . esc_attr( $from_name )
         . '" width="180" style="display:block;max-width:180px;height:auto;border:0;">';
}, 10, 3 );

Image Best Practices for Email:

Host on the same domain (or any reliable public CDN).
Provide width and height attributes—not just CSS—for clients that strip styles.
Use PNG or JPEG, never SVG or WebP (broken in Gmail, Outlook).
Keep file size under 200 KB.
Always include an alt attribute as the text fallback when images are blocked.

Admin Styling

The admin views (workshop, leads dashboard, settings) follow a “Construction Professional” design system with International Orange (#EA580C) primary, slate-gray backgrounds, and JetBrains Mono for technical text (shortcodes, addresses, IDs).

All admin styles are prefixed with ax- as well. There is no public theming API for the admin—it is intentionally consistent across all installations—but you can override individual rules from a custom admin stylesheet if you really need to:

PHP

add_action( 'admin_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-ax-admin-overrides',
        plugin_dir_url( __FILE__ ) . 'ax-admin-overrides.css',
        array(),
        '1.0.0'
    );
} );

Accessibility

The form aims for WCAG 2.1 AA out of the box:

All interactive elements are keyboard navigable.
Focus styles are visible against any background.
Color is never the sole signal—score badges, status indicators, and errors all include text or icons.
Form fields have associated <label> elements.
The running total is announced to screen readers when it changes (via aria-live="polite").

If you override colors, make sure your accent retains AA contrast (4.5:1) against the white background.