Email Share

Das Tool zum Weitergeben per E-Mail besteht aus einer Schaltfläche, die dem Social Sharing-Bedienfeld hinzugefügt wird, sowie dem modalen Dialogfeld, das angezeigt wird, wenn das Tool aktiviert wird. Die Position der Schaltfläche wird vollständig vom Social Sharing-Tool verwaltet.

Das Erscheinungsbild der E-Mail-Freigabe-Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emailshare

CSS-Eigenschaften des E-Mail-Freigabe-Tools

width

Breite der Schaltfläche.

height

Höhe der Schaltfläche.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Sie können die Schaltfläche aus dem Social Sharing-Bedienfeld entfernen, indem Sie die CSS-Eigenschaft für display:none in der CSS-Klasse festlegen.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten einer E-Mail-Freigabe-Schaltfläche mit 28 x 28 Pixeln, die für jeden der vier Schaltflächenzustände ein anderes Bild anzeigt.

.s7videoviewer .s7emailshare { 
 width:28px; 
 height:28px; 
} 
.s7videoviewer .s7emailshare[state='up'] { 
background-image:url(images/v2/EmailShare_dark_up.png); 
} 
.s7videoviewer .s7emailshare[state='over'] { 
background-image:url(images/v2/EmailShare_dark_over.png); 
} 
.s7videoviewer .s7emailshare[state='down'] { 
background-image:url(images/v2/EmailShare_dark_down.png); 
} 
.s7videoviewer .s7emailshare[state='disabled'] { 
background-image:url(images/v2/EmailShare_dark_disabled.png); 
}

Die Hintergrundüberlagerung, die eine Webseite umfasst, wenn das Dialogfeld aktiv ist, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7backoverlay

CSS-Eigenschaften der Zurück-Überlagerung

Deckkraft

Deckkraft der Hintergrundüberlagerung.

background-color

Hintergrundüberlagerungsfarbe.

Beispiel: So richten Sie eine Hintergrundüberlagerung ein, die grau mit einer Deckkraft von 70 % sein soll:

.s7videoviewer .s7emaildialog .s7backoverlay { 
 opacity:0.7; 
 background-color:#222222; 
}

Standardmäßig wird das modale Dialogfeld auf Desktop-Systemen zentriert angezeigt und nimmt den gesamten Webseitenbereich auf Touch-Geräten. In allen Fällen wird die Positionierung und Größe des Dialogfelds von der Komponente verwaltet. Das Dialogfeld wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialog

CSS-Eigenschaften des Dialogfelds

border-radius

Rahmenradius des Dialogfelds (falls das Dialogfeld nicht das gesamte Browserfenster aufnimmt);

background-color

Hintergrundfarbe des Dialogfelds;

width

Sollte entweder nicht eingestellt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browserfenster in Anspruch (dieser Modus wird auf Touch-Geräten bevorzugt).

height

Sollte entweder nicht eingestellt oder auf 100% eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browserfenster auf (dieser Modus wird auf Touch-Geräten bevorzugt).

Beispiel: Zum Einrichten eines Dialogfelds, das das gesamte Browserfenster mit weißem Hintergrund auf Touch-Geräten verwendet:

.s7videoviewer .s7touchinput .s7emaildialog .s7dialog { 
 width:100%; 
 height:100%; 
background-color: #ffffff; 
}

Die Kopfzeile des Dialogfelds besteht aus einem Symbol, einem Titeltext und einer Schließen-Schaltfläche. Der Header-Container wird mit dem folgenden CSS-Klassenselektor gesteuert

.s7videoviewer .s7emaildialog .s7dialogheader

CSS-Eigenschaften der Kopfzeile des Dialogfelds

Padding

Innenabstand für Kopfzeileninhalte.

Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der mit

.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogelinie

Padding

Innenabstand für das Kopfzeilensymbol und den Titel

Das Kopfzeilensymbol wird mit der folgenden CSS-Klassenauswahl gesteuert

.s7videoviewer .s7emaildialog .s7dialogheadericon

CSS-Eigenschaften des Dialogfeldkopfzeilensymbols

