Show Menu
TOPICS×

Search button

CSS properties of the main viewer area
The appearance of the button is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7searchbutton
CSS property
Description
width
Width of the button.
height
Height of the button.
margin-top
Te offset from the top of the control bar.
margin-left
The distance to the next button on the left, or the left side of the control bar if this is the first button in a row.
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 .
This button supports the state and selected attribute selectors, which can be used to apply different skins to different button states.
In particular, selected='false' corresponds to the initial scroll button state, and selected='true' corresponds to the state when the search panel is active.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up a Search button that is 28 x 28 pixels, and displays a different image for each of the four different button states when selected or not selected.
.s7ecatalogsearchviewer .s7searchbutton{ 
 margin-top: 4px; 
 margin-left: 10px; 
 width:28px; 
 height:28px;  
 display: inline-block; 
 background-size:contain; 
} 
 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='up'] { 
 background-image:url(images/v2/Search_dark_up.png); 
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='over'] { 
 background-image:url(images/v2/Search_dark_over.png);  
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='down'] { 
 background-image:url(images/v2/Search_dark_down.png); 
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='disabled'] { 
 background-image:url(images/v2/Search_dark_disabled.png); 
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='up'] { 
 background-image:url(images/v2/Search_dark_over.png); 
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='over'] { 
 background-image:url(images/v2/Search_dark_over.png);  
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='down'] { 
 background-image:url(images/v2/Search_dark_over.png);  
} 
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='disabled'] { 
 background-image:url(images/v2/Search_dark_disabled.png);  
}