Recent searches


No recent searches

How to change the "cancel(erase)" X icon in the Guide Search input field

Answered


Posted Apr 14, 2021

Hi, I would like to know if anyone knows how to specifically change or style the "X" icon that clears the Search Input Field in Guide on the homepage of our Zendesk Guide.

 


0

17

17 comments

Hi Ghouaiel, 

It's difficult to tell without knowing which Templating API version you are using. For context, our search bar is rendered with a {{search}} curlybars helper that is responsible to render both markup (HTML), styles (CSS) and JS. In the latest versions of the templating API, that helper renders a SVG for the X icon. So the only way to change it is via DOM manipulation. However, we don't recommend heavily customizing the output of the helper because your internal implementation might change in the future.

If you'll need further assistance, I highly recommend reaching out to Support so we can further assist you. 

Thanks! And, have a great day! 

0


Hey Pulkit Pandey have you an idea how to replace the X icon with another icon from a library imported in the node_modules? , I think it can't be done with CSS with content URL(), what do you think?

0


You can use the Lightroom to update the color of your x icon image and then you can update it in system. First update the icon image in Lightroom and then replace the previous image with this new one.

0


Pulkit Pandey it looks perfect! Thanks so much!

0


Hi Ashley Yau

Yes, you can add the HASH value of the color of your choice, like below I have added the HASH value of black color

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
color: #000000;
}

Let me know if it solves your issue

Thanks 

Pulkit

0


Pulkit Pandey

 

Thanks for the advise! May I know if possible to replace "black" with color code? thanks.

 

Ashley

0


Hi Ashley Yau

Thanks, for providing the screenshot :)

Please, add the following CSS code at the bottom of your style.css file 

zd-autocomplete-multibrand zd-autocomplete-title-multibrand {
color: black;
}

You can update the color of your choice

Let me know if it solves your issue 

Thank you 

Pulkit

0


Hi 377878176074

Please find the below, I would like to change the color of article links, thanks!

 

Ashley

0


Hi Ashley Yau

Can you please share a screenshot for the same, so I will get an idea where you are pointing 

Thanks

Pulkit

0


Pulkit Pandey

Thanks so much! Any chance you may know how to change the color of search result hyperlinks as well? Thanks.

Ashley

0


Sign in to leave a comment.

Didn't find what you're looking for?

New post