Color swatches

Color swatches consist of a row of thumbnail images with optional scroll buttons on the left- and right-hand side. Color swatches 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.

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

CSS properties of the color swatches

Example - to set up swatches with a height of 100 pixels.

.s7mixedmediviewer .s7colorswatches .s7swatches {
 height: 100px;
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

Example

To set spacing to ten pixels both vertically and horizontally.

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

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

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .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.

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

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

Business.Adobe.com resources

Multichannel Communication Auto Form Fill Customer Communications Content Intelligence Dynamic Forms Content Management