Skip to main content
View Categories

CSS Class Reference

Table of Contents

Every HomeRunner widget renders with stable, prefixed CSS classes, so you can restyle any part of it with plain CSS. No template overrides, no PHP.

This page lists every class worth targeting, grouped by widget. Use it two ways: look up the element you want to change, or paste this whole page into an AI assistant (Claude, ChatGPT) together with a description of the look you want, and let it write the CSS for you. The class descriptions below give the assistant everything it needs, so you can skip hunting through your browser inspector.

Put your rules in Appearance > Customize > Additional CSS, or in a code snippets plugin such as WPCode. Your changes live in the theme, not the plugin, so they survive HomeRunner updates.

Before you start #

  • Scope rules under the widget’s top-level container (start Explorer selectors with .hfse, booking widget selectors with .homelocal-booking-widget, and so on) so they don’t leak into the rest of your site.
  • Classes prefixed hk- or uk- belong to the UIkit framework the widgets are built on. Prefer the HomeRunner classes on this page; the few cases where a hk- class is the only available hook are called out below.
  • A lot of the markup (property cards, calendars, map pins) is rendered by JavaScript after the page loads. That changes nothing about how you style it.
  • State classes such as .selected or .map-visible are added and removed while a visitor interacts with the widget. Combine them with a structural class to style behavior, for example .day.selected for the picked dates.
  • If a rule doesn’t take effect, specificity is the usual culprit. Add the container class in front of your selector before reaching for !important.

A quick example, changing the property card title and price color on the Explorer:

.hfse .hfse-property-title {
    font-size: 1.15rem;
    font-weight: 600;
}
.hfse .hfse-property-price {
    color: #0a7d4f;
}

Property Explorer #

The search widget: filter bar, results grid, and optional map. Everything lives under the hfse- prefix.

Top-level containers

  • .hfse – root wrapper of the entire Explorer (search form, results grid, map)
  • .hfse-body – inner content column holding the filters and results grid
  • .hfse-sidebar – the map column, hidden when the map is off

Filter bar #

  • .hfse-filters – the outer form for the standard filter search
  • .hfse-form – wrapper around the secondary filter row and all filter modals
  • .hfse-form-primary-fields – row of primary fields (where, dates, guests)
  • .hfse-form-submit-field-container – wrapper around the search button
  • .hfse-form-secondary-fields – row of secondary controls (filters button, start over, sort, map toggle), with .hfse-form-secondary-fields-left, .hfse-form-secondary-fields-center, and .hfse-form-secondary-fields-right sub-groups
  • .hfse-form-meta – the nights count, properties count, and sort order cluster
  • .hfse-form-nights-count-container, .hfse-form-nights-count-icon, .hfse-form-nights-count-text – the “N nights” indicator
  • .hfse-form-properties-count-container, .hfse-form-properties-count-icon, .hfse-form-properties-count-text – the “N properties” indicator
  • .hfse-form-order-field-container, .hfse-form-order-select – sort-by dropdown
  • .hfse-form-additional-filters-btn, .hfse-form-additional-filters-btn-icon, .hfse-form-additional-filters-btn-text – the Filters button that opens the more-filters modal
  • .hfse-form-additional-filters-state – small badge inside the Filters button showing an active-filter count
  • .hfse-form-reset-btn – the Start Over button
  • .hfse-form-map-toggle-btn, .hfse-form-map-toggle-btn-icon, .hfse-form-map-toggle-btn-text – the Show/Hide Map button
  • .hfse-form-favorites-toggle-btn – favorites-only filter toggle (heart)
  • .hfse-form-featured-toggle-btn – featured-only filter toggle (star)

Location field and modal #

  • .hfse-form-zone-field-container, .hfse-form-zone-field-label, .hfse-form-zone-field-control, .hfse-form-zone-icon – the “Where” input row
  • .hfse-form-zone-options, .hfse-form-where-options – the location picker modal (zone mode and taxonomy mode)
  • .hfse-form-zone-input, .hfse-form-zone-input-fields – search box inside the location modal
  • .hfse-form-zone-selections, .hfse-form-zone-selection – chips for each selected location
  • .hfse-form-zone-keyword – free-text keyword input inside the location modal
  • .hfse-form-zone-subfield, .hfse-form-zone-subfield-locations – grouped location suggestion list
  • .hfse-form-zone-label – heading above a location group
  • .hfse-form-zone-btn – one selectable location suggestion row
  • .hfse-form-zone-city – city sub-label under a suggestion
  • .hfse-form-zone-location – layout row for a suggestion
  • .hfse-form-where-item – one checkbox row in the plain location picker
  • .hfse-form-location-subfield – wrapper for the location checkbox list

