Hello!
My client is looking to update the styling of their Answers search bar on their homepage. They have integrated using a JS snippet, so the styling is all based on how they integrated it originally.
They want to update the styling, but need help with the CSS for this, so I am hoping to help them. However, I am not sure how to go about sending instructions or code for them to add.
They want to change the search bar from this:
to something more like this, using their red brand color:
Is this something we could add custom code for? The developers on my team said this would not be an item that would go through them.
Thanks!
Sunny
Hi Sunny,
Happy to help if we can! A few questions here.
- Are they trying to change the standalone search bar on their homepage (not the searchbar that is on the Search results page). These are two separate searchbars with different targeting and styling so wanted to check.
- Are they using the default magnifying_glass icon right now? do they have an image of the second magnifying glass which they could use? if so, they can use “customIconUrl” to replace it. customIconUrl is a mentioned here: Search Bar | Hitchhikers
Alyssa
Thanks Alyssa! Correct, they want to change the standalone search bar on their homepage and not the searchbar on the Search results page.
I know this is up to them to style, so would targeting the customIconUrl still work for this? If they want to collapse the full search bar into just that icon that when clicked expands, could we send them guidelines for this?
Thanks so much!
Gotcha. Yes so the customimageUrl simply would change the icon of the black/grey magnifying glass to whatever they want to put. They would add it to their answers Init in the same way they add the magnifying_glass today.
However, it sounds like what you actually want to do is integrate with the overlay. Take a look at this:
Is that right?
Alyssa
Ah - this is perfect! I will send this over - thank you so much!