Farbmuster

Farbmuster bestehen aus einer Zeile von Miniaturbildern mit optionalen Bildlauftasten auf der linken und rechten Seite. Farbmuster sind nur auf dem Desktop sichtbar, wenn alle Miniaturansichten nicht in die Breite des Containers passen. Auf Mobilgeräten oder wenn Miniaturansichten in die Container-Breite passen, werden keine Bildlauftasten angezeigt.

Das Erscheinungsbild des Farbmuster-Containers wird mit der CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches

CSS-Eigenschaften der Farbmuster

Beispiel: Zum Einrichten von Farbfeldern mit einer Höhe von 100 Pixel.

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

Der Abstand zwischen den Musterminiaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

Beispiel

So legen Sie den Abstand sowohl vertikal als auch horizontal auf zehn Pixel fest.

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

Das Erscheinungsbild der einzelnen Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

Beispiel: Zum Einrichten von Miniaturansichten mit 56 x 56 Pixel, einem hellgrauen Standardrahmen und einem dunkelgrauen ausgewählten Rahmen.

.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;
}

Das Erscheinungsbild der linken und rechten Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

Es ist nicht möglich, Bildlaufschaltflächen mithilfe von CSS zu positionieren top, left, bottom, und right Eigenschaften. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

Beispiel: Zum Einrichten von Bildlaufschaltflächen mit einer Größe von 56 x 56 Pixel und einer für jeden Status unterschiedlichen Grafik.

.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);
}