How to Customize the Search Bar in Employee Center

[boteeuwen]

Hello ServiceNow Community,

I'm currently working on customizing the Employee Center, and I would like to modify the search bar. Specifically, I'm looking to adjust the border radius and the size of the search bar.

Has anyone successfully done this or could you point me in the right direction for how to achieve this customization?

Any guidance or suggestions would be greatly appreciated!

Thank you in advance!

[boteeuwen]

I have no clue where to add debugging since I don't know where to add CSS...
That's my whole question.
I've tried to add it in the Homepage search widget, but I didn't have any result.

[ChrisBurks · Accepted solution]

One way to change the styling for the homepage search bar is to modify the widget instance CSS (Not the widget itself but the instance).

Follow the below steps.

With the page open, Ctrl + Right-click on the search bar and choose "Instance in Page Editor".

This opens the page editor with the instance of the widget already selected in the horizontal tree matrix.

Scroll down the page to the CSS section and find the Input and Button styling.

Make the appropriate modifications. Maybe something similar to the below screenshot where I made changes to the border styling and added styling for border-left and border-right respectively.

Result: You can see the border is much thicker and the line separating the magnifying icon and text is gone.

To control the size of the search bar find the "div" in the CSS styling and I would probably use a percentage or maybe just a max-width to keep the responsiveness.

Baseline:

Modified:

Result:

Hopefully that helps. Just make sure you are modifying the widget instance and not the widget itself.

[boteeuwen]

Great explanation, thanks a lot!!! 🙂

[boteeuwen]

By the way this doesn't work when AI search is enabled, do you know how to fix that?