Die Ansicht "Favoriten"besteht aus einer Spalte mit Miniaturbildern.
Das Erscheinungsbild des Containers der Favoriten-Ansicht wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview
Die Position und Höhe der Favoriten-Ansicht wird von der Ansicht verwaltet; in CSS ist es nur möglich, die Breite zu definieren.
CSS-Eigenschaften der Favoriten-Ansicht
background-color |
Hintergrundfarbe der Favoriten-Ansicht. |
width |
Breite der Ansicht. |
Beispiel: Zum Einrichten einer Favoriten-Ansicht mit einer Breite von 100 Pixeln und einem halbtransparenten grauen Hintergrund.
.s7ecatalogsearchviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
Der Abstand zwischen den Favoriten-Miniaturbildern wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell
CSS-Eigenschaften der Favoriten-Miniaturansichten
margin |
Die Größe des vertikalen Randes um die einzelnen Miniaturansichten. Der tatsächliche Abstand zwischen den Miniaturansichten entspricht der Summe der oberen und unteren Ränder, die für .s7thumbcell festgelegt wurde. |
Beispiel: Zum Einrichten eines 10-Pixel-Abstands.
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
Das Erscheinungsbild der einzelnen Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview .s7thumb
CSS-Eigenschaften der Favoriten-Miniaturansichten
width |
Breite der Miniaturansicht. |
height |
Höhe der Miniaturansicht. |
rand |
Rand der Miniaturansicht. |
Die Miniaturansicht unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected"
der kürzlich vom Benutzer ausgewählten Miniaturansicht. state="default"
entspricht dem Rest der Miniaturansichten. Und state="over"
wird beim Bewegen der Maus verwendet.
Beispiel: Zum Einrichten von Miniaturbildern mit 75 x 75 Pixel, einem hellgrauen Standardrand und einem dunkelgrauen ausgewählten Rand.
.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Die Darstellung der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview .s7label
CSS-Eigenschaften der Favoritenbeschriftung
font-famiy |
Schriftname. |
font-size |
Schriftgröße. |
Beispiel: Zum Einrichten von Beschriftungen mit einer Helvetica-Schrift von 14 Pixel.
.s7ecatalogsearchviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}