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. It also shows the user a message when their 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; state='results' corresponds to the text with information about search hits; and 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 10 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 grey default border, and a dark grey 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, grey, 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);

On this page