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
Pulkit Pandey
Hey Gaby
You can place the below CSS at the bottom of your style.css file
Note: You have to upload the image which you want to use in the place of the default image on the assets folder, then add that URL in the place of content: URL()
Let me know if it solves your issue
Thanks
Pulkit
2
Gaby 2
@... Amazing! That worked! Thank you so much.
1
Pulkit Pandey
Hey Gaby,
Happy to hear :)
0
Jessica Fong
Hi @...
May I know if I would like to change the color of the "X" icon and search result hyperlink color, how can I do so? Thanks!
0
Pulkit Pandey
Hi Ashley Yau
The image you're using for the X icon is it PNG or SVG?
Are you open to use the Font Awesome icons?
Thanks
Pulkit
0
Jessica Fong
@...
Any chance I can keep the default X icon but just to change the color? thanks!
0
Pulkit Pandey
Hi Ashley Yau
Yes, it's possible you need to update the color of your X icon image either using an Online tool or Photoshop, then upload the updated image in the place of the previous one
Thank You
Pulkit
0
Jessica Fong
@...
Thanks so much! Any chance you may know how to change the color of search result hyperlinks as well? Thanks.
Ashley
0
Pulkit Pandey
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
Jessica Fong
Hi @...
Please find the below, I would like to change the color of article links, thanks!
Ashley
0
Pulkit Pandey
Hi Ashley Yau
Thanks, for providing the screenshot :)
Please, add the following CSS code at the bottom of your style.css file
You can update the color of your choice
Let me know if it solves your issue
Thank you
Pulkit
0
Jessica Fong
@...
Thanks for the advise! May I know if possible to replace "black" with color code? thanks.
Ashley
0
Pulkit Pandey
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
Let me know if it solves your issue
Thanks
Pulkit
0
Jessica Fong
@... it looks perfect! Thanks so much!
0
kamau dawud
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
Ghouaiel Takoua
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
Hiedi Kysther
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