Show Menu
TOPICS×

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 grey 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 10 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.
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. 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 grey default border, and a dark grey 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; 
}