Favorites view favorites-view

Favorites view consist of a column of thumbnail images.

The appearance of favorites view container is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7favoritesview

The position and the height of the Favorites view is managed by the view; in CSS it is only possible to define the width.

CSS properties of the Favorites view

background-color
Background color of the Favorites view.
width
Width of the view.

Example - to set up a Favorites view that is 100 pixels wide with a semi-transparent gray background.

.s7ecatalogsearchviewer .s7favoritesview {
 width: 100px;
 background-color: rgba(221, 221, 221, 0.5);
}

The spacing between Favorites thumbnails is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell

CSS properties of the Favorites thumbnails

margin
The size of the vertical margin around each thumbnail. The actual thumbnail spacing is equal to the sum of the top and bottom margin that is set for .s7thumbcell .

Example - To set up ten pixel spacing.

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
 margin: 5px;
}

The appearance of individual thumbnail is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7favoritesview .s7thumb

CSS properties of the Favorites thumbnails

width
Width of the thumbnail.
height
Height of the thumbnail.
border
Border of the thumbnail.
NOTE
Thumbnail supports the state attribute selector, which can be used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the thumbnail recently selected by the user. While state="default" corresponds to the rest of the thumbnails. And state="over" is used on mouse hover.

Example - To set up thumbnails that are 75 x 75 pixels, have a light gray default border, and a dark gray selected border.

.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
 width: 75px;
 height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

The appearance of the thumbnail label is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7favoritesview .s7label

CSS properties of the Favorites label

font-famiy
Font name.
font-size
Font size.

Example - to set up labels with a 14 pixel Helvetica® font.

.s7ecatalogsearchviewer .s7favoritesview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 14px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8