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

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

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

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

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

.s7ecatalogsearchviewer .s7favoritesview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 14px;
}