1.877.226.2662

Customize Search Results Styles

Customize Search Results Styles

Overview of the Simple Search Configuration Tool Pane

Modifying the default Styles for Search Results

click to modify styles.pngOn the Look and Feel Settings page accessed from the Preferences section of the Web Part Settings, click Modify CSS to access the style sheet for this instance of the web part.

Icon-Tip Save the default style sheet to your local PC before making any changes.

Default Search Results display styles are shown below. They do not inherit the styles of the site, so it may be necessary to modify the styles in your implementation.

default search results with nums.png

Different classes are associated with each area of the results display:

Class Default

.ResultTableStyle

This class defines the general style of the results table.

 
.ResultTableStyle
{
border-style:none ;
width:100% ;
height:auto ;
}
1

.ResultTableHeaderStyle

This class controls the style for Header row of the results list.

 
.ResultTableHeaderStyle
{
width:auto ;
height:auto ;
}
2

.ResultAlternatingItemStyle

This class controls the style for the even numbered rows in the results list.

 
.ResultAlternatingItemStyle
{
 background: none repeat scroll 0 0 #F2F2F2 !important;
}
.ResultAlternatingItemStyle a
{
color:#0072BC !important;
}
3

.ResultNormalItemStyle

This class controls the style for the odd numbered rows in the results list. These rows have a white background by default.

 
.ResultNormalItemStyle
{
}
.ResultNormalItemStyle td a
{
color:#0072BC !important;
}
4

.ResultTableFooterStyle

This class controls the style for the footer row of the results list. This is the row that shows that page navigation.

 
.ResultTableFooterStyle
{
}

The table below shows examples of common changes possible for Search Results. Additional examples may also be possible.

Change Example
Change the color scheme from blue to green.

icon-video1 Check this Video

Make these changes:

.ResultTableHeaderStyle
{
background: none repeat scroll 0 0 #CCE698!important;
font-weight: bold !important;
width:auto ;
height:auto ;
}
.ResultAlternatingItemStyle
{
 background: none repeat scroll 0 0 #D6EBAD!important;
}
.ResultAlternatingItemStyle a
{
}
.ResultNormalItemStyle
{
 background: none repeat scroll 0 0 #EAF5D6!important;
}
.ResultNormalItemStyle td a
{
}
.ResultTableFooterStyle
{
background: none repeat scroll 0 0 #CCE698!important;
}
.ResultTableStyle
{
border-style:none ;
width:80% ;
height:auto ;
}

The result looks like this:

results formatted.png

Icon-Tip Check this video to see a change being made.