Customize List Search Results

Customize List Search Results

Overview of the Simple Search Configuration Tool Pane

Each CSS element is listed in the CSS Editor, along with any styles currently defined for it. Add CSS style attributes as desired to customize how elements are displayed in the Web Part. Watch our video to see how you can change the list search results

Below is a list of the default CSS classes defined for the List Search Simple Web Part:

Style Description
WebPartStyle defines the styling of the Search Criteria table and Search Results table. Here you can define general format, such as alignment, border, and font styles.
SearchButtonStyle, ResetButtonStyle, PrintButtonStyle, ExportButtonStyle, and BackButtonStyle

define the look and feel of the Search, Reset, Print, Export, and Back buttons.

NOTE: If the option Keep Search Criteria with Search Result Page is not checked, the Print Preview and Back buttons are not customizable in the Search Results view.

TextBoxSearchKeyWord defines the look and feel of the Search in all columns for: text box.
LabelControls defines the look and feel of the Field Label controls.
TextBoxControls defines the look and feel of the Field Controls that are text boxes.
TextAreaControls defines the look and feel of the Field Controls that are text areas.
ListBoxControls defines the look and feel of the Field Controls that are list boxes.
DropDownListControls defines the look and feel of the Field Controls that are drop down menus.
k-multiselect defines the look and feel of the Choice and Lookup Controls that are drop down menus.
CheckBoxControls defines the look and feel of the Field Controls that are check boxes.
RadioButtonControls defines the look and feel of the Field Controls that are radio buttons.
ResultTableStyle defines the general style of the search results table. Settings can include border style, background style and alignment.
ResultTableHeaderStyle defines the background color for the column headers of the search results table.
ResultNormalItemStyle defines the background color for the odd number search result rows (rows 1, 3, 5, …).
ResultAlternatingItemStyle defines the background color for the even number search result rows (rows 2, 4, 6, …).

If unique CSS class names are defined in the layout HTML Editor, they should be added to the CSS class definitions in the CSS Editor window.

For example, if you would like the background color on all odd rows of your search results list to be light yellow, you can change the style as follows:

   ResultNormalItemStyle="yellow"

See also: