Swatches

Swatches consist of a row of thumbnail images with optional scroll buttons on the left and right hand side.

Scroll buttons are only visible on the desktop if all thumbnails cannot fit into the width of the container. On mobile devices, or if thumbnails can fit into the container width, scroll buttons are not shown.

CSS properties of the swatches

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

.s7flyoutviewer .s7swatches

CSS property

Description

width

The width of the swatches.

height

The height of the swatches.

bottom

The vertical swatches offset relative to the viewer container.

Example - to set up swatches to 460 x 100 pixels:

.s7flyoutviewer .s7swatches { 
 width: 460px; 
 height: 100px;  
}

CSS properties of the thumbnail swatch spacing

The spacing between swatch thumbnails is controlled with the CSS class selector:

.s7flyoutviewer .s7swatches .s7thumbcell

CSS property

Description

margin

The size of the horizontal and vertical margin around each thumbnail. Actual thumbnail spacing equals to the sum of left and right margin set for .s7thumbcell .

Example - to set up spacing to be 10 pixels both vertically and horizontally:

.s7flyoutviewer .s7swatches .s7thumbcell { 
 margin: 5px; 
}

CSS properties of the thumbnail swatches

The appearance of individual thumbnail is controlled with the following CSS class selector:

.s7flyoutviewer .s7swatches .s7thumb

CSS property

Description

width

The width of the thumbnail swatches.

height

The height of the thumbnail swatches.

border

The border of the thumbnail swatches.

NOTE

Thumbnail supports the state attribute selector, which is used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the thumbnail for the image that is currently displayed in the main view, state="default" corresponds to the rest of the thumbnails, and state="over" is used on mouse hover.

Example - to set up thumbnails that are 56 x 56 pixels, have a light grey default border, and a dark grey selected border:

.s7flyoutviewer .s7swatches .s7thumb { 
 width: 56px; 
 height: 56px;  
} 
.s7flyoutviewer .s7swatches .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

CSS properties of the left and right scroll buttons

The appearance of left and right scroll buttons are controlled with the following CSS class selectors:

.s7flyoutviewer .s7swatches .s7scrollleftbutton 
.s7flyoutviewer .s7swatches .s7scrollrightbutton

It is not possible to position scroll buttons using CSS top, left, bottom, and right properties. Instead, the viewer logic positions them automatically.

CSS property

Description

width

The width of the scroll button.

height

The height of the scroll button.

background-image

The image that is displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites .

NOTE

This button supports the state attribute selector, which is used to apply different skins to button states up, down, over, and disabled.

The button tool tips can be localized. See Localization of user interface elements for more information.

Example - to set up scroll buttons that are 56 x 56 pixels and have different artwork for each state:

.s7flyoutviewer .s7swatches .s7scrollleftbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{ 
background-image:url(images/v2/ScrollLeftButton_up.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{ 
 background-image:url(images/v2/ScrollLeftButton_over.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{ 
 background-image:url(images/v2/ScrollLeftButton_down.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollLeftButton_disabled.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{ 
background-image:url(images/v2/ScrollRightButton_up.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{ 
 background-image:url(images/v2/ScrollRightButton_over.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{ 
 background-image:url(images/v2/ScrollRightButton_down.png); 
} 
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollRightButton_disabled.png); 
}

On this page