Search results panel search-results-panel

The search results panel consists of the search input box at the top and the main area where informational messages or search results are displayed.

CSS properties of the main viewer area

When the panel is active, the viewer user interface is covered with a semi-transparent fill. The color and opacity of this fill is controlled with the following CSS class selector:

.s7ecatalogviewer .s7searchpanel .s7backoverlay

The search results panel always occupies all available viewer height. However, you can configure the width. You can set the width to an absolute pixel value, which is a default setting for medium and large-size breakpoints. Or, you can set the width to 100% to make the search results panel occupy the entire viewer area. The panel width is controlled by the following CSS class selector:

.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace

CSS property of the search result space

Example - to set up a 250 pixel-wide search results panel on large and medium size breakpoints and use a full-size panel on a small-size breakpoint:

.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
 width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
 width:100%;
}

The top of the search results panel is dedicated to the search input box. The padding on the sides of the input box is controlled by the following CSS class selector:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer

CSS properties of the search input container

The search input field is controlled by the following CSS class selector:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS properties of the search input field

Example - to set up a search input field with 0 pixel height and 14 pixel text font:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
 padding-left:5px;
 height:30px;
 font-size:14px;
}

The search button to the left of the search input field in form of the “looking glass” by default is controlled by the following CSS class selector:

 .s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton

CSS properties of the search input button

Example - To set up a search button with 26 x 26 pixels “looking glass” icon; 30 pixels in size with a 1 pixel border:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
 width:30px;
 height:30px;
 background-size:26px 26px;
 background-image: url(images/v2/Search_form_field.png);
 font-size:14px;
 border: 1px solid #696969;
}

The search results panel may display a textual prompt when the feature is first called. And, it also shows a message when a user’s search did not return any results. In all cases, text appears in the main part of the search results panel and is controlled by the following CSS class selector:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo

CSS properties of the search information

The message text can be localized. See Localization of user interface elements for more information.

Example - To set up a text panel that uses a gray 18 pixel font:

.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
 font-size: 18px;
 color: #696969;
}

Search results are rendered as a single column or single row of thumbnails for pages with search hits. The spacing between search results thumbnails is controlled with the following CSS class selector:

.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell

CSS properties of the thumbnail cells

Example - To set up ten pixel spacing:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
 margin: 5px;
}

The appearance of individual thumbnails is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb

CSS properties of the thumbnail

Example - To set up thumbnails that are 215 x 129 pixels, have a light gray default border, and a dark gray selected border:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
 width: 215px;
 height: 129px;
}

The appearance of the thumbnail label is controlled with the following CSS class selector:

 .s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label

CSS properties of the label

Example - To set up labels that use 12 pixel, gray, Helvetica® font:

.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
 font-family: Helvetica,sans-serif;
 color: #4c4c4c;
 font-size: 12px;
}

On systems that use mouse input, two scroll buttons appear at the bottom of the search results panel to a user scroll through the search results. The appearance of the up and down scroll buttons are controlled with following CSS class selectors:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton

It is not possible to position scroll buttons using CSS top, left, bottom, and right properties. Instead, the viewer logic positions them automatically.

CSS properties of the scroll up and down buttons

The button tool tips can be localized. See Localization of user interface elements for more information.

Example - To set up a scroll up button that is 125 x 35 pixels and has different artwork for each state:

.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
 width:125px;
 height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);