Set indicator

Last update: 2022-01-26
  • Created for:
  • Developer
    User

Set indicator is a series of dots rendered on top of main swatches when a viewer is used on a touch device. The dots help users to navigate through pages of thumbnails when scroll buttons are not available.

CSS properties of the set indicator

The appearance of the set indicator container is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7setindicator

CSS property

Description

background-color

The background color in hexadecimal format of the set indicator.

Example - To create a set indicator with a white background:

.s7mixedmediaviewer .s7setindicator {
 background-color: #FFFFFF;
}

The appearance of an individual set indicator dot is controlled with the CSS class selector:

.s7mixedmediaviewer .s7setindicator .s7dot

CSS property

Description

width

Width of the set indicator dot.

height

Height of the set indicator dot.

margin-left

Left margin in pixels.

margin-top

Top margin in pixels.

margin-right

Right margin in pixels.

margin-bottom

Bottom margin in pixels.

border-radius

Border radius in pixels.

background-color

Background color in hexadecimal format.

NOTE

Set indicator dot supports the state attribute selector, which can be used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the current page of thumbnails, state="unselected" corresponds to the default dot state.

Example - To create a set indicator dot that is 15 x 15 pixels, with a two pixel horizontal margin, five pixel top margin, one pixel bottom margin, 12 pixels radius, #D5D3D3 default color, and #939393 active color:

.s7mixedmediaviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7mixedmediaviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}
Previous page
Next page

On this page