Favoriten-Ansicht

Die Ansicht "Favoriten"besteht aus einer Spalte mit Miniaturbildern.

Das Erscheinungsbild des Containers Favorites Ansicht wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7favoritesview { 
 width: 100px; 
 background-color: rgba(221, 221, 221, 0.5); 
}

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

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7favoritesview .s7thumbcell { 
 margin: 5px; 
}

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

.s7ecatalogviewer .s7favoritesview .s7thumb

CSS-Eigenschaften der Favoriten-Miniaturansichten

width

Breite der Miniaturansicht.

height

Höhe der Miniaturansicht.

rand

Rand der Miniaturansicht.

HINWEIS

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.

.s7ecatalogviewer .s7favoritesview .s7thumb { 
 width: 75px; 
 height: 75px;  
} 
.s7ecatalogviewer .s7favoritesview .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7ecatalogviewer .s7favoritesview .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

Die Darstellung der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7favoritesview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 14px; 
}

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now