Style Help Site Search Bar

Support Solutions
1

Hi,

Where can I style my Help Site Search Bar? Would I do this within Zendesk, or the Yext platform?

Thanks!

2

Hi -

To adjust the styling on the Help Site home page, navigate to the style.css file in your Zendesk Help Center. Here are the most important CSS classes when styling the bar:

Class Details
.yxt-SearchBar-container Controls border and radius of the container
.yxt-SearchBar-input The input itself
.yxt-SearchBar-button Search Button
.yxt-SearchBar-clear Clear Button
.yxt-SearchBar-form Form
.yxt-AutoComplete-wrapper Wrapper around autocomplete
.yxt-AutoComplete-option Autocomplete option
.yxt-AutoComplete-option.yxt-selected Selected autocomplete (using keyboard)

For more examples on how to style the searchbar, visit our Guide here.