width

Symbolbreite

height

Symbolhöhe.

background-image

Symbolbild.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

Der Kopfzeilentitel wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogheadertext

CSS-Eigenschaften des Dialogfeldkopfzeilentextes

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schrifthöhe.

font-family

Schriftfamilie.

Padding

Interne Textfüllung.

Die Schließen-Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7emaildialog .s7closebutton

CSS-Eigenschaften der Schließen-Schaltfläche

Anfang

Vertikale Schaltflächenposition relativ zum Container der Kopfzeile.

rechts

Horizontale Schaltflächenposition relativ zum Container der Kopfzeile.

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

Padding

Innenabstand der Schaltfläche.

background-image

Schaltflächenbild für jeden Status.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfo der Schaltfläche Schließen und der Titel des Dialogfelds können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten der Dialogkopfzeile mit Auffüllung, einem Symbol mit 24 x 17 Pixeln, einem fett gedruckten Titel mit 16 pt und einer Schließen-Schaltfläche mit 28 x 28 Pixel, die 2 Pixel von oben und 2 Pixel von rechts vom Container des Dialogfelds positioniert ist:

.s7videoviewer .s7emaildialog .s7dialogheader { 
 padding: 10px; 
} 
.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline { 
 padding: 10px 10px 2px; 
} 
.s7videoviewer .s7emaildialog .s7dialogheadericon { 
    background-image: url("images/sdk/dlgemail_cap.png"); 
    height: 17px; 
    width: 24px; 
} 
.s7videoviewer .s7emaildialog .s7dialogheadertext { 
    font-size: 16pt; 
    font-weight: bold; 
    padding-left: 16px; 
} 
.s7videoviewer .s7emaildialog .s7closebutton { 
 top:2px; 
 right:2px; 
 padding:8px; 
 width:28px; 
 height:28px; 
} 
.s7videoviewer .s7emaildialog .s7closebutton[state='up'] { 
 background-image:url(images/sdk/close_up.png); 
} 
.s7videoviewer .s7emaildialog .s7closebutton[state='over'] { 
 background-image:url(images/sdk/close_over.png); 
} 
.s7videoviewer .s7emaildialog .s7closebutton[state='down'] { 
 background-image:url(images/sdk/close_down.png); 
} 
.s7videoviewer .s7emaildialog .s7closebutton[state='disabled'] { 
 background-image:url(images/sdk/close_disabled.png); 
}

Die Dialogfußzeile besteht aus Schaltflächen zum Abbrechen und Senden von E-Mails. Der Container der Fußzeile wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogfooter

CSS-Eigenschaften der Fußzeile des Dialogfelds

rand

Rand, der verwendet werden kann, um die Fußzeile visuell vom Rest des Dialogfelds zu trennen.

Die Fußzeile hat einen inneren Container, der beide Schaltflächen enthält. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer

CSS-Eigenschaften des Containers für die Schaltfläche "Dialogfeld"

Padding

Innere Umrandung zwischen der Fußzeile und den Schaltflächen.

Die Schaltfläche "Abbrechen"wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7videoviewer .s7emaildialog .s7dialogcancelbutton

CSS-Eigenschaften der Schaltfläche "Abbrechen"im Dialogfeld

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

color

Schaltflächentextfarbe für jeden Status.

background-color

Hintergrundfarbe der Schaltflächen für jeden Status.

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die Schaltfläche "E-Mail senden"wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogactionbutton

CSS-Eigenschaften der Aktionsschaltfläche des Dialogfelds

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

color

Schaltflächentextfarbe für jeden Status.

background-color

Hintergrundfarbe der Schaltflächen für jeden Status.

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Darüber hinaus verwenden beide Schaltflächen dieselbe CSS-Klasse, die CSS-Einstellungen enthalten kann, die für andere Dialogfeldschaltflächen gleich sind:

.s7videoviewer .s7emaildialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

font-Gewichtung

Gewichtung der Schaltflächenschrift.

font-size

Schaltflächenschriftgröße

font-family

Schaltflächenschriftfamilie.

line-height

