Hello,
I am attempting to update the placeholder text in the search bar on the Employee Center Header.
We would like to change it from just "Search" to something more user friendly ("How can we help?", etc.). Can someone please point me in the right direction to update this text?
Thank you
Hello @SuburbanGringo -
You should be able to do this by changing the typeAheadOptions.title = gs.GetMessage() within the Server Script, that is in the widget itself. Depending on which is being used as the header is controlled by a widget.
For example (from my PDI):
My portal is Employee Center --> which is using EC Theme --> which is using Header | Footer Employee Center Header --> and from within the Server Script you should have the typeAheadOptions.title
Here is how I changed my quickly just to show:
From the portal view:
Keep in mind, when you change this and give your portal a URL Refresh, you will probably be hit with some Restricted Caller Access messages. Once you go and change those to Allow from the Restricted Caller Access table, you should be all set.
You could also create a new System UI Message key and point the server script "typeaheadoptions.tite" to your new one. That way, you can create translations if you ever need.
Hope this helps!
Reach out with any issues -
-Rob
Hello @Srinivasa Chall -
Yes, you can do this. You can create CSS for page specific, or, to keep your portal consistent across all pages, create a new CSS Include for your portal.
Here is what I did for my PDI:
- Navigate to your portal list and select your portal being used
- Click into your portal Theme being used and open that record
- Scroll down to the related tab and click on CSS Includes
- Click New
Give the CSS Include record a name, and for now, pretend I have no Style Sheet yet (covered part with red marker) - click the magnifying class next to Style Sheet, and then click New
Name the Style Sheet how you see fit, and then give it the CSS you want/need:
Here is mine as an example:
.input-typeahead {
color: red !important;
font-family: "Arial", sans-serif; /* Change to any font you prefer */
font-size: 16px; /* Adjust font size */
font-weight: bold; /* Set the font weight */
}
.input-typeahead::placeholder {
color: black;
font-family: "Arial", sans-serif; /* Change font for placeholder */
font-size: 14px; /* Adjust placeholder font size */
font-style: italic; /* Example of adding font style to placeholder */
}
Now my typeAhead will be changed in the search boxes for the whole portal:
(Showing a few pages throughout the portal)
Hope this helps - reach out with additional questions and I can try to help more.
Cheers,
-Rob
