Favorites effect

Last update: 2021-11-06
  • Created for:
  • Developer

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:

.s7ecatalogviewer .s7favoriteseffect .s7icon

CSS properties of the Favorite icon


The image that is displayed for the icon.


Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites .


Width of the icon.


Height of the icon.

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

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


Displayed user is adding a new Favorite icon.


Displayed user is removing an existing Favorite icon.


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

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

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

On this page