Custom Design Your Search Client

SearchUnify offers an HTML and CSS editor which can be used to customize Legacy search clients. The editor consists of three components: Search Results Page, Search Box, and No Results Found page.

NOTE.

• Take a back-up of the current code because there is no reset option.
• Do not edit any AngularJS directive because a change can break a component. Many Angular directives start with an -ng.
• Write your own CSS classes instead of editing existing classes.
• Don't delete existing classes or IDs.

Find Elements for Editing

1. Open a search client and press Ctrl+Shift+C if you are using Chrome on Windows.
2. Hover your cursor over a part to view the HTML classes controlling it. In the next image, the classes are: .su_w-100, .su__py-4, .su__px-sm-1, .su__search_section, and .su__bg-blue-grd.

   

Using Customize Search Clients

1. Go to Search Clients and open a web-based search client for editing. If you cannot not see on a search client row, then it means that customization isn't supported for the platform. You can customize Legacy, web-based clients.

   

2. Find the code for editing in Search Results Page, Search Box, or No Results Found.

   

3. You can edit components by switch to the CSS window and:
   • It is not recommended to edit existing classes
   • It is recommended to create new CSS classes and insert them into their relevant HTML element

   

4. Once you have made the changes, click Update.