A no-code styling playground that fine-tunes the look of your HomeRunner search bar and property cards so they match your brand and theme.
What it does #
Out of the box, the HomeRunner search bar and property result cards inherit a mix of your theme’s styles and HomeRunner’s own defaults. That is fine on many sites, but on others the corners, colors, fonts, or spacing do not quite line up with the rest of your brand, and the usual fix is custom CSS.
HomeRunner Skin gives you one place to adjust how the search experience and property cards look, without touching CSS. It applies a clean set of style overrides on top of the standard HomeRunner output, scoped so it only affects HomeRunner’s own elements and leaves the rest of your site alone.
You work in a side-by-side editor: change a setting on the left, and a live preview of the search bar and a sample property card updates on the right. When you like what you see, you save and it goes live. For example, you can set property card images to a square 1:1 ratio, switch the brand color to your own dark teal, and hide the field labels in the search bar, all from the same screen.
Each value is individually adjustable, and you can save a combination as a named preset to back up, restore, or move between sites.
How to turn it on #
1. Open the Toolkit Hub #
Go to HomeRunner → Toolkit in your WordPress admin.
2. Enable HomeRunner Skin #
Switch on HomeRunner Skin in the module list, then open its settings panel.
3. Choose how it applies on the front end #
The panel opens with Apply the skin on the front-end already on, using the Default preset. The Default preset is theme-neutral: it carries HomeRunner’s tidy-up rules but does not impose any colors or fonts of its own, so visitors will not see a sudden change until you start customizing. While you are experimenting with a bigger redesign, you can turn Apply the skin on the front-end off so visitors keep seeing the current look until you are ready.
4. Customize, then save #
Adjust the settings, or load a built-in preset as a starting point, and watch the live preview. Click Save Settings when you are happy.
Settings #
Settings are grouped into panels so you can focus on one area at a time. Every value has its own control, with sliders and color pickers showing a live readout as you adjust them.
| Setting | What it controls | ||
|---|---|---|---|
| Apply the skin on the front-end | The master switch that makes your saved styling visible to visitors. On by default once the module is enabled. Turn it off to keep the current look live while you experiment. | ||
| Brand & Global | Shared colors (primary, hover, text, muted, surface, borders, dividers) and the body font family used across both the search bar and property cards. | ||
| Searchbar | Everything that styles the property search form: search and filter button colors, button radius and size, input background, radius and font size, field label and divider visibility, search bar shape and shadow, the filters modal, field spacing, and whether the bar is inline or floating (with an optional sticky-on-scroll behavior and floating max width). | ||
| Property card | Everything that styles the result cards: title font and size, card corner radius and shadow, image aspect ratio (square, 4:3, 16:9, and others) that overrides the slideshow’s natural-ratio sizing so every card image locks to the same shape, slideshow radius and dot size, meta icon size and layout, the location/city color (inherits the card text color by default so it matches the property-type label), the guests / beds / baths row’s bottom-anchored alignment with a consistent gap between items, price arrangement and position, and the visibility of the subtitle, type icon, dividers, and tax line. | ||
| Meta spec style | How the guests / beds / baths line renders inside the card. Icon (default) keeps the small icons. Text drops the icons in favor of inline labels with pipe separators (for example “Sleeps 4 | 2 BR | 1 BA”). |
| Meta spec font size | A dedicated size control (10-24px) for the guests / beds / baths line, so you can shrink or enlarge it independently of the card title or other secondary meta. | ||
| Image dimensions | The pixel dimensions HomeRunner uses for property images in the map view, the Explorer grid, and checkout. These write through to your HomeRunner plugin’s Property Image settings. Changing them starts a background image regeneration, so existing thumbnails will not appear at the new size until that finishes. | ||
| Presets | Save your current settings as a named preset, load a preset to replace the current values, or delete a custom one. Ships with two built-in presets: Default (the theme-neutral baseline) and Editorial Square (square corners, a dark-teal brand color, serif titles, and 1:1 card images). | ||
| Import / Export | Export the values currently shown in the form as a JSON file, or import a JSON file to save it as a new custom preset. Useful for copying a look from one site to another. |
Tips #
- Turn off Apply the skin on the front-end while you tune a large change, then switch it on once you are happy, so visitors only ever see a finished look.
- Use a built-in preset as a head start: load Editorial Square to see how the controls work together, then adjust from there.
- The live preview is a close mock of the real cards and search bar, but always confirm the final result on an actual Explorer page and property listing.
- Save a preset, or export your settings as JSON, before a big round of changes so you have an easy restore point.
- HomeRunner Skin is being expanded over time. The search bar and property cards are covered today; more areas are on the way.
- Pair it with Label Designer for badges on those same cards, and see Searchbar Pro for added search behavior. Back to the Toolkit overview or Under the Hood.