Texthöhe innerhalb der Schaltfläche. Betrifft die vertikale Ausrichtung.

box-shadow

Schlagschatten.

margin-right

Ränder der rechten Schaltfläche.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie eine Fußzeile des Dialogfelds mit der Schaltfläche "Abbrechen"im Format 64 x 34 und einer Schaltfläche "Senden per E-Mail"im Format 82 x 34 ein, wobei die Textfarbe und die Hintergrundfarbe je nach Schaltflächenstatus unterschiedlich sind:

.s7videoviewer .s7emaildialog .s7dialogfooter { 
    border-top: 1px solid #909090; 
} 
.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer { 
    padding-bottom: 6px; 
    padding-top: 10px; 
} 
.s7videoviewer .s7emaildialog .s7dialogfooter .s7button { 
    box-shadow: 1px 1px 1px #999999; 
    color: #FFFFFF; 
    font-size: 9pt; 
    font-weight: bold; 
    line-height: 34px; 
    margin-right: 10px; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton { 
 width:64px; 
 height:34px; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] { 
 background-color:#666666; 
 color:#dddddd; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] { 
 background-color:#555555; 
 color:#ffffff; 
} 
.s7videoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton { 
 width:82px; 
 height:34px; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='up'] { 
 background-color:#333333; 
 color:#dddddd; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='down'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='over'] { 
 background-color:#222222; 
 color:#cccccc; 
} 
.s7videoviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] { 
 background-color:#b2b2b2; 
 color:#dddddd; 
}

Der Hauptdialogbereich (zwischen der Kopf- und Fußzeile) enthält durchlaufbare Dialogfeldinhalte und den Bildlaufbereich auf der rechten Seite. In allen Fällen verwaltet die Komponente die Breite dieses Bereichs, es ist nicht möglich, es in CSS festzulegen. Der Hauptdialogbereich wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogviewarea

CSS-Eigenschaften des Dialogfelds für den Anzeigebereich

height

Die Höhe des Hauptdialogfeldbereichs. Sie sollte nur angegeben werden, wenn das Dialogfeld im Desktop-Modus funktioniert. Dies ist nicht möglich, wenn die Größe des Dialogfelds die Größe des gesamten Browserfensters einnimmt.

background-color

Die Hintergrundfarbe des Hauptdialogfeldbereichs.

margin

Äußerer Rand.

HINWEIS

Der Hauptdialogfeldbereich unterstützt die optionale Attributauswahl state. Es ist auf sendsuccess eingestellt, wenn das E-Mail-Formular gesendet wird und das Dialogfeld eine Bestätigungsmeldung anzeigt. Solange die Bestätigungsmeldung klein ist, kann mit dieser Attributauswahl die Höhe des Dialogfelds verringert werden, wenn eine solche Bestätigungsmeldung angezeigt wird.

Beispiel: Um den Bereich des Hauptdialogfelds auf eine anfängliche Höhe von 300 Pixel und eine Höhe von 100 Pixel festzulegen, haben Sie einen Ränder von 10 Pixel und einen weißen Hintergrund:

.s7videoviewer .s7emaildialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
} 
.s7videoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] { 
 height:100px; 
}

