Skip to main content
View Categories

Conversion Kit Styling Reference

Table of Contents

Every guest-facing Conversion Kit widget can be restyled to match your site. This page is the reference for doing it: the color settings each module exposes, the CSS variables you can set, and the class names to target. Like the HomeRunner CSS Class Reference, it’s written so you can paste the whole page into an AI assistant (Claude, ChatGPT) with a description of the look you want and let it write the CSS.

Put your rules in Appearance > Customize > Additional CSS or a snippets plugin such as WPCode.

Protected styling, and what it means for your CSS #

Some Conversion Kit modules ship with protected styling: their rules are deliberately weighted so a host theme’s CSS can’t accidentally break them. The same protection means your own plain selectors won’t override them either. For these modules, restyle through their settings and CSS variables first, and when you do write a direct rule against their classes, add !important:

.hrck-cart-reminder__cta {
    background: #0a7d4f !important;
}

Protected modules: Guest Menu, Cart Abandonment reminder, the CTA stack, Side Panel wishlist drawer, Split Cost Calculator, Price Drop Alerts, Contact Form, Booking Reminder.

Standard modules (normal CSS, plain overrides work): Rate Comparison, Promo Bar, Property Finder, Trip Builder, Trip Page, Wishlist heart and page, Guest Portal, Marketing Cards, Review Insights, Vibe Profile, Booking Preloader.

A few standard modules use !important internally on specific properties (Rate Comparison and the Wishlist page most of all). If an override doesn’t take there, matching !important is the fix.

Color settings in the admin #

Three modules have a color picker in their settings, and that is the first place to change their accent color:

  • Cart Abandonment > Button Color sets the reminder card’s CTA and icon tint.
  • Price Drop Alerts > Button Color sets the trigger and modal accent.
  • Side Panel > Heart Color sets the wishlist heart fill.

When one of these fields is filled in, its value wins over CSS you write for the matching variable. Change the setting rather than fighting it; if you must override from CSS anyway, use !important.

Theming variables #

Many modules read their colors and dimensions from CSS custom properties with sensible defaults. Set them from your own CSS in a :root rule and the module picks them up. Variables can be added or renamed as modules evolve, so re-check this page after major updates.

:root {
    --hrck-tb-accent: #0a7d4f;
    --hrck-portal-accent: #0a7d4f;
}
  • Cart Abandonment: --hrck-cart-accent
  • Price Drop Alerts: --hrck-price-alerts-color
  • Side Panel wishlist heart: --hrck-side-panel-heart-color
  • Split Cost Calculator: --hrck-sc-accent, --hrck-sc-accent-hover, --hrck-sc-accent-light, --hrck-sc-amount, --hrck-sc-label, --hrck-sc-divider, --hrck-sc-family-bg, --hrck-sc-warning
  • Contact Form: --hrck-cf-accent, --hrck-cf-accent-hover, --hrck-cf-text, --hrck-cf-label, --hrck-cf-border, --hrck-cf-error, --hrck-cf-success, --hrck-cf-bg, --hrck-cf-field-bg
  • Booking Reminder: --hrck-br-accent, --hrck-br-accent-hover, --hrck-br-text, --hrck-br-label, --hrck-br-border, --hrck-br-error, --hrck-br-success, --hrck-br-bg, --hrck-br-field-bg, --hrck-br-outline
  • Rate Comparison: --hrck-header-bg, --hrck-savings-color, --hrck-highlight-color, --hrck-diff-color, --hrck-font-direct, --hrck-font-saving
  • Guest Portal: --hrck-portal-canvas, --hrck-portal-surface, --hrck-portal-text, --hrck-portal-text-secondary, --hrck-portal-text-tertiary, --hrck-portal-accent, --hrck-portal-accent-hover, --hrck-portal-border, --hrck-portal-border-light, --hrck-portal-success, --hrck-portal-success-bg, --hrck-portal-error, --hrck-portal-error-bg, --hrck-portal-shadow, --hrck-portal-shadow-hover, --hrck-portal-radius, --hrck-portal-font-display, --hrck-portal-font-body
  • Trip Builder and Trip Page: --hrck-tb-accent, --hrck-tb-accent-strong, --hrck-tb-accent-soft, --hrck-tb-ring, --hrck-tb-ink, --hrck-tb-muted, --hrck-tb-faint, --hrck-tb-line, --hrck-tb-line-soft, --hrck-tb-radius-card, --hrck-tb-radius-control, --hrck-tb-shadow-card, --hrck-tb-shadow-pop, --hrck-tb-ease
  • Property Finder: --hrck-pf-bg, --hrck-pf-focus-bg, --hrck-pf-border, --hrck-pf-text, --hrck-pf-placeholder, --hrck-pf-icon, --hrck-pf-hover-bg, --hrck-pf-hover-text, --hrck-pf-radius, --hrck-pf-max-width, --hrck-pf-max-height
  • Booking Preloader (skeleton shown while the booking widget loads): --hrck-widget-padding, --hrck-skel

Protected modules #

Guest Menu #

Pill icon button, dropdown, sign-in modal, and toast, rendered inside your theme’s header nav.

  • Containers: .hrck-guest-menu, .hrck-guest-modal, .hrck-guest-toast
  • Children: .hrck-guest-menu-button, .hrck-guest-menu-dropdown, .hrck-guest-menu-item, .hrck-guest-menu-account, .hrck-guest-modal-dialog

Cart Abandonment reminder #

