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;
}

PreviousSearch Engine Result Page (SERP)NextAdvanced CSS

Last updated