Der gesamte Formularinhalt (wie Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit

.s7videoviewer .s7emaildialog .s7dialogbody

Wenn die Höhe dieses Containers größer als der des Hauptdialogfelds zu sein scheint, wird automatisch ein vertikaler Bildlauf von der Komponente aktiviert.

CSS-Eigenschaften des Dialogfeldtextes

Padding

Innenabstand.

Beispiel: So richten Sie Formularinhalte mit einer Auffüllung von zehn Pixeln ein:

.s7videoviewer .s7emaildialog .s7dialogbody { 
    padding: 10px; 
}

Das Dialogfeldformular wird zeilenweise ausgefüllt, wobei jede Zeile einen Teil des Formularinhalts enthält (z. B. eine Beschriftung und ein Texteingabefeld). Eine einzelne Formularzeile wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

Padding

Innenzeilenfüllung.

Beispiel: So richten Sie ein Dialogfeld ein, in dem jede Zeile mit zehn Pixeln aufgefüllt werden kann:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline { 
    padding: 10px; 
}

Alle statischen Beschriftungen im Dialogfeld werden mit

.s7videoviewer .s7emaildialog .s7dialoglabel

Diese Klasse eignet sich nicht zum Steuern der Größe oder Position von Beschriftungen, da Sie sie auf Texte an verschiedenen Stellen der Benutzeroberfläche des Formulars anwenden können.

CSS-Eigenschaften der Beschriftung des Dialogfelds.

font-Gewichtung

Gewichtung der Beschriftungsschrift

font-size

Schriftgröße beschriften.

font-family

Schriftfamilie beschriften.

color

Beschriftungstextfarbe.

Die Beschriftungen des Dialogfelds können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie alle Beschriftungen so ein, dass sie grau und fett mit einer Schrift von neun Pixeln sind:

.s7videoviewer .s7emaildialog .s7dialoglabel { 
    color: #666666; 
    font-size: 9pt; 
    font-weight: bold; 
}

Alle statischen Beschriftungen, die links neben den Formulareingabefeldern angezeigt werden, werden wie folgt gesteuert:

.s7videoviewer .s7emaildialog .s7dialoginputlabel

CSS-Eigenschaften der Beschriftung für die Eingabe im Dialogfeld

width

Die Breite der statischen Beschriftung.

text-align

Die horizontale Textausrichtung.

margin

Statischer Rand für Beschriftungen.

Padding

Statische Auffüllung der Beschriftung.

Beispiel: Um die Beschriftungen für Eingabefelder auf eine Breite von 50 Pixel, rechtsbündig, mit einer Auffüllung von zehn Pixeln und einem Rand von zehn Pixeln rechts festzulegen, müssen Sie folgende Werte eingeben:

.s7videoviewer .s7emaildialog .s7dialoginputlabel { 
    margin-right: 10px; 
    padding: 10px; 
    text-align: right; 
    width: 50px; 
}

Jedes Formulareingabefeld wird in den Container eingeschlossen, mit dem Sie einen benutzerdefinierten Rahmen um das Eingabefeld anwenden können. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialoginputcontainer

CSS-Eigenschaften des Containers für die Eingabe im Dialogfeld

rand

Ränder um den Container des Eingabefelds.

Padding

Innenabstand.

HINWEIS

Der Container für Eingabefelder unterstützt die optionale Attributauswahl state. Sie ist auf verifyerror eingestellt, wenn der Benutzer einen Fehler im Eingabedatenformat macht und die Inline-Überprüfung fehlschlägt. Mit dieser Attributauswahl können Sie falsche Benutzereingaben im Formular hervorheben.

Die meisten Eingabefelder, die sich von der Beschriftung links bis rechts vom Textkörper des Dialogfelds (einschließlich "from"- und "message"-Feld) ausbreiten, werden wie folgt gesteuert:

.s7videoviewer .s7emaildialog .s7dialoginputwide

CSS-Eigenschaften des Dialogfelds geben breites Feld ein

width

Breite des Eingabefelds.

Das Eingabefeld "An"ist schmaler, da auf der rechten Seite Platz für die Schaltfläche "E-Mail entfernen"zugewiesen wird. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialoginputshort

CSS-Eigenschaften des Dialogfelds Eingabe-Kurzfelds

width

Breite des Eingabefelds.

Beispiel: So richten Sie ein Formular so ein, dass es einen grauen Rand von einem Pixel mit einer Auffüllung von neun Pixeln um alle Eingabefelder hat. für Felder, bei denen die Überprüfung fehlschlägt, denselben roten Rand haben, bis das "An"-Eingabefeld 250 Pixel breit und die übrigen Eingabefelder 300 Pixel breit ist:

.s7videoviewer .s7emaildialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 9px; 
} 
.s7videoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] { 
    border: 1px solid #FF0000; 
} 
.s7videoviewer .s7emaildialog .s7dialoginputshort { 
    width: 250px; 
} 
.s7videoviewer .s7emaildialog .s7dialoginputwide { 
    width: 300px; 
}