Fixed bottom-overlay card reminding a guest about their in-progress booking.

  • Container: .hrck-cart-reminder (states: .hrck-cart-reminder--visible, --linked, --modal-hidden)
  • Children: .hrck-cart-reminder__inner, .hrck-cart-reminder__content, .hrck-cart-reminder__cta, .hrck-cart-reminder__dismiss, .hrck-cart-reminder__media, .hrck-cart-reminder__message

CTA stack #

Layout coordinator that stacks the other tools’ floating triggers; it owns positioning only.

  • Container: .hrck-cta-stack (--desktop / --mobile variants)
  • Item wrapper: .hrck-cta-item (visible state: .hrck-cta-visible)

Side Panel wishlist drawer #

Saved and recently-viewed properties in a slide-out drawer.

  • Containers: .hrck-side-panel-tab, .hrck-side-panel, .hrck-side-panel-backdrop
  • Children: .hrck-panel-card, .hrck-panel-card-title, .hrck-panel-card-price, .hrck-panel-empty, .hrck-panel-wishlist-btn

Split Cost Calculator #

Trigger plus modal for splitting a trip’s cost across a group.

  • Containers: .hrck-split-cost-trigger, .hrck-sc-modal (open state: .hrck-sc-modal--open)
  • Children: .hrck-sc-family-card, .hrck-sc-family-header, .hrck-sc-family-stepper, .hrck-sc-bedroom-warning

Price Drop Alerts #

Trigger plus modal where guests subscribe to price-drop emails.

  • Containers: .hrck-pa-cta-container, the modal #hrck-price-alerts-modal
  • Children: .hrck-pa-cta-btn, .hrck-pa-modal, .hrck-pa-progress, .hrck-pa-consent-label

Contact Form #

Trigger plus modal contact form.

  • Containers: .hrck-contact-trigger, .hrck-cf-modal (open state: .hrck-cf-modal--open)
  • Children: .hrck-cf-field, .hrck-cf-modal-header, .hrck-cf-progress-bar, .hrck-cf-confirmation
  • The module’s settings also include a Button CSS field for custom trigger styling; rules you enter there need !important to take effect.

Booking Reminder #

Trigger plus modal for “remind me later” booking capture.

  • Containers: .hrck-br-trigger, .hrck-br-modal (open state: .hrck-br-modal--open)
  • Children: .hrck-br-field, .hrck-br-modal-header, .hrck-br-disclaimer, .hrck-br-confirmation

Standard modules #

Rate Comparison #

OTA price comparison badge and modal near the booking widget, with desktop, mobile, and sticky variants.

  • Containers: .hrck-rate-comparison-wrapper, .hrck-rate-comparison; badge variants .hrck-desktop-badge, .hrck-mobile-badge
  • Children: .hrck-best-price, .hrck-direct-container, .hrck-collapsed-compare, .hrck-header
  • Uses !important internally on several properties; match it when an override doesn’t take.

Promo Bar #

Top or bottom announcement bar with countdown.

  • Container: .hrck-promo-bar (--top / --bottom / --idle)
  • Children: .hrck-promo-bar__headline, .hrck-promo-bar__cta, .hrck-promo-bar__countdown-digits, .hrck-promo-bar__dismiss

Property Finder #

Property search box with autocomplete dropdown.

  • Container: .hrck-pf-wrapper
  • Children: .hrck-pf-input, .hrck-pf-dropdown, .hrck-pf-option

Trip Builder (guest widget) #

Bundle-builder widget with compare bar and modal.

  • Containers: .hrck-tb-guest, .hrck-tb-modal, .hrck-tb-compare-bar
  • Children: .hrck-tb-bundle, .hrck-tb-bundle__header, .hrck-tb-btn--primary, .hrck-tb-modal__panel

Trip Page #

Post-booking trip management cards.

  • Container: .hrck-trip-card
  • Children: .hrck-trip-card__body, .hrck-trip-card__price, .hrck-trip-card__book-btn, .hrck-trip-card__booked-check

Wishlist heart #

The save/heart toggle on property cards.

  • Containers: .hrck-wishlist-heart, .hrck-wishlist-save
  • States: .hrck-heart-active, .hrck-heart-animating

Wishlist page #

Full saved-properties grid with notes and voting.

  • Container: .hrck-wishlist-page
  • Children: .hrck-wishlist-grid, .hrck-wishlist-card, .hrck-wishlist-toolbar, .hrck-inline-note, .hrck-wishlist-voting
  • Uses !important internally on several properties.

Guest Portal #

The signed-in guest account and alerts dashboard.

  • Container: .hrck-portal (--sign-in variant)
  • Children: .hrck-portal-card, .hrck-portal-btn, .hrck-pa-row, .hrck-pa-property

Marketing Cards #

Promotional banner and CTA blocks placed via shortcode or block.

  • Container: .hrck-marketing-card
  • Children: .hrck-mc-media, .hrck-mc-title, .hrck-mc-cta, .hrck-mc-eyebrow

Review Insights #

Trust badge, FAQ accordion, review summary, and “best for” tags.

  • Independent widgets rather than one container: .hrck-ri-trust-badge, .hrck-ri-faq, .hrck-ri-best-for, .hrck-ri-callout-pills, .hrck-ri-email-review

Vibe Profile #

Full-screen swipe quiz for guest preference matching.

  • Container: .hrck-vibe-card
  • Children: .hrck-vibe-btn-like, .hrck-vibe-btn-skip, .hrck-vibe-card-overlay, .hrck-vibe-complete

Booking Preloader #

Skeleton shimmer shown while the HomeRunner booking widget loads. It styles the booking widget’s own markup, so its theming surface is the two variables listed above (--hrck-widget-padding, --hrck-skel).

More styling references #

Machine-readable version: all four styling references are also published as a single plain-text file at homerunner.io/llms-styling.txt. Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately.