Hi @Ash33 ,
Search Facet Filter container has a border of 1px. The search term has a highlighted pre-defined color based on theme. However, at present there are no baseline theming variables for overriding them - if the customers want to override
e.g. remove the borders from the search results container and search facet filter and change the hit highlight color to match customer brand theming.
To address the above mentioned issue, this KB article lists the workaround steps to achieve the same.
Workaround
1. For overriding the css properties at theme level - create a new Style Sheet record in sp_css table (<instance_url>/sp_css.do?sys_id=-1)
1.1 To change the hit highlight color (i.e. background color of the search keyword) so that it is brand compliant:
sn-search-results-container, sn-search-combobox {
--now-color--primary-0: rgb(40,103,178) !important;
}
1.2. To remove the border for search results container:
sn-search-results-container {
--now-container--border-width: 0px !important;
--mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
--mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}
1.3. To remove the border for search facet filters:
sn-search-facets {
--now-color--divider-tertiary: 0px !important;
}
The record css should look like this finally:
sn-search-results-container {
--now-container--border-width: 0px !important;
--mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
--mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}
sn-search-facets {
--now-color--divider-tertiary: 0px !important;
}
sn-search-results-container, sn-search-combobox {
--now-color--primary-0: rgb(40,103,178) !important;
}
2. Create a new CSS include record in sp_css_include table (<instance_url>/sp_css_include.do?sys_id=-1).
While creating it select / link the Style Sheet created in the step 1
3. Create a new Stylesheets record in many to many m2m_sp_theme_css_include table (<instance_url>/m2m_sp_theme_css_include.do?sys_id=-1).
While creating it select / link the CSS include record created in Step 2 and select the Service Portal theme.
4. To go to the Themes (<instance_url/sp_theme_list.do>) and select the theme to attach the Stylesheet creates in step 3.
After the above steps - opening the search result, the following change can be seen.
