How to style search templates

Once a search template is implemented correctly, CSS can be used to further style the template to match the visuals of the rest of the website.
When using the global search templates like Overlay or Inline, the following CSS selectors can be used modify certain elements.

Overlay

Edit banner colors

Add the following to the cludoSettings object in the script:

themeBannerColor: {textColor: '#HEX', backgroundColor: '#HEX'},

Inline

Styling the search results

.cludo-search-results-item {
  /* Insert styling */
}

.cludo-search-results-item__title-anchor {
  /* Insert styling */
}

.cludo-search-results-item__title {
  /* Insert styling */
}

.cludo-search-results-item__description {
  /* Insert styling */
}

.cludo-search-results-item__path-anchor {
  /* Insert styling */
}

Styling the search filters (categories)

.cludo-facet {
  /* Insert styling */
}

.cludo-facet__header {
  /* Insert styling */
}

.cludo-facet__value-list-item {
  /* Insert styling */
}

.cludo-facet__value-list-item.active {
  /* Insert styling */
}