Flyout-Zoom-Ansicht

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

CSS-Eigenschaften der Hauptansicht

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

.s7flyoutviewer .s7flyoutzoomview

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe der Hauptansicht.

Beispiel - um die Hauptansicht transparent zu machen:

.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ößenaussehen und vertikalen Versatz über 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 Hauptansicht.

color

Textfarbe.

Schriftfamilie

Schriftname.

Schriftgröße

Schriftgröße.

Padding

Auffüllung um den Nachrichtentext.

background-color

Hintergrundfüllfarbe des Nachrichtentextes.

border-radius

Hintergrundrahmenradius des Nachrichtentextes

Deckkraft

Hintergrunddeckkraft des Nachrichtentextes.

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

Die Tipp-Nachricht kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

.

Beispiel: Zum Einrichten einer halbtransparenten Tipp-Meldung mit weißer Arial-12-Pixel-Schriftart, 50 Pixel Abstand vom unteren Rand der Hauptansicht, Abstand und gerundeter Rahmen:

.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