Das Eingabefeld für E-Mail-Nachrichten wird zusätzlich gesteuert durch:

.s7videoviewer .s7emaildialog .s7dialogmessage

Mit dieser Klasse können Sie spezifische Eigenschaften für das zugrunde liegende TEXTAREA-Element festlegen.

CSS-Eigenschaften der Dialogfeldmeldung

height

Messhöhe.

word-wrap

Umbruchstil.

Beispiel: So richten Sie eine E-Mail-Nachricht auf eine Höhe von 50 Pixel ein und verwenden Sie das Umbrechen von break-word-Wörtern:

.s7videoviewer .s7emaildialog .s7dialogmessage { 
    height: 50px; 
    word-wrap: break-word; 
}

Über die Schaltfläche "Hinzufügen weitere E-Mail-Adresse"können Benutzer mehr als einen Empfänger in das E-Mail-Formular einfügen. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton

CSS-Eigenschaften des Dialogfelds Schaltfläche "E-Mail-Adresse hinzufügen"

height

Schaltflächenhöhe.

color

Schaltflächentextfarbe für jeden Status.

background-image

Schaltflächenbild für jeden Status.

background-position

Position des Schaltflächenbilds im Schaltflächenbereich.

font-Gewichtung

Gewichtung der Schaltflächenschrift.

font-size

Schaltflächenschriftgröße

font-family

Schaltflächenschriftfamilie.

line-height

Texthöhe innerhalb der Schaltfläche. Betrifft die vertikale Ausrichtung.

text-align

Horizontale Textausrichtung.

Padding

Innenabstand.

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um die Schaltfläche "Hinzufügen weitere E-Mail-Adresse"auf eine Höhe von 25 Pixel festzulegen, verwenden Sie eine 12-Punkt-Schriftart mit der rechten Ausrichtung und eine andere Textfarbe und ein anderes Bild für jeden Status:

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton { 
 text-align:right; 
 font-size:12pt; 
 font-weight:bold; 
 background-position:left center; 
 line-height:25px; 
 padding-left:30px; 
 height:25px; 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] { 
 color:#000000; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] { 
 color:#000000; 
 text-decoration:underline; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
}

Mit der Schaltfläche "Entfernen"können Benutzer zusätzliche Adressen aus dem E-Mail-Formular entfernen. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton

CSS-Eigenschaften des Dialogfelds entfernen E-Mail-Schaltfläche

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

background-image

Schaltflächenbild für jeden Status.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um die Schaltfläche "Entfernen"so einzurichten, dass sie 25 x 25 Pixel groß ist und für jeden Status ein anderes Bild verwendet wird:

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton { 
 width:25px; 
 height:25px; 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
}

Der freigegebene Inhalt wird unten im Dialogfeld angezeigt und enthält eine Miniaturansicht, einen Titel, eine Herkünfte-URL und eine Beschreibung. Es wird in Container umhüllt, der wie folgt gesteuert wird:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent

CSS-Eigenschaften des Dialogfeldinhalts

rand

Container.

Padding

Innenabstand.

Beispiel: So richten Sie einen unteren Container ein, der einen gepunkteten Rahmen von einem Pixel und keine Auffüllung hat:

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent { 
    border: 1px dotted #A0A0A0; 
    padding: 0; 
}

Miniaturbild wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogthumbnail

Die background-image-Eigenschaft wird durch die Komponentenlogik festgelegt.

CSS-Eigenschaften des Miniaturbilds des Dialogfelds

width

Breite der Miniaturansicht.

height

Höhe der Miniaturansichten.

vertical-align

Miniaturansicht für vertikale Ausrichtung.

Padding

Innenabstand.

Beispiel: Um die Miniaturansicht auf 90 x 60 Pixel und die obere Ausrichtung mit 10 Pixel Abstand festzulegen,

.s7videoviewer .s7emaildialog .s7dialogthumbnail { 
    height: 60px; 
    padding: 10px; 
    vertical-align: top; 
    width: 90px; 
}

