Favorites effect

The viewer displays Favorites icons over the main view in places where it was originally added by the user.

The appearance of the Favorite icon is controlled with the following CSS class selector:

.s7ecatalogsearchviewer .s7favoriteseffect .s7icon

CSS properties of the Favorite icon

background-image

The image that is displayed for the icon.

background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites .

width

Width of the icon.

height

Height of the icon.

Example - set up a 36 x 36 pixels Favorites icon.

.s7ecatalogsearchviewer .s7favoriteseffect .s7icon { 
 height: 36px; 
 width: 36px;  
 background-image: url(images/v2/FavoriteEffect_dark_up.png); 
}

On desktop systems, the component supports the cursortype attribute selector which you can apply to the .s7favoriteseffect class and controls the type of the cursor based on the selected user action. The following cursortype values are supported:

mode_add

Displayed user is adding a new Favorite icon.

mode_remove

Displayed user is removing an existing Favorite icon.

mode_view

Displayed in normal operation mode when Favorites editing is not active.

Example - have different mouse cursors for each type of component state.

.s7ecatalogsearchviewer .s7favoriteseffect[cursortype="mode_add"] { 
cursor: crosshair; 
} 
.s7ecatalogsearchviewer .s7favoriteseffect[cursortype="mode_remove"] { 
cursor: not-allowed; 
} 
.s7ecatalogsearchviewer .s7favoriteseffect[cursortype="mode_view"] { 
cursor: auto; 
}

On this page