Favorites effect 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8