Other filter modals #

  • .hfse-form-modal – shared base class on every filter modal
  • .hfse-form-date-options – date range picker modal
  • .hfse-form-guests-options – guests modal (adults, children, pets)
  • .hfse-form-additional-filters-options – more-filters modal (bedrooms, bathrooms, amenities, type, price), with .hfse-form-additional-filters as its inner wrapper
  • .hfse-all-amenities-btn – the show-all-amenities expand link
  • .hfse-field-grid – grid layout for amenity and type checkbox lists
  • .hfse-number-with-control – stepper control wrapper; inside it, .number-input is the count field and .reduce-btn / .increase-btn are the minus and plus buttons
  • .field-control, .field-label – generic input and label wrapper pair reused across filter fields
  • .type-label, .amenity-label, .bedrooms-label, .bathrooms-label – labels on the property type, amenity, and count filter rows
  • .filter-feature, .filter-group, .filter-type – wrappers around each amenity and type checkbox

AI and relevance search bars #

  • .hfse-ai-form, .hfse-relevance-form – the AI-powered and relevance free-text search bars (alternates to the standard filter form)
  • .hfse-ai-form-fields, .hfse-ai-form-input-container, .hfse-ai-form-button-container – layout, input, and button wrappers for the AI bar
  • .ai_search_input, .ai_search_submit – the AI search input and submit button
  • .hfse-relevance-form-fields, .hfse-relevance-form-input-container, .hfse-relevance-form-button-container – the same wrappers for the relevance bar
  • .relevance_search_input, .relevance_search_submit – relevance search input and submit button
  • .ai_recent_search, .ai_recent_search_items, .ai_recent_search_item – dropdown of recent AI searches
  • .relevance_recent_search, .relevance_recent_search_items, .relevance_recent_search_item – dropdown of recent relevance searches
  • .hfse-ai-search-loader-modal – full-screen thinking modal while an AI search runs
  • .hd-lottie – animation container inside that modal

Results grid and property cards #

  • .hfse-properties-container – outer wrapper around the results grid
  • .hfse-properties – the row containing all property cards
  • .hfse-property-container – one grid cell wrapping a single card
  • .hfse-property-card – the clickable card itself
  • .hfse-property-media – image area at the top of the card
  • .hfse-property-slideshow, .hfse-property-slideshow-item, .hfse-property-slideshow-image, .hfse-property-slideshow-prev-btn, .hfse-property-slideshow-next-btn, .hfse-property-slideshow-dotnav – the in-card photo slideshow and its controls
  • .hfse-property-favorite-toggle-btn – heart button overlaid on the card image
  • .hfse-property-body – text content area below the image
  • .hfse-property-title – property name
  • .hfse-property-subtitle – secondary line under the title
  • .hfse-property-meta, .hfse-property-meta-primary, .hfse-property-meta-secondary – grouped rows of specs and taxonomy terms
  • .hfse-property-bedrooms, .hfse-property-bathrooms, .hfse-property-guests – individual spec values
  • .hfse-property-locations, .hfse-property-types – location and property type chips
  • .terms – the tag row inside the primary meta group
  • .hfse-property-labels, .hfse-property-groups, .hfse-property-group – badge row for property collections
  • .hfse-property-rating, .hfse-property-rating-icon, .hfse-property-rating-number – star rating display
  • .hfse-property-price-container, .hfse-property-price, .hfse-property-price-sep, .hfse-property-price-total – the price line
  • .hfse-property-tax-note – the small taxes-and-fees disclaimer under the price
  • .hfse-properties-more-container, .hfse-properties-more-btn – the Load More button and its wrapper
  • .hfse-properties-no-items – empty state when a search returns nothing
  • .hfse-properties-slider-prev-btn, .hfse-properties-slider-next-btn – carousel arrows in the slider layout
  • .template-default, .template-slider – layout template modifiers on the widget (standard grid vs. horizontal slider)
  • .grid-with-map-{breakpoint}-{n} and .grid-without-map-{breakpoint}-{n} – responsive cards-per-row modifiers on .hfse, where breakpoint is portrait, landscape, tablet, desktop, or large and n is 1 to 6

