How to change color of title icon without affecting the color of other icons?

Search Best Practices - Search Front-End
1

Hello,

As you can see in the screenshot below, I’ve adjusted the background-color of the .yxt-Results-titleBar element. However, the title icons do not appear with this new background color.

image
image1424×142 3.82 KB

I inspected the page and noticed that I could change the color of the icons by adjusting the color of the .icon Svg element. However, by changing the color of the .icon Svg element to #FFFFFF, the color of the FAQ Accordions and the Yext logo in the search bar also turned to white.

image

Is it possible to make the color of the title icons white, without affecting the color of the other icons? I’d imagine this requires me to target the .yxt-Results-titleBar element, but I’m not entirely sure how that would work.

Thank you,
Austin

2

Hi Austin,

This is an issue I ran in to as well and you are on the right track in terms of what element to target! To make it more specific, you can try the following:
.yxt-Results-titleBar .Icon svg { color: white }

This will target the icons in the results bar specifically! Let me know if that works!

2 Likes
3

This is great, thanks @Sarah_Bokhari!