Flyout-Zoom-Ansicht

Die Haupt-Ansicht besteht aus dem statischen Bild, dem gezoomten Bild, das in der Flyout-Ansicht über dem statischen Bild angezeigt wird, und der Tipp-Meldung, die über dem statischen Bild angezeigt wird.

CSS-Eigenschaften der Haupt-Ansicht

Das Erscheinungsbild der Hauptklasse wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7flyoutviewer .s7flyoutzoomview

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe der Haupt-Ansicht.

Beispiel: So machen Sie die Ansicht transparent:

.s7flyoutviewer .s7flyoutzoomview { 
 background-color: transparent; 
}

CSS-Eigenschaften der Tippmeldung

Das Erscheinungsbild der Tipp-Meldung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7flyoutviewer .s7flyoutzoomview .s7tip

Es ist möglich, Schriftstil, Größendarstellung und vertikalen Versatz mithilfe von CSS zu konfigurieren. Die horizontale Ausrichtung wird jedoch von der Viewer-Logik verwaltet. Das Überschreiben durch CSS mit den Eigenschaften left oder right wird nicht unterstützt.

CSS-Eigenschaft

Beschreibung

unten

Versatz unten in der Haupt-Ansicht.

color

Textfarbe.

font-family

Schriftname.

font-size

Schriftgröße.

Padding

Umrandung des Nachrichtentextes.

background-color

Hintergrundfüllfarbe des Nachrichtentextes.

border-radius

Rahmenradius des Nachrichtentextes im Hintergrund

Deckkraft

Hintergrunddeckkraft des Nachrichtentextes.

Verwenden Sie für Internet Explorer 8 filter:alpha(opacity-...) )

Die Tippmeldung kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

.

Beispiel: So richten Sie eine halbtransparente Tipp-Meldung mit einer weißen Arial-12-Pixel-Schrift ein, die um 50 Pixel vom unteren Rand der Ansicht, einer Auffüllung und einem gerundeten Rand versetzt ist:

.s7flyoutviewer .s7flyoutzoomview .s7tip { 
bottom: 50px; 
color: #ffffff; 
font-family: Arial; 
font-size: 12px; 
padding-bottom: 10px; 
padding-top: 10px; 
padding-left: 12px; 
padding-right: 12px; 
background-color: #000000; 
border-radius: 4px; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
}

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