The Zurich release has arrived! Interested in new features and functionalities? Click here for more

Customization for Typeahead Search widget

Julian Reis
Tera Contributor

Hi guys,

 

does anyone know how i can customize the typehead search widget on employee center? I just want to style the corners of the widget. 

 

JulianReis_0-1758627317807.png

 

 

With the help of dev-tools i founded out, where i can deactivate this roud corners.  Because when you deactive "border-bottom-left-radius" the corners will change. 

JulianReis_1-1758627317879.png

 

 

With the page css i tried to change/deactive it but it didnt worked. Can someone with some Servicenow/CSS expierience help me?

4 REPLIES 4

Nawal Singh
Tera Expert

Hi @Julian Reis ,

 

You need to customize the widget for that clone the widget and configured like this-

NawalSingh_0-1758628760600.png

 and in the internal widget also you need to do apply some css like this- 

 

NawalSingh_1-1758628897302.png

after this you will get this kind of output-

 

NawalSingh_2-1758628947490.png

 

Hope that is help you!!!

 

Thank you!

Julian Reis
Tera Contributor

Thank you for your response 🙂 Maybe I havent described my problem precisely enough. I want to redesign the Searchbar so that the corners of the searchbar are smoother like in this example (please ignore the blue background my main goal is to change the corners of the searchbar):

JulianReis_0-1758629430197.png

 

The current design of the searchbar is like this:

JulianReis_1-1758629554351.png

 

 

 

 

Hi @Julian Reis 

 

Configure the widget like this-

NawalSingh_0-1758631079431.png

 and you will get the output like this-

 

NawalSingh_1-1758631123921.png

 

If it's helpful to you please mark as helpful and accept the solution

 

Thank you!!1

tejas1111
Tera Contributor

Hi ,

 you cannot edit service now OOTB widget. you have to cloned(copy) OOTB widget. then make changes in widget whatever you need. 

then open page in designer and  remove OOTB typhead widget and add your widget.

 

widget changes.

1) right click on the widget . open widget in editior

tejas1111_0-1758630000488.png

2)cloend the  Homepage search widgets.

tejas1111_1-1758630075456.png

 

3)now in your widget edit the code .you can take help of Chatgpt to edit csss of this widget.

4) once you edit you widget. save this .

 

then

open got to portal page where you widget is added.

right click on the widget and open page in "page in desinger"

remove oOTB widget and add your cloned widget

 

 

If my response helped you, please mark it as the correct answer   \

 

Thanks..!