Map #

  • .hfse-map-container – map canvas wrapper
  • .hfse-map – the positioned map surface
  • .hfse-map-badge, .hfse-map-badge-price, .hfse-map-badge-icon, .hfse-map-badge-image – the price and pin markers on the map
  • .hfse-map-tooltip, .hfse-map-tooltip-content, .hfse-map-tooltip-close-btn – the property preview popup on marker click
  • .hfse-property-infowindow-container, .hfse-property-infowindow-header, .hfse-property-infowindow-header-overlay, .hfse-property-infowindow-image, .hfse-property-infowindow-price, .hfse-property-infowindow-body – the mini property card inside a map popup
  • .map-control, .map-control-checkbox, .map-control-input-container – custom map controls such as search-as-I-move
  • Vendor map classes you may occasionally touch for cosmetic popup tweaks: .gm-style-iw, .gm-style-iw-d, .gm-ui-hover-effect (Google Maps), .leaflet-popup-content, .leaflet-popup-content-wrapper, .leaflet-bar (Leaflet)

Date picker inside the filter modal #

  • .datepicker, .datepicker__inner, .datepicker__topbar, .datepicker__month, .datepicker__buttons – the date range picker structure
  • .datepicker__month-day--valid, .datepicker__month-day--invalid, .datepicker__month-day--today – per-day cell states
  • .datepicker__month-day--selected, .datepicker__month-day--first-day-selected, .datepicker__month-day--last-day-selected – selected check-in and check-out day states
  • .datepicker__month-button--prev, .datepicker__month-button--next – month navigation arrows
  • .datepicker__clear-button, .datepicker__close-button, .datepicker__submit-button – the modal action buttons
  • .datepicker__info--selected-label, .datepicker__info-text--selected-days, .datepicker__info--feedback – the selected-range summary text

Price slider #

  • .hfse-form-price-slider-container, .hfse-form-price-slider, .hfse-form-price-slider-text – wrapper, slider track, and the price range readout
  • .noUi-connect – the filled portion of the track between the two handles
  • .noUi-handle – the draggable thumbs (min and max)

Loader #

  • .hfse-loader – full-panel loading overlay, shown while .hfse carries .loading
  • .lds-ripple – the ripple spinner inside it

Explorer state classes #

  • .with-grid / .without-grid – on .hfse: whether the results grid renders
  • .with-map / .without-map – on .hfse: whether a map is configured
  • .map-visible / .map-hidden – on .hfse: current shown or hidden state of the map panel
  • .map-left / .map-right – on .hfse: which side the map sits on
  • .sticky-filter – on .hfse: pins the filter bar to the top on scroll
  • .loading – on .hfse: a search request is in flight
  • .active – on the favorites and featured toggles and on recent-search items: the toggle is on, or the suggestion is highlighted
  • .hfse-selected – on .hfse-form-zone-btn: the currently chosen location suggestion
  • .modified – on the Filters button: one or more extra filters are applied
  • .favorite – on the favorite toggle: this property is favorited
  • .property-loading – on .hfse-property-container: the card is in a loading state
  • .hfse-map-badge-focus / .hfse-map-badge-parent-focus – on a map badge: the marker or its matching card is hovered

Booking Widget #

The date, guest, and price quote widget shown on a property page.

Top-level containers

  • .homelocal-booking-widget-container – outer wrapper rendered by the shortcode or page builder element
  • .homelocal-booking-widget – the widget itself
  • .homelocal-sticky-booking-widget-container, .homelocal-sticky-booking-widget – the sticky bar variant pinned to the bottom of the screen on mobile

Structure #

  • .homelocal-booking-widget-body – main content block (dates, guests, coupon, quote)
  • .rent-unit – the per-night or total rate display
  • .rent-deleted – a struck-through original rate shown next to a discounted one
  • .widget-loader – loading spinner before the widget’s data resolves
  • .booking-coupon-btn – the Apply button next to the coupon input
  • .checkout-button – the Book Now button
  • .addon, .addon-name, .addon-price – one add-on line item, its label, and its price
  • .addon-control, .addon-input – the add-on quantity stepper and its numeric field
  • .addon-reduce-btn, .addon-increase-btn – the add-on minus and plus buttons
  • .modal-button – the button in the sticky mobile bar that opens the full widget

Currency and payment provider modal #

  • .homelocal-booking-widget-checkout-modal – the modal itself
  • .checkout-header – modal title
  • .homelocal-booking-widget-checkout-item – one selectable provider card
  • .checkout-icon, .checkout-label, .checkout-input – provider logo, name, and radio input

Booking widget state classes #

  • .hfse-loading – on .homelocal-booking-widget: dates are recalculating
  • .hk-selected – on a provider card in the currency modal: the chosen option (this is the one place where a hk- class is the only hook)

