CSS

CSS can be applying change the theme of Keyword Search to match the branding of your company site, from text colors to border sizes.

Keyword theming can be easy if you utilize the built-in CSS variables (custom properties). These variables allow you to alter the look and feel of the keyword search elements to match the branding of your site.

The search box will inherit styles from the input tag that you specify in the install script. It is good to add position: relative; to the html element that the search component is embedded in. This will ensure the drop-down is positioned correctly.

CSS Variables (custom properties)

---

Quickly style the Keyword Search interface by adjusting the values in the CSS snippet below and adding it to your website.

.bz-theme {
    /* Base */
    --bz-keyword-font: sans-serif;
    --bz-keyword-fontSize: 16px;
    --bz-keyword-color: #0551de;
    --bz-keyword-highlight: #c5c5c5;
    --bz-keyword-text: #000;
    --bz-keyword-count: #999;
    --bz-keyword-button-text: #fff;
    --bz-keyword-border-radius: 2px;
    --bz-keyword-sidebar-width: 280px;
    --bz-keyword-max-width: 850px;
    --bz-keyword-visited-color: #5f1a86;
    --bz-keyword-highlighted-text: #0551de;
    --bz-keyword-separator: #ccc;
    --bz-keyword-pointer: #ccc;
    --bz-keyword-pointer-active: #bbb;
    /* tabs */
    --bz-keyword-tab-bg: transparent;
    --bz-keyword-tab-text: #000;
    --bz-keyword-tab-border: transparent;
    --bz-keyword-tab-icon: #6a6971;
    --bz-keyword-hover-tab-bg: transparent;
    --bz-keyword-hover-tab-text: #000;
    --bz-keyword-hover-tab-border: #000;
    --bz-keyword-hover-tab-icon: #6a6971;
    --bz-keyword-active-tab-bg: transparent;
    --bz-keyword-active-tab-text: #000;
    --bz-keyword-active-tab-border: #000;
    --bz-keyword-active-tab-icon: #6a6971;
    /* Narrow */
    --bz-keyword-narrow-text: #000;
    --bz-keyword-narrow-count: #999;
    --bz-keyword-narrow-btn-bg: #0551de;
    --bz-keyword-narrow-btn-text: #fff;
    --bz-keyword-hover-narrow-btn-bg: #0551de;
    --bz-keyword-hover-narrow-btn-text: #fff;
    --bz-keyword-narrow-badge-bg: #ddd;
    --bz-keyword-narrow-badge-text: #fff;
    --bz-keyword-narrow-checkbox-size: 1rem;
    --bz-keyword-narrow-checkbox-border: #ddd;
    --bz-keyword-narrow-checkbox-bg: #fff;
    --bz-keyword-narrow-checked-checkbox-border: #0551de;
    --bz-keyword-narrow-checked-checkbox-bg: #0551de;
    --bz-keyword-narrow-checked-checkbox-tick: #fff;
    /* Filter Chips */
    --bz-keyword-filter-chip-bg: #f4f4f4;
    --bz-keyword-filter-chip-text: #0551de;
    --bz-keyword-filter-chip-remove-bg: rgba(0, 0, 0, 0.2);
    --bz-keyword-filter-chip-remove-text: #fff;
    --bz-keyword-filter-chip-remove-radius: 2px;
    /* Taxonomy */
    --bz-keyword-taxonomy-spacing: 0.5rem;
    --bz-keyword-taxonomy-text: #000;
    --bz-keyword-taxonomy-count: #999;
    --bz-keyword-taxonomy-link: #0551de;
    /* Pagination */
    --bz-keyword-pagination-icon: #000;
    --bz-keyword-pagination-active-text: #000;
}