Titel, Herkunft und Beschreibung des Inhalts werden weiter in einem Bereich rechts neben der Inhaltsminiaturansicht gruppiert. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialoginfopanel

CSS-Eigenschaften des Infofelds-Dialogfelds

width

Bedienfeldbreite.

Beispiel: So richten Sie ein Inhaltsinformationsbedienfeld auf eine Breite von 300 Pixel ein:

.s7videoviewer .s7emaildialog .s7dialoginfopanel { 
    width: 300px; 
}

Der Inhaltstitel wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogtitle

CSS-Eigenschaften des Dialogfeldtitels

margin

Äußerer Rand.

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schriftgröße.

font-family

Schriftfamilie.

Beispiel: So richten Sie einen Inhaltstitel ein, um eine fett gedruckte Schrift mit einem Ränder von zehn Pixeln zu verwenden:

.s7videoviewer .s7emaildialog .s7dialogtitle { 
    font-weight: bold; 
    margin: 10px; 
}

Content Herkunft wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogorigin

CSS-Eigenschaften der Herkunft des Inhalts des Dialogfelds

margin

Äußerer Rand.

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schriftgröße.

font-family

Schriftfamilie.

Beispiel: So richten Sie die Content-Herkunft auf einen 10-Pixel-Rand ein:

.s7videoviewer .s7emaildialog .s7dialogorigin { 
    margin: 10px; 
}

Die Inhaltsbeschreibung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogdescription

CSS-Eigenschaften der Inhaltsbeschreibung des Dialogfelds

margin

Äußerer Rand.

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schriftgröße.

font-family

Schriftfamilie.

Beispiel: So richten Sie eine Inhaltsbeschreibung mit einem Rand von zehn Pixeln ein und verwenden eine Schrift mit neun Punkten:

.s7videoviewer .s7emaildialog .s7dialogdescription { 
    font-size: 9pt; 
    margin: 10px; 
}

Wenn ein Benutzer falsche Eingabedaten eingibt und die Inline-Überprüfung fehlschlägt oder wenn beim Senden des Formulars im Dialogfeld ein Fehler oder eine Bestätigungsmeldung ausgegeben werden muss, wird oben im Dialogfeld eine Meldung angezeigt. Sie wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7dialogerrormessage

CSS-Eigenschaften der Fehlermeldung im Dialogfeld

background-image

Fehlersymbol. Standard ist ein Ausrufezeichen.

background-position

Fehlersymbolposition innerhalb des Nachrichtenbereichs.

color

Textfarbe der Nachricht.

font-Gewichtung

Schriftart-Gewichtung.

font-size

Schriftgröße.

font-family

Schriftfamilie.

line-height

Texthöhe in der Nachricht. Betrifft die vertikale Ausrichtung.

Padding

Innenabstand.

HINWEIS

Diese Meldung unterstützt die Attributauswahl state mit den folgenden möglichen Werten: verifyerror, senderror und sendsuccess. verifyerror festgelegt wird, wenn eine Nachricht aufgrund eines Inline-Validierungsfehlers angezeigt wird; senderror festgelegt wird, wenn ein Back-End-E-Mail-Dienst einen Fehler meldet; sendsuccess festgelegt, wenn E-Mail erfolgreich gesendet wurde. Auf diese Weise kann die Nachricht je nach Status des Dialogfelds unterschiedlich formatiert werden.

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

Beispiel: Wenn Sie eine Meldung einrichten möchten, die eine fett gedruckte Schrift mit 10 Punkten verwendet, die Zeilenhöhe mit 25 Pixel, die Auffüllung mit 20 Pixel auf der linken Seite, ein Ausrufezeichen-Symbol, roter Text bei einem Fehler und kein Symbol und grüner Text bei einem Erfolg:

.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] { 
    background-image: none; 
    color: #00B200; 
} 
.s7videoviewer .s7emaildialog .s7dialogerrormessage { 
    background-position: left center; 
    font-size: 10pt; 
    font-weight: bold; 
    line-height: 25px; 
    padding-left: 20px; 
}

