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
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
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
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);