The position of the button is fully managed by the Favorites menu.
The appearance of the View All Favorites button is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7viewallfavoritebutton
CSS properties of the Remove Favorite 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 . |
width |
Width of the button. |
height |
Height of the button. |
This button supports both the state
and selected
attribute selectors, which can be used to apply different skins to different button states. In particular, selected='true'
corresponds to the state when a user can add a new Favorite icon by clicking or tapping. The selected='false'
corresponds to the normal operation mode when a user can zoom, pan, and swap pages.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up a View All favorites 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 .s7viewallfavoritebutton {
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='false'][state='up'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='false'][state='over'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='false'][state='down'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_disabled.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='true'][state='up'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='true'][state='over'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='true'][state='down'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7viewallfavoritebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ViewAllFavoritesButton_dark_disabled.png);
}