Checkout #

The checkout page rendered by the checkout shortcode or block.

Top-level containers

  • #homelocal-checkout-form – the checkout form (an id, and the scoping hook the plugin’s own styles use)
  • .homelocal-checkout-sidebar – the column with the property summary and booking recap
  • .homelocal-checkout-sections – the stacked checkout sections (overview, guest info, payment, agreement, policies)

Structure #

  • .homelocal-checkout-overview – the sticky property and price summary card
  • .homelocal-checkout-button – the Complete Booking button, with .button-text as the label span inside it
  • .cancellation-policy, .cancellation-policy-title – one cancellation policy block and its heading
  • .hr-checkout-acceptance-label – label next to the terms acceptance checkbox
  • .hr-checkout-rental-agreement-label, .hr-checkout-rental-agreement-checkbox – the rental agreement label and checkbox

Checkout state classes #

  • .homelocal-loading – on the checkout form: submission in progress, animates the submit button
  • .hk-sticky – on the overview card: it has stuck to the top of the viewport on scroll

Availability Calendar #

The inline availability calendar (single property, multi calendar, and property calendar shortcodes).

Top-level containers

  • .homelocal-availability-calendar-container – outer wrapper
  • .homelocal-availability-calendar – the calendar root
  • .homelocal-availability-calendar-modal – the popup variant

Structure #

  • .calendar-heading – month and year heading row
  • .calendar-picker – the interactive date surface
  • .calendar-table – the grid of weeks
  • .calendars – wrapper when two months show side by side, with .calendar as one month’s column
  • .week, .week-days – one row of days, and the weekday name header row
  • .day, .day-of-month, .date – a day cell, the real-day variant, and the number label inside it
  • .day-name – a weekday abbreviation in the header
  • .next-btn, .prev-btn – month navigation arrows
  • .price – nightly rate inside a day cell
  • .local-time – the property timezone label above the calendar
  • .discount-text-container, .discount-icon, .discount-text – the length-of-stay discount callout
  • .homelocal-availability-calendar-loader – the loading skeleton

Day state classes (on .day cells) #

  • .selectable / .selectable-last – the day can be picked, or is the last selectable night before a gap
  • .selected – part of the currently selected range
  • .hover – under the pointer during range selection
  • .unavailable – cannot be booked
  • .disabled – not interactive (past date or outside the allowed range)
  • .booked – already reserved
  • .pass-through / .pass-through-temp – allowed to pass through per minimum-stay rules
  • .checkin, .checkin-available, .checkin-blocked, .checkin-selected, .checkin-booked – check-in specific states
  • .checkout, .checkout-available, .checkout-blocked, .checkout-booked – check-out specific states
  • .no-uikit – on the calendar root: renders without the UIkit reset, for embedding in non-UIkit themes

Range Calendar #

The check-in and check-out popup picker used by the Booking Widget and Explorer date fields. It shares the day-state vocabulary above.

Top-level container

  • .homelocal-range-calendar – the popup root

Structure #

  • .calendar-heading, .calendar-picker, .calendar-table, .calendars, .calendar – same structure as the Availability Calendar
  • .week, .week-days, .day, .day-of-month, .date, .day-name – same cell and row structure
  • .next-btn, .prev-btn – month navigation arrows
  • .homelocal-tip, .tip-content, .tip-arrow – the tooltip bubble showing the nightly rate or minimum-stay note on hover

Range calendar state classes #

  • .checkin / .checkout – the selected endpoints
  • .selected / .hover – inside the selected or previewed range
  • .disabled / .unavailable / .booked – non-selectable days
  • .no-uikit – render without the UIkit reset

User Dashboard #

The logged-in guest area (reservations, favorites, account settings).

  • .homelocal-user-nav – the dashboard side navigation list
  • The dashboard pages themselves are laid out with UIkit utility classes, so page-level restyling usually means targeting .homelocal-user-nav plus standard UIkit selectors scoped to your dashboard page.

Property pages #

  • .hr-page-body – wraps both the single property template and the property archive template. The one shared hook for page-wide overrides on property pages.

Not covered here #

This page covers the HomeRunner plugin’s own widgets. Conversion Kit, Toolkit, and AI Concierge modules ship their own class families; each has its own styling reference below.

If a class you found in your inspector isn’t listed here, it is most likely a UIkit utility (hk-/uk-) or a vendor library internal. You can still style it, but the classes above are the stable, intended hooks.

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.