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.

EDIT: If you really wanted to add your own styles, you can clone the faceted_search widget and modify the link script to recursively find shadow roots and apply styles that way. It's important to consider that you'd be missing out on potential updates and open the door to conflicts down the line. I'd only recommend this if you're sure that your team is able to provide long-term support and maintenance. (i.e., manually cloning the original widget whenever it is updated and adding the script again).

Here is what your link script should look like:

function(scope, elem) {
	var lazyLoader = $injector.get("lazyLoader");
	lazyLoader.putTemplates(scope.data.resultTemplates);

	elem.on('NLQ_SP_NAVIGATION', ".triggerActions", function(result) {
		var resultPayload = result.detail.payload;
		window.open(resultPayload.url, "_self");
	});
    
	(function applyCssToShadow() {
		var CSS =
				'.genius-card-container { border-radius: 12px !important; overflow: hidden; }' +
				'.gr-carousel-container { border-radius: 12px !important; }' +
				'.search-results-container { border-radius: 12px !important; box-shadow: none !important; background-color: #F6F6F8 !important; }' +
				'.facet-panel-tree { box-shadow: none !important; background-color: #F6F6F8 !important; }' + 
				'.container-loader { background-color: #f6f6f8 !important; }' +
				'.now-icon { display: none !important; }';


        // Apply classes to element
		function inject(root) {
			if (root.querySelector && root.querySelector('style[data-gr-radius]')) return;
			var s = document.createElement('style');
			s.setAttribute('data-gr-radius', '');
			s.textContent = CSS;
			root.appendChild(s);
		}

		var widgetRoot = elem[0];
		var observed = new WeakSet();
		var scheduled = false;

		function pierce(root) {
			if (!root || !root.querySelectorAll) return;
			var nodes = root.querySelectorAll('*');
			for (var i = 0; i < nodes.length; i++) {
				var sr = nodes[i].shadowRoot;
				if (!sr) continue;
				inject(sr);
				if (!observed.has(sr)) {     // Re-pierce when a DOM change is detected
					observed.add(sr);
					new MutationObserver(schedule)
						.observe(sr, { childList: true, subtree: true });
				}
				pierce(sr);                  // Descend deeper searching for more shadow roots
			}
		}

        // Limit pierce() to once per frame
        // Without this it would be re-ran a million times for no reason
        // I.e., when the AI summary is streamed into the DOM
		function schedule() {
			if (scheduled) return;
			scheduled = true;
			requestAnimationFrame(function () { scheduled = false; pierce(widgetRoot); });
		}

        // Begin recursive search from widget root
		pierce(widgetRoot);
		new MutationObserver(schedule).observe(widgetRoot, { childList: true, subtree: true });
	})();
}

[maxsteiner]

Thanks for this, this is good to know