Genius Results Background Color?

[maxstnr]

Is it possible to change the background color of the genius card container / search results in faceted search widget in Employee Center? I'm able to change it using browser tools but when applying the code in style sheet or widget instance, it does not work. Currently, the results of a search query are displaying on a grey background, which we would like to change to white. Attached is an example of what I am referring to. Thanks!

[Dan O Connor · Accepted solution]

Think last time I looked into this, the Genius result card on sp_Search wouldn't accept CSS stylings from themes, page css or instance of widget css. 

It required the search facet widget to be cloned to then be styled as appropriate. 

The buttons take in branding styling but that was about it. 

Again been a while since I had to do styling on this feature 

[maxstnr]

That makes sense. Had a feeling that would be the only solution here but we'd like to avoid cloning that particular widget so we'll accept the grey coloring. Thank you!

[sukelully]

Genius Results use a shadow DOM which blocks standard CSS. It does let CSS variables pass through though:

// Genius summary
sn-search-top-results {
  --genius-card_color--background: purple;
  --now-color_background--primary: purple; // Background when summary is loading

  // Left syled gradient border
  --nass-synthesized-gr-gradient_color--top: var(--genius-card_color--background);
  --nass-synthesized-gr-gradient_color--bottom: var(--genius-card_color--background);
}

// Search results
sn-search-results-container {
  --now-color_background--primary: red;
}

// Search filters
sn-search-facets {
  --now-color_background--primary: green;
}

This is obviously a bit of hack and overriding platform variables is generally not recommended. Make sure you keep things in the widget instance's scope and target specific components using element selectors like my example and you should be fine, however. You can use dev tools to explore what variables these components use and experiment with modifying them in the browser to fine-tune your styling.

[maxsteiner]

Thanks for this, this is good to know