Templates

The Templates feature in Filter allows you to choose and customize the style of your filters, offering a range of built-in templates and customization options. This guide details the various options available for selecting and modifying templates in your filters.

Choose the Filter Style

Select the visual style for your filters:

  1. List: Displays the filters as a simple list, ideal for a clean, straightforward presentation.

  2. Check Box: Filters are shown with checkboxes, allowing for multiple selections at once.

  3. Radio: Filters are displayed with radio buttons, suitable for single selection scenarios.

Default Templates

The Default Templates section provides a selection of pre-designed templates that are ready to use. These templates are categorized into two themes: Light and Dark.

  • Default – Light: Choose from the following color themes:

  1. Blue

  2. Grey

  3. Green

  4. Yellow

  5. Orange

  6. Purple

  • Default – Dark: Choose from the following color themes:

  1. Blue

  2. Grey

  3. Green

  4. Yellow

  5. Orange

  6. Purple

Edit Template

The Edit Template section allows you to customize and modify the selected template to suit your specific needs.

  • Change Template: Click on this option to select and apply a different template from the available list.

  • Template Preview: This section displays a live preview of the changes you make to the filter design, allowing you to see the effects in real-time.

Global Styles

Customize the overall look and feel of your template using the following options:

  • Primary: Controls the color of the selected checkbox/radio icon and the progress bar fill.

  • Secondary: Controls the color of the "List" tick mark.

  • Text Color (Default): Change the color of all text in the visual.

  • Text Color (Selected): Controls the color of text when you select or hover over a row.

  • Row Background (Default): Sets the background color of rows.

  • Row Background (Selected): Sets the background color of rows when you hover over or select them.

  • Progress Bar Color: Sets the bar color of the "Progress Bar."

Other Colors

Further refine the appearance of your filter with these additional color settings:

  • All Borders: Controls the color of all borders and cell dividers.

  • Title Bar Background: Controls the background color of the title bar.

  • Title Bar Icons (Default): Controls the default color of icons in the title bar.

  • Title Bar Icons (Selected): Controls the color of icons during hover or selection.

  • Title Bar Icon Size: Adjust the size of the icons in the title bar.

  • Font Family: Choose the font family for the text in the template.

Custom Themes

The Custom Themes section offers a selection of 10 professionally curated filter templates. These templates are designed to provide a polished look and feel right out of the box.

Last updated