New theme in Theme Builder makes the Search Icon hidden

Gabriel G
Tera Contributor

‎03-05-2025 10:03 AM

Hi. Recently I created a new theme using Theme Builder to my client's instance using the following colors:
Primary: #01032c
Secondary: #285070

Neutral: #0f8ba8
Additional: #e0ebff

GabrielG_1-1741197224955.png

 

The problem is that the Search button is now "hidden" because it has the same color as the background header.

GabrielG_2-1741197463993.png

GabrielG_3-1741197511431.png

 

I don't now where I can edit the Search Button to solve this.

Can someone help me?
Best regards :-).

0 Helpfuls
  • 461 Views
5 REPLIES 5

Shivalika
Mega Sage

‎03-07-2025 02:53 PM

Hello @Gabriel G , 

 

You can do this in two ways, either you cns check your custom theme that you created and search for navigation section or header section to modify this search button color. 

 

OR 

 

.sn-global-search-button {

    background-color: #e0ebff !important; /* Adjust color */

    color: #01032c !important; /* Adjust text/icon color */

 

}

 

Modify the add above CSs in the System UI -> Stylesheet. You can change the hexa code of color to reflect as per your theme color. 

 

LinkedIn - https://www.linkedin.com/in/shivalika-gupta-540346194

 

YouTube - https://youtube.com/@servicenowdeveloperr?si=Am5_N3ZvY3s0z4VG

 

Please mark my answer as helpful if it is helpful in anyway. 

0 Helpfuls

Gabriel G
Tera Contributor

‎03-10-2025 12:44 PM

Hi @Shivalika. Thank you for your attention. Can you give me more context of your tips?

1- What mean you by "cns check my custom theme"? I tried to find this component in the Theme Builder, but I didn't  find.
2- I where is this "System UI -> Stylesheet"? I did not find this module to put this code.

0 Helpfuls

Gabriel G
Tera Contributor
In response to Gabriel G

‎03-10-2025 12:49 PM

@Shivalika. Another thing that I tried was change the color variable in the UX Style of the Theme.

I inspect the element and it show me the name of the color.

GabrielG_0-1741636006701.png

 

I tried to change the color to a simple red, but this did not worked.

GabrielG_1-1741636108109.png

 



0 Helpfuls

Shivalika
Mega Sage
In response to Gabriel G

‎03-10-2025 12:55 PM

Hello @Gabriel G 

 

That was a silly typing mistake - I meant please check your custom theme that is working - in there in the CSS you add this property. 

 

And if this or stylesheet id not working - please try below in UI Macro - 

 

text_search_widget UI Macro 

 

 function="$('textsearch').submit()"

Style="color:#989 - whatever you want , also add border.

 

Kindly mark my answer as helpful and accept solution if it helped you in anyway,

 

Regards,

Shivalika 

 

My LinkedIn - https://www.linkedin.com/in/shivalika-gupta-540346194

 

My youtube - https://youtube.com/playlist?list=PLsHuNzTdkE5Cn4PyS7HdV0Vg8JsfdgQlA&si=0WynLcOwN

eEISQCY

0 Helpfuls