How to change "global text search" background color in Helsinki version?

rshegde
Mega Contributor

Hi,

Can someone brief me how to change the background color of "global text search" box?

Regards,

Rajeev

1 ACCEPTED SOLUTION

shloke04
Kilo Patron

Hi,



This can be done simply by Writing a UI Script as mentioned below:



Script:



top.$j('#sysparm_search').css('background','green');



find_real_file.png



Make Sure the Global Checkbox is marked True in the UI Script Form page as shown in the Screen shot.



Result:



find_real_file.png




Hope this helps.Mark the answer as correct/helpful based on impact.



Regards,


Shloke


Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

View solution in original post

5 REPLIES 5

johnolivermendo
ServiceNow Employee
ServiceNow Employee

Hey Rajeev,



I don't know if you already know but there is a system configuration page where you can adjust the different colors of various elements on the main ServiceNow harness. Do this by typing 'Basic Configuration' in the navbar. If you're using the new UI 16, click the 'Basic Configuration UI16' module. Unfortunately the global text search box is not one of the options. Here's the official doc:



Configure logo, colors, and system defaults for UI16



If you look closely at the global text search input element you'll notice that the background css is transparent. So the background color is actually just whatever the top 'Header Background Color' is.


Dave Smith1
ServiceNow Employee
ServiceNow Employee

The background colour is the same as the banner colour, I thought - but it's possible to change the colour of the text within it using $search-text-color in the themes.  


jim.coyne covers this in his excellent blog post: Istanbul Theme Properties Visual Guide


shloke04
Kilo Patron

Hi,



This can be done simply by Writing a UI Script as mentioned below:



Script:



top.$j('#sysparm_search').css('background','green');



find_real_file.png



Make Sure the Global Checkbox is marked True in the UI Script Form page as shown in the Screen shot.



Result:



find_real_file.png




Hope this helps.Mark the answer as correct/helpful based on impact.



Regards,


Shloke


Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

Just a word of caution before using this approach. This was done in our environment, and we experienced unintended consequences on a date field on project tasks when viewed from the planning console (an error displayed below the field every time the form was opened). Disabling this global script took care of the error. Seems totally random, hence my word of caution. Without regression testing basically everything in your system, it's near impossible to know the effects of a global UI script that seems relatively innocuous.



I'd be glad for different points of view, but that's the way I'm seeing it at this point.