Show Menu
TOPICS×

Set indicator

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 set up 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.
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 set up set indicator dot to be 15 x 15 pixels, with two pixels horizontal margin, five pixels top margin, one pixel bottom margin, twelve 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;  
}