Wenn ein vertikaler Bildlauf erforderlich ist, wird die Bildlaufleiste im Bedienfeld neben dem rechten Rand des Dialogfelds gerendert, das mit der folgenden CSS-Klassenauswahl gesteuert wird:

.s7videoviewer .s7emaildialog .s7dialogscrollpanel

CSS-Eigenschaften des Bedienfelds für den Bildlauf im Dialogfeld

width

Breite des Bildlaufbedienfelds.

Beispiel: So richten Sie ein Bildlaufbedienfeld auf eine Breite von 44 Pixel ein:

.s7videoviewer .s7emaildialog .s7dialogscrollpanel { 
    width: 44px; 
}

Das Erscheinungsbild des Bildlaufleistenbereichs wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7scrollbar

CSS-Eigenschaften der Bildlaufleiste

width

Die Breite der Bildlaufleiste.

Anfang

Der Versatz der vertikalen Bildlaufleiste am oberen Rand des Bildlaufbedienfelds.

unten

Der Versatz der vertikalen Bildlaufleiste am unteren Rand des Bildlaufbedienfelds.

rechts

Der horizontale Versatz der Bildlaufleiste vom rechten Rand des Bildlaufbedienfelds.

Beispiel: Zum Einrichten einer Bildlaufleiste mit einer Breite von 28 Pixeln und einem Rand von acht Pixeln von oben, rechts und unten im Bildlaufbedienfeld:

.s7videoviewer .s7emaildialog .s7scrollbar { 
    bottom: 8px; 
    right: 8px; 
    top: 8px; 
    width: 28px; 
}

Die Bildlaufleistenspur ist der Bereich zwischen den Schaltflächen für den oberen und unteren Bildlauf. Die Komponente legt automatisch die Position und Höhe der Leiste fest. Die Spur wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Bildlaufspur

width

Die Spurbreite.

background-color

Die Trackhintergrundfarbe.

Beispiel: So richten Sie eine Bildlaufleistenspur ein, die 28 Pixel breit und einen grauen Hintergrund hat:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack { 
width:28px; 
background-color: #B2B2B2; 
}

Der Bildlauffeld bewegt sich vertikal innerhalb eines Bildlaufverfolgungsbereichs. Seine vertikale Position wird vollständig durch die Komponentenlogik gesteuert, die Höhe des Daumens ändert sich jedoch nicht dynamisch je nach Inhaltsmenge. Sie können die Thumb-Höhe und andere Aspekte mit der folgenden CSS-Klassenauswahl konfigurieren:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

CSS-Eigenschaften der Bildlaufleiste

width

Die Daumenbreite.

height

Die Daumenhöhe.

padding-top

Die vertikale Umrandung zwischen der Oberkante der Leiste.

padding-bottom

Die vertikale Umrandung zwischen dem unteren Ende der Leiste.

background-image

Das Bild, das für einen bestimmten Daumenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Thumb unterstützt die Attributauswahl state, die verwendet werden kann, um verschiedene Skins auf verschiedene Daumenzustände anzuwenden: up, down, over und disabled.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Zum Einrichten eines Bildlauffensters mit 28 x 45 Pixeln, einem Ränder von 10 Pixeln am oberen und unteren Rand und unterschiedlicher Grafik für jeden Status:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] { 
 background-image:url("images/sdk/scrollbar_thumb_disabled.png"); 
}

Das Erscheinungsbild der Schaltflächen für den oberen und unteren Bildlauf wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton  
  

CSS-Eigenschaften der Schaltflächen für den oberen und unteren Bildlauf

width

Die Schaltflächenbreite.

height

Die Schaltflächenhöhe.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltflächen unterstützen die Attributauswahl state, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können: up, down, over und disabled.

Beispiel: So richten Sie Bildlaufschaltflächen ein, die 28 x 32 Pixel groß sind und für jeden Status ein anderes Bildmaterial haben:

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] { 
background-image:url(images/sdk/scroll_up_up.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/scroll_up_over.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/scroll_up_down.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_up_disabled.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/scroll_down_up.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/scroll_down_over.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/scroll_down_down.png); 
} 
.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_down_disabled.png); 
}

Auf dieser Seite