Hauptmuster main-swatches

Hauptmuster bestehen aus einer Zeile von Miniaturbildern mit optionalen Bildlauftasten auf der linken und rechten Seite. Bildlaufschaltflächen sind nur dann 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 .s7swatches

CSS-Eigenschaften der Muster

Höhe
Die Höhe der Farbfelder.
unten
Die vertikalen Farbfelder versetzen sich relativ zum Viewer-Container.

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

.s7mixedmediviewer .s7swatches {
 height: 100px;
}

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

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSS-Eigenschaft
Beschreibung
margin
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe des linken und rechten Rands, der für .s7thumbcell festgelegt wurde.

Beispiel

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

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

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

.s7mixedmediaviewer .s7swatches .s7thumb

CSS-Eigenschaft
Beschreibung
width
Breite der Miniaturansicht.
Höhe
Höhe der Miniaturansicht.
border
Rand der Miniaturansicht.
NOTE
Miniaturansichten unterstützen die “state”-Attributauswahl, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected" der Miniaturansicht des Bildes, das derzeit in der Hauptansicht angezeigt wird, state="default" dem Rest der Miniaturansichten und state="over" beim Bewegen der Maus.

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

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

Der Typ des Assets wird als Symbol angezeigt, das über dem Miniaturbild überlagert ist. Er wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

CSS-Eigenschaft
Beschreibung
width
Breite der Symbolüberlagerung.
Höhe
Höhe der Symbolüberlagerung.

Die Überlagerung unterstützt die "type"-Attributauswahl mit den folgenden möglichen Werten: image (für einzelne Bilder), swatchset (für Mustersets), spinset (für Rotationssets) und video (für einzelne Videos oder adaptive Videosets).

Beispiel: So richten Sie Symbolüberlagerungen für Rotationssets, Mustersets und Videos ein:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
 background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
 background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
 background-image: url(images/v2/ThumbOverlayVideo.png);
}

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

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

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

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

Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites.

NOTE
Diese Schaltfläche unterstützt die "state"-Attributauswahl, die verwendet werden kann, um unterschiedliche Schaltflächenzustände anzuwenden: up, down, over und disabled.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen .

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

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8