Appearance
Sieve ships with an Appearance panel so you can match the filter and the predictive search to your theme without writing CSS. You pick a style preset and four colours; the choices apply to both the [sieve] filter and the [sieve_search] box. A fresh install looks exactly as before, so upgrading changes nothing until you choose to.
Where to find it
Section titled “Where to find it”In the WordPress admin, open Sieve and expand the Appearance panel. Adjust the preset and colours, watch the live preview, then Save settings. If you run a page-cache plugin, clear its cache after changing the appearance.
Style presets
Section titled “Style presets”| Preset | Look |
|---|---|
Default | The built-in look. Emits no extra markup, so it is identical to a plugin with no appearance settings. |
Minimal | Flat and low-chrome: lighter dividers between facets, compact chips. |
Bordered | Each facet sits in a bordered box, with boxed chips and pagination. |
Soft | Rounded corners and gentle shadows on facets, dropdowns and the search results. |
Unstyled | Ships no plugin CSS at all. Your theme styles everything (see below). |
Presets only change structure (borders, corners, shadows, spacing). Colours are controlled separately, so you can combine any preset with any palette.
Colours
Section titled “Colours”Four colours are exposed, each with a colour picker and a live preview:
| Colour | What it affects |
|---|---|
| Accent | Active states, selected options, focus outlines, the search submit button. |
| Border | Facet dividers, input and dropdown borders, chip outlines. |
| Muted text | Result counts and secondary labels. |
| Background | The filter container and the search dropdown background. |
Colours are applied as scoped CSS variables on the widget, inlined once per page right after the stylesheet. Only colours you actually change are emitted, so the default palette adds nothing to the page.
Contrast hint
Section titled “Contrast hint”Because active and selected states paint white text on the Accent colour, the panel shows a non-blocking warning when the accent is too light to read white text against (below the WCAG 4.5:1 ratio). It also flags low contrast between Muted text and Background. The warning is advisory only; you can still save.
Reset to defaults returns the preset to Default and every colour to its original value.
Unstyled mode
Section titled “Unstyled mode”Unstyled withholds the plugin’s stylesheet entirely and hands all styling to your theme. The widgets still ship their semantic classes, so you can target them from your theme’s CSS:
.sieve-app,.sieve-facet,.sieve-chip,.sieve-pagefor the filter..sieve-search,.sieve-search__input,.sieve-search__resultsfor the search.
Keyboard focus outlines and Windows High Contrast (forced-colors) cues are still emitted in this mode, so accessibility is preserved even with no visual styling from the plugin.
Performance
Section titled “Performance”Appearance is built to keep Core Web Vitals intact:
- No extra request. Preset rules live inside the stylesheet the widget already loads; colours are inlined into the page markup. Nothing new is fetched.
- No layout shift. Presets only restyle existing elements; the markup and reserved space are unchanged.
- Backward compatible. With the default preset and untouched colours, the output is byte-identical to a plugin with no appearance settings, so cached pages stay valid.