CSS Variable	Purpose
--bz-keyword-font	Sets the font family used within the interface. This can be a font stack for fallback. Note the font that you set here must be imported into your site, this variable does not include the actual font.
--bz-keyword-fontSize	Sets the font size used throughout the search interface. This font size is also used to size some interface elements.
--bz-keyword-color	Sets the main accent color. This includes titles and buttons.
--bz-keyword-highlight	Sets the hover color in the search box dropdown. Set this color to be a contrasting color to the --bz-keyword-text text.
--bz-keyword-text	Sets the text for the results.
--bz-keyword-button-text	Sets the text color for buttons.
--bz-keyword-border-radius	Sets the radius of corners on buttons and dropdowns.
--bz-keyword-max-width	Sets the maximum width of the results column.
--bz-keyword-visited-color	Sets the title color of visited results.
--keyword-sidebar-width	Sets the width of the filter sidebar
--keyword-highlighted-text	Sets the text color of highlighted search terms in results
--keyword-separator	Sets the color of the border separators
--keyword-pointer	Sets the default color of the filter expand arrows
--keyword-pointer-active	Sets the active color of the filter expand arrows
--bz-keyword-tab-bg	Sets the default background color of tabs
--bz-keyword-tab-text	Sets the default text color of tabs
--bz-keyword-tab-border	Sets the default border color of tabs
--bz-keyword-tab-icon	Sets the default icon color of tabs
--bz-keyword-hover-tab-bg	Sets the hover background color of tabs
--bz-keyword-hover-tab-text	Sets the hover text color of tabs
--bz-keyword-hover-tab-border	Sets the hover border color of tabs
--bz-keyword-hover-tab-icon	Sets the hover icon color of tabs
--bz-keyword-active-tab-bg	Sets the active background color of tabs
--bz-keyword-active-tab-text	Sets the active text color of tabs
--bz-keyword-active-tab-border	Sets the active border color of tabs
--bz-keyword-active-tab-icon	Sets the active icon color of tabs
--bz-keyword-narrow-text	Sets the text color of narrow results filter
--bz-keyword-narrow-count	Sets the text color of narrow results filter title
--bz-keyword-narrow-btn-bg	Sets the background color of narrow results filter mobile button
--bz-keyword-narrow-btn-text	Sets the text color of narrow results filter mobile button
--bz-keyword-hover-narrow-btn-bg	Sets the hover background color of narrow results filter mobile button
--bz-keyword-hover-narrow-btn-text	Sets the hover text color of narrow results filter mobile button
--bz-keyword-narrow-badge-bg	Sets the background color of narrow results filter badge on mobile button
--bz-keyword-narrow-badge-text	Sets the text color of narrow results filter badge on mobile button
--bz-keyword-narrow-checkbox-size	Sets the default size of checkboxes of narrow results filter
--bz-keyword-narrow-checkbox-border	Sets the border color of checkboxes of narrow results filter
--bz-keyword-narrow-checkbox-bg	Sets the background of checkboxes of narrow results filter
--bz-keyword-narrow-checked-checkbox-border	Sets the border color of checked checkboxes of narrow results filter
--bz-keyword-narrow-checked-checkbox-bg	Sets the background color of checked checkboxes of narrow results filter
--bz-keyword-narrow-checked-checkbox-tick	Sets the tick color of checked checkboxes of narrow results filter
--bz-keyword-filter-chip-bg	Sets background color of selected filter chip
--bz-keyword-filter-chip-text	Sets text color of selected filter chip
--bz-keyword-filter-chip-remove-bg	Sets background color of remove button selected filter chip
--bz-keyword-filter-chip-remove-text	Sets text color of remove button selected filter chip
--bz-keyword-filter-chip-remove-radius	Sets remove button border radius of selected filter chip
--bz-keyword-taxonomy-spacing	Sets the space between taxonomy items
--bz-keyword-taxonomy-text	Sets the text color of taxonomy titles
--bz-keyword-taxonomy-count	Sets the text color of taxonomy counts
--bz-keyword-taxonomy-link	Sets the text color of taxonomy filterable items
--bz-keyword-pagination-icon	Sets color next and previous pagination icons
--bz-keyword-pagination-active-text	Sets color of active pagination item