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
CSS property
Description
background-color
Color of the overlay.
opacity
Opacity of the color.

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

width
Width 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

padding
Padding around the input box.

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

.s7ecatalogsearchviewer .s7searchpanel .s7searchinput

CSS properties of the search input field

height
Height of search input field.
padding-left
The inner padding between the input field bounds and the input text.
border
Border of the search input field.
margin
Margin of the search input field
font-size
Size of the text font.

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

width
Width of the search input button.
height
Height of the search input button.
background-image
The URL to the "looking glass" icon image.
background-size
The size of the "looking glass" icon.
border
Border of the search input button.
margin
Margin 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

color
Color of text.
font-family
Name of text font.
font-align
Horizontal text alignment.
font-size
Size of font text.
NOTE
This text panel supports the state attribute selector, which can be used to apply different styles to different text messages. In particular, state='prompt' corresponds to the text prompt shown when the panel is called for the first time. The state='results' corresponds to the text with information about search hits. And finally, the state='no_results' corresponds to the text shown when the search query did not return any results.

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

margin
The size of the vertical margin around each thumbnail. Actual thumbnail spacing equals the sum of the top and bottom margins set for .s7thumbcell .

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

width
Width of the thumbnail.
height
Height of the thumbnail.
border
Border 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

color
Text color.
font-family
Name of text font.
font-size
Size of text font.

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

width
Width of the scroll button.
height
Height of the scroll button.
background-image
The image that is displayed for a given button state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

NOTE
This button supports the state attribute selector, which can be used to apply different skins to "up", "down", "over", and "disabled" button states.

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);
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8