Once filtering is turned on, FotoGrids gives you full control over how the filter bar looks — the panel it sits in, the spacing around it, and the appearance of every control down to its hover, active, and checked states. This article covers those appearance settings. Turning filtering on and choosing what visitors filter by is covered in the Setting Up Filtering article.
Location Gallery Settings → Filtering → Filter Controls
The control-shape and state-colour settings below follow the Style you chose in Setting Up Filtering. The Buttons, Dropdowns, and Checkboxes styles each have their own shape and colour sections, and only the section for the active style is shown.
The Filter Panel #
These settings style the panel the filters sit inside, independent of the controls within it.
Filter Panel Background
| Setting | Filter Panel Background |
| Default | Transparent |
The background colour of the panel itself. Transparent by default so the panel blends into the page.
Filter Panel Border Radius
| Setting | Filter Panel Border Radius |
| Default | 12px |
| Range | 0–40 |
| Units | px |
Rounds the corners of the filter panel.
Spacing #
A set of spacing controls govern the gaps in and around the filter bar. Each is a responsive control, so you can set different values for desktop, tablet, and mobile.
- Filter Panel Padding — padding inside the filter panel.
- Gap Between Bar and Gallery — space between the filter panel and the grid below or beside it.
- Gap Between Groups — space between filter groups, such as a Tags row and a People row.
- Gap Between Controls — space between individual buttons or checkboxes within a group. Applies to the Buttons and Checkboxes styles.
- Sidebar Width — the width of the filter column when Position is set to Sidebar.
Button Style #
When Style is set to Buttons, these settings control the buttons’ shape and colours.
Shape
The Shape group sets the buttons’ Padding, Border Radius (0–50px, default 4px), and Font Size.
Button States
The Button States sub-tabs let you set colours separately for each state a button can be in:
- Default — background, text colour, border colour, and border width (0–10px, default 1px).
- Hover — the same four properties when the pointer is over the button.
- Active — the same properties when the button’s filter is selected. Border width defaults to 0px so the active state reads as filled.
Dropdown Style #
When Style is set to Dropdowns, the controls split into the trigger button and the popover list it opens.
Trigger Button
The Trigger Button group sets the dropdown trigger’s Padding, Border Radius (0–50px, default 4px), and Border Width (0–10px, default 1px). The Trigger States sub-tabs set background, text, and border colours for the default, hover, and open states.
Popover List
The Popover List group styles the list that opens below the trigger: its Border Radius (0–20px, default 4px), Border Color, Border Width, and a Separator Color for the 1px line drawn between options — set it to transparent to hide the separators. The Option States sub-tabs set background and text colours for each option’s default, hover, and selected states.
Checkbox Style #
When Style is set to Checkboxes, these settings control the checkbox boxes and their states.
Box
The Box group sets the checkbox Size (10–28px, default 16px), Border Radius (0–14px, default 3px — 0 is square, higher values round toward a circle), and Gap to Label (2–24px, default 8px), plus a Border Width (0–10px, default 1px).
Checkbox States
The Checkbox States sub-tabs set colours for each state:
- Default — box background and border colour.
- Hover — background, border, and a checkmark colour shown semi-transparently to preview the checked state on mouseover.
- Checked — background, border, and the colour of the tick mark inside a checked box.
Item Count Badge #
When Show Item Count is on (see Setting Up Filtering), the count next to each option is a small badge with its own appearance settings.
Badge States
The Badge States sub-tabs set the badge’s background and text colours for its default, hover, and active states, so the count stays legible against each button state.
Badge Shape
The badge also has a Font Size, a Border Radius (0–20px, default 3px), and Padding, so you can size the badge to sit neatly alongside the option label.
Developer Reference #
Every setting on this page is applied through a CSS custom property on the Gallery wrapper, so developers can read, override, or lock the filter bar’s appearance from a stylesheet without touching the settings UI. FotoGrids writes the values from your settings into a