Farbfelder color-swatches

Farbfelder bestehen aus einer Reihe von Miniaturbildern mit optionalen Bildlaufschaltflächen auf der linken und rechten Seite. Farbfelder werden nur dann auf dem Desktop angezeigt, wenn alle Miniaturen nicht in die Breite des Containers passen. Auf Mobilgeräten oder wenn Miniaturen in die Container-Breite passen, werden die Bildlaufschaltflächen nicht angezeigt.

Das Erscheinungsbild des Farbfeld-Containers wird mit dem CSS-Klassenselektor gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches

CSS-Eigenschaften der Farbfelder

Breite
Die Breite der Farbfelder.
Höhe
Die Höhe der Farbfelder.
untere
Die vertikalen Farbfelder, die relativ zum Viewer-Container versetzt sind.

Beispiel: So richten Sie Farbfelder mit einer Höhe von 100 Pixel ein.

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

Der Abstand zwischen den Musterminiaturen wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS-Eigenschaft
Beschreibung
-
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche Abstand zwischen den Miniaturen entspricht der Summe der linken und rechten Ränder, die für s7thumbcell- festgelegt wurden.

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 Miniaturen wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

CSS-Eigenschaft
Beschreibung
Breite
Breite der Miniaturansicht.
Höhe
Höhe der Miniatur.
-
Rahmen der Miniatur.
NOTE
„Miniaturansicht“ unterstützt die state-Attributauswahl, mit der verschiedene Skins auf verschiedene Miniaturansichtszustände angewendet werden können. Insbesondere entspricht state="selected" der Miniatur für das Bild, das derzeit in der Hauptansicht angezeigt wird, state="default" entspricht dem Rest der Miniaturen, und state="over" wird beim Bewegen des Mauszeigers verwendet.

Beispiel: Für Miniaturen mit einer Größe von 56 x 56 Pixel wird ein hellgrauer Standardrahmen und ein dunkelgrauer Rahmen ausgewählt.

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

Scroll-Schaltflächen können nicht mit den Eigenschaften CSS top, left, bottom und right positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaft
Beschreibung
Breite
Breite der Bildlaufschaltfläche.
Höhe
Höhe der Bildlaufschaltfläche.
Hintergrundbild-
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.
Hintergrundposition

Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.

Siehe von CSS-Sprites.

NOTE
Diese Schaltfläche unterstützt die state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können: up, down, over und disabled.

Beispiel: So richten Sie Bildlaufschaltflächen ein, die eine Größe von 56 x 56 Pixeln haben und für jeden Status unterschiedliche Grafiken aufweisen.

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8