Die Favoritenansicht besteht aus einer Spalte mit Miniaturbildern.
Das Erscheinungsbild des Favoriten-Ansichtscontainers wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview
Die Position und Höhe der Favoriten-Ansicht werden 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 Pixel und einem halbtransparenten grauen Hintergrund.
.s7ecatalogsearchviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
Der Abstand zwischen Favoriten-Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell
CSS-Eigenschaften der Favoriten-Miniaturansichten
margin |
Die Größe des vertikalen Rands um jede Miniaturansicht. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe des oberen und unteren Rands, der für .s7thumbcell . |
Beispiel - Zum Einrichten von zehn Pixelabständen.
.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. |
Miniaturansichten unterstützen die state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere state="selected"
entspricht der Miniaturansicht, die der Benutzer kürzlich ausgewählt hat. while state="default"
entspricht dem Rest der Miniaturansichten. und state="over"
wird beim Bewegen der Maus verwendet.
Beispiel: Um Miniaturansichten mit einer Größe von 75 x 75 Pixel einzurichten, haben Sie einen hellgrauen Standardrahmen und einen dunkelgrauen ausgewählten Rahmen.
.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;
}
Das Erscheinungsbild der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7favoritesview .s7label
CSS-Eigenschaften der Bezeichnung "Favoriten"
Schriftfamilie |
Schriftname. |
Schriftgröße |
Schriftgröße. |
Beispiel - zum Einrichten von Bezeichnungen mit einer Helvetica®-Schrift von 14 Pixel.
.s7ecatalogsearchviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}