Cardinal Locator

Style Settings

Style Settings controls how the locator looks. Choose a preset, set your accent color, corners, layout and font, and see the result in the live preview before you save.

Go to Settings › Cardinal Locator › Style Settings. Basic options are at the top; every other style option is in Advanced styling below them.

Style presets

  • Modern: a framed layout in one of three arrangements (see Layout below), lettered results with matching map pins, and a highlighted selected result. It uses your accent color, corner style and fonts. New installs start on Modern.
  • Classic: the original look. Sites that were already using Cardinal Locator stay on Classic after updating, so CSS written for it keeps working.

Switching from Classic to Modern changes the locator’s markup classes and stylesheet, so custom CSS written for Classic may need adjusting. Check the preview, and your site, after switching.

Appearance options

These apply to the Modern preset.

  • Accent color: buttons, links, the selected result and focus outlines. Button text switches between white and dark automatically, and if your color is too light to read as text, links and focus outlines use a darker shade of it. The setting explains when that happens.
  • Corners: square, rounded or pill-shaped fields, buttons and frame.
  • Layout: how the search, map and results are arranged.
    • Map and list: the search form across the top, with the map and the location list side by side or stacked. List position puts the list to the right of, to the left of, or below the map.
    • Sidebar: search, filters and results in one panel beside a full-height map. Only the list scrolls, so the search stays in view.
    • Overlay: the search and results float as cards over a full-width map. Results are fitted to the open part of the map, and Google’s map controls move away from the cards.
  • Font: Match my theme uses your theme’s body font; Plugin default uses the visitor’s system font.

For Sidebar and Overlay, Sidebar position or Panel position puts the panel on the right or the left, and filters sit behind a Filters button that shows how many are in use. In narrow columns and on small screens, every layout stacks: search, then the map, then the results.

Map style (both presets): the map’s own colors come from Google. To change them, create a map style in Google Cloud, attach it to a Map ID and enter the Map ID under Advanced styling. The note under Appearance shows which styling the map uses and links straight to the Map ID field.

Live preview

The preview updates as you change settings, before you save. It shows sample locations with your marker images (custom, category and active markers, at the dimensions you set) and, with block themes, your theme’s font. Use Desktop and Mobile to check both layouts. Map tiles and Map ID styling only appear on your site.

Advanced styling

The panel opens automatically when any of these are in use:

  • Map ID: style the map in Google Cloud and use Advanced Markers.
  • Custom map styling and Map styles path: a JavaScript styling array file. The file is checked when you save; if it’s missing or isn’t valid JSON, the previous path is kept and the screen tells you why.
  • Custom map location marker: one image for every marker (overrides category markers), with optional dimensions.
  • Custom location category marker images: upload an image per category under Locations › Categories, with optional dimensions.
  • Switch active marker icon: a different image for the selected location.
  • Display control link: the Cardinal Locator link on the map.
  • List background colors 1 and 2: alternating row colors (Classic only).

Marker images without dimensions display at 32 × 32 pixels. For sharp markers on high-density screens, upload images at least twice the dimensions you set.

Customizing Modern with CSS

Modern is built on CSS custom properties, so most adjustments are one line in your theme’s CSS (or Appearance › Customize › Additional CSS):

.bh-sl-container.bh-sl-preset-modern {
	--bh-sl-map-height: 640px;   /* default 560px */
	--bh-sl-list-width: 400px;   /* default 360px */
	--bh-sl-radius: 12px;        /* frame corners */
	--bh-sl-surface-2: #f3efec;  /* form background */
}

Other properties: --bh-sl-text, --bh-sl-muted, --bh-sl-border, --bh-sl-border-strong, --bh-sl-surface, --bh-sl-map-bg and --bh-sl-radius-control. Set the accent color in Style Settings rather than in CSS, so the readable text and link shades are calculated for it.

Accessibility

Modern meets WCAG 2.2 AA color contrast with the default and any custom accent color, keeps visible keyboard focus on every control, underlines links, supports Windows High Contrast mode and respects reduced-motion preferences. Keep these in mind when overriding its CSS.

Last updated

· Suggest an edit