Favorites view

Favorites view consists of a column of thumbnail images.

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

.s7ecatalogviewer .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.

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

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

.s7ecatalogviewer .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.

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

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

.s7ecatalogviewer .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. 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.

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

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

.s7ecatalogviewer .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.

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

On this page