> For the complete documentation index, see [llms.txt](https://docs.bigzeta.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bigzeta.com/product-overview/search-engine-result-page-serp/css.md). # 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. ```css .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 |