Skip to main content

Fix theme styles overriding locator fields and buttons

Cliq Store Locator applies a scoped reset inside each .cliq-sl locator so common theme rules do not silently change its buttons, inputs, selects, labels, Glide clear controls, or result cards. Builder values should therefore match the public page without requiring a different design for Astra, Elementor, or another theme.

What the plugin normalizes​

Inside a locator, the frontend normalizes the browser/theme defaults that commonly cause mismatches:

  • button background, border, radius, padding, font, line height, and hover/focus colors;
  • text input, select, and autocomplete control sizing;
  • field label placement and line height across Location, dropdown, radius, and Open now fields;
  • box sizing and inherited typography;
  • small icon controls such as dropdown clear buttons;
  • result wrappers so a Store Card set to 100% width fills its list item.

This reset establishes a predictable base. Settings selected in the Builder are emitted after that base and remain the source of the final component styling.

Check whether a theme still wins​

  1. Open the public locator page and inspect the affected control in browser DevTools.
  2. In Computed, select the incorrect property, such as padding, background-color, border-radius, height, or line-height.
  3. Expand it to identify the stylesheet and selector that supplied the winning value.
  4. Confirm the element is inside .cliq-sl. A locator element moved outside that scope by custom JavaScript will not receive the reset.
  5. Clear theme, page-builder, CDN, and CSS-minification caches before retesting.

A global rule using !important, inline styles injected after the locator, or a selector specifically targeting Cliq classes can intentionally override the plugin. Remove or narrow that rule when possible.

Keep fields consistent while allowing custom sizes​

Open the Search Form in Store Locator → Builder. Use its shared control-height and typography settings for a consistent row, then override an individual field only when the design requires it. Location, Category/Brand/custom dropdowns, and Open now use the same predictable field structure, so their main labels occupy the label row and their interactive controls occupy the control row.

Do not compensate for a theme's global select padding by making only the dropdown taller in the Builder. First verify that caches contain the current Cliq frontend CSS; otherwise the correction will make the same field too tall after the reset loads.

When custom CSS is necessary​

Scope the exception to one locator or one generated widget class instead of styling all site buttons. For example:

.cliq-sl-l-t20 .cliq-sl-count__print {
  /* Site-specific exception for Layout 20. */
}

Avoid broad rules such as .cliq-sl button { ... !important; }: they override Builder-generated colors and can also affect directions, pagination, clear, and accessibility controls.