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 button is the first 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);
}