Every guest-facing Conversion Kit component 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:
Protected modules: Guest Menu, Cart Abandonment reminder, the CTA stack, Side Panel wishlist drawer, Split Cost Calculator, Price Drop Alerts, Contact Form, Booking Reminder, Trip Planner, Compare Homes.
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, Availability Watchers.
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 #
Four 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.
- Trip Planner > Accent Color sets the accent across the wizard, the results, and the plan email.
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.
- 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 - Trip Planner:
--hrck-tp-accentfollows the Accent Color setting and--hrck-tp-display-fontfollows the Display Font setting, so change those two in the settings panel, not from CSS. The other tokens live on the.hrck-tproot and change with the Skin setting:--hrck-tp-accent-ink,--hrck-tp-accent-soft,--hrck-tp-accent-line,--hrck-tp-ink,--hrck-tp-muted,--hrck-tp-border,--hrck-tp-bg,--hrck-tp-surface,--hrck-tp-surface-soft,--hrck-tp-error,--hrck-tp-error-soft,--hrck-tp-band,--hrck-tp-band-ink,--hrck-tp-band-muted,--hrck-tp-band-line,--hrck-tp-band-text,--hrck-tp-subtitle,--hrck-tp-radius,--hrck-tp-radius-sm,--hrck-tp-shadow,--hrck-tp-shadow-lift,--hrck-tp-shadow-pop. The soft and line accent tints are derived from the accent automatically. Because Trip Planner is protected, setting one of these tokens from your own CSS needs!importanton the.hrck-tproot. - Compare Homes: no public variables. The accent follows the module’s Accent color setting, so change it there, not from CSS. Its other
--hrck-ch-*values are internal and are declared again on each of its parts, so a:rootrule does not reach them. - Booking Preloader (skeleton shown while the booking component 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/--mobilevariants) - 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
!importantto 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
Trip Planner #
The three-step itinerary wizard, its results view with the email gate, and the standalone plan page a guest reaches from the plan email. Everything mounts inside one .hrck-tp root. Start with the settings: Skin (Classic or Editorial), Accent Color, and Display Font cover most restyling. The module’s own rules use no !important, but they are protected, so a direct rule against these classes needs !important like the other protected modules.
- Container:
.hrck-tp(Editorial skin:.hrck-tp[data-skin="editorial"]) - Wizard:
.hrck-tp-wizard,.hrck-tp-head,.hrck-tp-progress,.hrck-tp-bar(with__fill),.hrck-tp-step(with__actions,__hint),.hrck-tp-fields,.hrck-tp-fieldbtn(with--dates,--guests,__trigger,__value),.hrck-tp-seg,.hrck-tp-radiocard(with--icon,--budget),.hrck-tp-chipand.hrck-tp-chips,.hrck-tp-btn(with--primary,--secondary,--ghost),.hrck-tp-error - Date and guest pickers:
.hrck-tp-dp(with__month,__day,__day--checkin,__day--checkout,__day--in-range),.hrck-tp-gp(with__row,__stepper,__done) - Results:
.hrck-tp-results,.hrck-tp-band(the header band),.hrck-tp-highlights,.hrck-tp-property(the matched home),.hrck-tp-timeline,.hrck-tp-day(with--locked,__card,__theme,__swap),.hrck-tp-actionbar - Other homes:
.hrck-tp-options(the “Other homes that fit your group” list),.hrck-tp-home(one row),.hrck-tp-compare-bar,.hrck-tp-compare(the side-by-side view) - Email gate and confirmation:
.hrck-tp-gate,.hrck-tp-confirm,.hrck-tp-share - Standalone plan page:
.hrck-tp-plan-page,.hrck-tp-plan-body(with--editorialon the page body),.hrck-tp-topbar,.hrck-tp-doc,.hrck-tp-foot
Compare Homes #
The Compare toggle, the + Compare chip and picked outline on each home card, the selection tray, and the side-by-side comparison table. Its pieces sit inside your Explorer cards and results header and on top of the page, so each one is protected on its own. Start with the settings: Accent color, the button text, and how many homes a guest can compare. A direct rule against these classes needs !important like the other protected modules.
- Card parts:
.hrck-ch-pick(the chip, with__add,__added,__face),.hrck-ch-ring(the outline on a picked card) - Toggle:
.hrck-ch-entry(with--inlinein the results header and--pillfor the floating button),.hrck-ch-switch(with__box,__track) for the Show only differences switch - Tray:
.hrck-ch-tray(with__lead,__count,__slots,__actions,__open,__clear),.hrck-ch-slot(one picked home, with__thumb,__name,__remove) - Comparison panel:
.hrck-ch-modal(with__backdrop,__panel,__head,__title,__share,__status,__close),.hrck-ch-modal-open(on the page while the panel is open) - Table:
.hrck-ch-table,.hrck-ch-tr,.hrck-ch-th(with__media,__name,__remove),.hrck-ch-td(with--num),.hrck-ch-price(with__value,__note) - Buttons:
.hrck-ch-btn(with--primary,--ghost)
Standard modules #
Rate Comparison #
OTA price comparison badge and modal near the booking component, 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
!importantinternally 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 component) #
Bundle-builder component with compare bar and modal. The wizard automatically detects a fixed theme header and adds clearance so it doesn’t cover the page title; no setting needed.
- 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 - Group stay inquiry form (inside
.hrck-tb-modal):.hrck-tb-inquiry__form,.hrck-tb-inquiry__grid,.hrck-tb-inquiry__field,.hrck-tb-inquiry__actions,.hrck-tb-inquiry__done - Explorer group-stays banner:
.hrck-tb-banner,.hrck-tb-banner__text,.hrck-tb-banner__heading,.hrck-tb-banner__body,.hrck-tb-banner__cta,.hrck-tb-banner__dismiss. The banner and the short group-stays note that appears inside guest pickers and the booking widget are protected, so your own plain selectors will not override them; add!importantto a direct rule. They have no theming variables.
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
!importantinternally on several properties.
Guest Portal #
The signed-in guest account and alerts dashboard.
- Container:
.hrck-portal(--sign-invariant) - 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 components 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 component loads. It styles the booking component’s own markup, so its theming surface is the two variables listed above (--hrck-widget-padding, --hrck-skel).
Availability Watchers #
Card on the property page where a guest can leave an email to be watched against a date range’s availability, with its own resolved and error states once the watch is set.
- Container:
.hrck-watcher-card - Children:
.hrck-watcher-lead,.hrck-watcher-form,.hrck-watcher-email,.hrck-watcher-note,.hrck-watcher-msg(error state:.hrck-watcher-msg-err),.hrck-watcher-resolved - No CSS variables yet; this module isn’t in the isolation/armor build, so it’s plain CSS and normal overrides work without
!important.
More styling references #
- HomeRunner plugin: CSS Class Reference
- Toolkit Styling Reference
- AI Concierge: Appearance and Theming
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.