Facet Styling Customization

Search Best Practices - Search Front-End
1

Hi Team,

I’m in the process of styling my Answers experience and have some questions about the look and feel of Facets:

  • Filter Buttons: Is it possible to square off the filter buttons? I’ve tried applying border-radius: 0px to the .yxt-FilterOptions-input element, but this did not adjust the border of the actual button image

  • Filter Button Color: Is it possible to adjust the fill color of the buttons to be more in line with my brand’s color scheme?

  • Apply Filter Button: Is it possible to change the text from ‘Apply’ to ‘Apply Filter’?

  • Reset Filter Button: Is it possible to change the text from ‘Reset All’ to ‘Reset Filters’

Thank you!
Austin

2

Hi Austin,

You’ll need to be on version 1.4 or above for this to work. For the filter buttons and filter button color, see some sample CSS below:

Filter Buttons

  .yxt-FilterOptions-optionLabel:before {
border-radius: 0;
  }

Filter Button Color

  .yxt-FilterOptions-optionLabel:after {
border-right: .0625rem solid var(--yxt-color-brand-primary);
border-bottom: .0625rem solid var(--yxt-color-brand-primary);
  }

For the Apply Filter and Reset Filter labels, there are options in the Facet Component which you can add in your componentSettings on your vertical page config.