Das Tool für die E-Mail-Freigabe besteht aus einer Schaltfläche, die zum Social-Freigabe-Bedienfeld hinzugefügt wird, und dem modalen Dialogfeld, das bei Aktivierung des Tools angezeigt wird. Die Position der Schaltfläche wird vollständig vom Social-Freigabe-Tool verwaltet.
Das Erscheinungsbild der E-Mail-Freigabe-Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emailshare
CSS-Eigenschaften des Tools für die E-Mail-Freigabe
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 Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Sie können die Schaltfläche aus dem Social-Freigabebereich entfernen, indem Sie display:none
CSS-Eigenschaft in der zugehörigen CSS-Klasse.
Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten einer E-Mail-Freigabe-Schaltfläche mit 28 x 28 Pixel, die für jeden der vier verschiedenen Schaltflächenstatus ein anderes Bild anzeigt.
.s7smartcropvideoviewer .s7emailshare {
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7smartcropvideoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7smartcropvideoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7smartcropvideoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}
Die Hintergrundüberlagerung, die eine Webseite abdeckt, wenn das Dialogfeld aktiv ist, wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7backoverlay
CSS-Eigenschaften der Rücken-Überlagerung
Deckkraft |
Deckkraft der Hintergrundüberlagerung. |
background-color |
Hintergrundüberlagerungsfarbe. |
Beispiel: Um eine Hintergrundüberlagerung einzurichten, die grau mit einer Deckkraft von 70 % ist:
.s7smartcropvideoviewer .s7emaildialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Standardmäßig wird das modale Dialogfeld auf Desktop-Systemen zentriert auf dem Bildschirm 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 dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialog
CSS-Eigenschaften des Dialogfelds
border-radius |
Rahmenradius des Dialogfelds (falls das Dialogfeld nicht das gesamte Browser-Fenster akzeptiert); |
background-color |
Hintergrundfarbe des Dialogfelds; |
width |
Sollte entweder nicht festgelegt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browser-Fenster auf (dieser Modus wird auf Touch-Geräten bevorzugt). |
height |
Sollte entweder nicht festgelegt oder auf 100 % eingestellt sein. In diesem Fall nimmt das Dialogfeld das gesamte Browser-Fenster in Anspruch (dieser Modus wird auf Touch-Geräten bevorzugt). |
Beispiel: Zum Einrichten eines Dialogfelds, das das gesamte Browser-Fenster verwendet und auf Touch-Geräten einen weißen Hintergrund aufweist:
.s7smartcropvideoviewer .s7touchinput .s7emaildialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
Die Kopfzeile des Dialogfelds besteht aus einem Symbol, einem Titeltext und einer Schaltfläche "Schließen". Der Kopfzeilencontainer wird mit dem folgenden CSS-Klassenselektor gesteuert
.s7smartcropvideoviewer .s7emaildialog .s7dialogheader
CSS-Eigenschaften des Dialogfeldheaders
Padding |
Innerer Abstand für Kopfzeileninhalte. |
Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der mit
.s7smartcropvideoviewer .s7emaildialog .s7dialogheader .s7dialogline
CSS-Eigenschaften der Dialogfeldzeile
Padding |
Innerer Abstand für das Kopfzeilensymbol und den Titel |
Das Kopfzeilensymbol wird mit dem folgenden CSS-Klassenselektor gesteuert
.s7smartcropvideoviewer .s7emaildialog .s7dialogheadericon
CSS-Eigenschaften des Kopfzeilensymbols im Dialogfeld
width |
Symbolbreite. |
height |
Symbolhöhe. |
background-image |
Symbolbild. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Der Kopfzeilentitel wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogheadertext
CSS-Eigenschaften des Kopfzeilentextes des Dialogfelds
Schriftstärke |
Schriftstärke. |
Schriftgröße |
Schrifthöhe. |
Schriftfamilie |
Schriftfamilie. |
Padding |
Interner Textabstand. |
Die Schaltfläche "Schließen"wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7closebutton
CSS-Eigenschaften der Schließen-Schaltfläche
Anfang |
Vertikale Schaltflächenposition relativ zum Kopfzeilencontainer |
rechts |
Horizontale Schaltflächenposition relativ zum Kopfzeilencontainer |
width |
Schaltflächenbreite. |
height |
Schaltflächenhöhe. |
Padding |
Innerer Abstand der Schaltfläche. |
background-image |
Schaltflächenbild für jeden Status. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Die QuickInfo der Schaltfläche Schließen und der Titel des Dialogfelds können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten einer Dialogfeldkopfzeile mit Abstand, einem 24 x 17 Pixel langen Symbol und einem fett gedruckten 16-pt-Titel. Und schließlich eine 28 x 28 Pixel große Schließen-Schaltfläche, die zwei Pixel von der oberen Seite und zwei Pixel von der rechten Seite des Dialogfeldcontainers positioniert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogheader {
padding: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogheadericon {
background-image: url("images/sdk/dlgemail_cap.png");
height: 17px;
width: 24px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Die Dialogfußzeile besteht aus den Schaltflächen "Abbrechen" und "E-Mail senden". Der Fußzeilencontainer wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter
CSS-Eigenschaften der Fußzeile des Dialogfelds
rand |
Rahmen, der verwendet werden kann, um die Fußzeile visuell vom Rest des Dialogfelds zu trennen. |
Die Fußzeile verfügt über einen inneren Container, der beide Schaltflächen enthält. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogbuttoncontainer
CSS-Eigenschaften des Schaltflächenbehälters des Dialogfelds
Padding |
Innerer Abstand zwischen Fußzeile und Schaltflächen. |
Die Schaltfläche Abbrechen wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .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 |
Schaltflächen-Hintergrundfarbe für jeden Status. |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Die Schaltfläche E-Mail senden wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .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 |
Schaltflächen-Hintergrundfarbe für jeden Status. |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Darüber hinaus verwenden beide Schaltflächen eine gemeinsame CSS-Klasse, die CSS-Einstellungen enthalten kann, die für andere Dialogfeldschaltflächen identisch sind:
.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button
CSS-Eigenschaften der Schaltfläche
Schriftstärke |
Schriftstärke der Schaltfläche. |
Schriftgröße |
Schriftgröße der Schaltfläche. |
Schriftfamilie |
Schaltflächenschriftart. |
line-height |
Texthöhe innerhalb der Schaltfläche. Beeinflusst die vertikale Ausrichtung. |
box-Shadow |
Schlagschatten |
margin-right |
Rand der rechten Schaltfläche. |
Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten einer Fußzeile des Dialogfelds mit der Schaltfläche "Abbrechen"von 64 x 34 und der Schaltfläche "E-Mail senden"von 82 x 34. Und schließlich unterscheiden sich die Textfarbe und die Hintergrundfarbe für jeden Schaltflächenstatus:
.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
Der Hauptdialogbereich (zwischen der Kopfzeile und der Fußzeile) enthält bildlauffähigen Dialogfeldinhalt und Bildlaufbereich auf der rechten Seite. In allen Fällen verwaltet die Komponente die Breite dieses Bereichs. Es ist nicht möglich, ihn in CSS festzulegen. Der Hauptdialogbereich wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea
CSS-Eigenschaften des Dialogfelds, in dem der Anzeigebereich angezeigt wird
height |
Die Höhe des Hauptdialogfeld-Bereichs. Sie sollte nur angegeben werden, wenn das Dialogfeld im Desktop-Modus funktioniert. Dies ist nicht möglich, wenn die Größe des Dialogfelds so geändert wird, dass es das gesamte Browser-Fenster belegt. |
background-color |
Die Hintergrundfarbe des Hauptdialogfeld-Bereichs. |
margin |
Außenrand. |
Der Hauptdialogfeld-Bereich unterstützt das optionale state
-Attributauswahl. Sie wird auf sendsuccess
wenn das E-Mail-Formular gesendet wird und das Dialogfeld eine Bestätigungsmeldung anzeigt. Solange die Bestätigungsmeldung klein ist, kann diese Attributauswahl verwendet werden, um die Höhe des Dialogfelds zu reduzieren, wenn eine solche Bestätigungsmeldung angezeigt wird.
Beispiel: Um den Hauptdialogfeld-Bereich so einzurichten, dass er zunächst eine Höhe von 300 Pixel und bei Anzeige der Bestätigungsmeldung eine Höhe von 100 Pixel aufweist, haben Sie einen zehnten Pixelrand und verwenden Sie einen weißen Hintergrund:
.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
height:100px;
}
Der gesamte Formularinhalt (wie Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit
.s7smartcropvideoviewer .s7emaildialog .s7dialogbody
Wenn die Höhe dieses Containers größer als der Hauptdialogfeld-Bereich zu sein scheint, wird automatisch ein vertikaler Bildlauf von der Komponente aktiviert.
CSS-Eigenschaften des Dialogfeldtexts
Padding |
Innerer Abstand. |
Beispiel: Zum Einrichten von Formularinhalten mit zehn Pixelabständen:
.s7smartcropvideoviewer .s7emaildialog .s7dialogbody {
padding: 10px;
}
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:
.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogline
CSS-Eigenschaften der Dialogfeldzeile
Padding |
Inner Line padding. |
Beispiel: Zum Einrichten eines Dialogfeldformulars mit zehn Pixelabständen pro Zeile:
.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogline {
padding: 10px;
}
Alle statischen Beschriftungen im Dialogfeldformular werden mit
.s7smartcropvideoviewer .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 Formular-Benutzeroberfläche anwenden können.
CSS-Eigenschaften der Dialogfeldbeschriftung.
Schriftstärke |
Schriftgröße beschriften. |
Schriftgröße |
Schriftgröße beschriften |
Schriftfamilie |
Schriftfamilie beschriften. |
color |
Textfarbe beschriften. |
Die Beschriftungen des Dialogfelds können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Um alle Beschriftungen so einzurichten, dass sie grau und fett mit einer 9-Pixel-Schriftart sind:
.s7smartcropvideoviewer .s7emaildialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
Alle statischen Beschriftungen, die links von den Formulareingabefeldern angezeigt werden, werden wie folgt gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputlabel
CSS-Eigenschaften der Eingabebeschriftung des Dialogfelds
width |
Die Breite der statischen Beschriftung. |
text-align |
Die horizontale Textausrichtung. |
margin |
Statische Beschriftungsrand. |
Padding |
Statischer Abstand von Beschriftungen. |
Beispiel: Um Eingabefelder so einzurichten, dass sie eine Breite von 50 Pixel, eine rechtsbündige Ausrichtung, zehn Pixel Abstand und einen zehn Pixel Rand auf der rechten Seite aufweisen:
.s7smartcropvideoviewer .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 dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer
CSS-Eigenschaften des Eingabecontainers des Dialogfelds
rand |
Ränder um den Eingabefeld-Container. |
Padding |
Innerer Abstand. |
Der Eingabefelder-Container unterstützt optional state
-Attributauswahl. Sie wird auf verifyerror
wenn der Benutzer einen Fehler im Eingabedatenformat macht und die Inline-Validierung fehlschlägt. Mit dieser Attributauswahl können Sie falsche Benutzereingaben im Formular hervorheben.
Die meisten Eingabefelder, die sich von der Beschriftung links bis zum rechten Rand des Dialogfeldtextes (einschließlich Feld "Von" und Feld "Nachricht") erstrecken, werden wie folgt gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide
CSS-Eigenschaften des für die gesamte Eingabe des Dialogfelds vorgesehenen Felds
width |
Breite des Eingabefelds. |
Das Eingabefeld "An"ist enger, da auf der rechten Seite Platz für die Schaltfläche "E-Mail entfernen"vorgesehen ist. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort
CSS-Eigenschaften des Dialogfelds geben Kurzfeld ein
width |
Breite des Eingabefelds. |
Beispiel: Um ein Formular so einzurichten, dass es einen grauen Rahmen von einem Pixel mit neun Pixel Abstand um alle Eingabefelder hat. Um für Felder, die bei der Validierung fehlschlagen, denselben roten Rahmen zu erhalten, ist das Eingabefeld "An"um 250 Pixel breit und der Rest der Eingabefelder 300 Pixel breit:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
border: 1px solid #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputshort {
width: 250px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialoginputwide {
width: 300px;
}
Das Eingabefeld für E-Mail-Nachrichten wird auch wie folgt gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogmessage
Mit dieser Klasse können Sie bestimmte Eigenschaften für den zugrunde liegenden TEXTAREA
-Element.
CSS-Eigenschaften der Dialogfeldmeldung
height |
Nachrichtenhöhe. |
word-wrap |
Wortumbruchstil. |
Beispiel: Zum Einrichten einer E-Mail-Nachricht mit einer Höhe von 50 Pixel und zur Verwendung von break-word
Wortumbruch:
.s7smartcropvideoviewer .s7emaildialog .s7dialogmessage {
height: 50px;
word-wrap: break-word;
}
Über die Schaltfläche "Weitere E-Mail-Adresse hinzufügen"kann ein Benutzer mehr als eine Adresse in das E-Mail-Formular einfügen. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton
CSS-Eigenschaften des Dialogfelds Schaltfläche zum Hinzufügen von E-Mail-Adressen
height |
Schaltflächenhöhe. |
color |
Schaltflächentextfarbe für jeden Status. |
background-image |
Schaltflächenbild für jeden Status. |
background-position |
Schaltflächenbildposition innerhalb des Schaltflächenbereichs. |
Schriftstärke |
Schriftstärke der Schaltfläche. |
Schriftgröße |
Schriftgröße der Schaltfläche. |
Schriftfamilie |
Schaltflächenschriftart. |
line-height |
Texthöhe innerhalb der Schaltfläche. Beeinflusst die vertikale Ausrichtung. |
text-align |
Horizontale Textausrichtung. |
Padding |
Innerer Abstand. |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Um die Schaltfläche "Weitere E-Mail-Adresse hinzufügen"auf eine Höhe von 25 Pixel festzulegen, verwenden Sie eine 12-Punkt-fett gedruckte Schriftart mit der rechten Ausrichtung sowie eine andere Textfarbe und ein anderes Bild für jeden Status:
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton {
text-align:right;
font-size:12pt;
font-weight:bold;
background-position:left center;
line-height:25px;
padding-left:30px;
height:25px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
color:#666666;
background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
color:#000000;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
color:#000000;
text-decoration:underline;
background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7smartcropvideoviewer .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 dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton
CSS-Eigenschaften des Dialogfelds entfernen die E-Mail-Schaltfläche
width |
Schaltflächenbreite. |
height |
Schaltflächenhöhe. |
background-image |
Schaltflächenbild für jeden Status. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden.
Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Um eine "Entfernen"-Schaltfläche mit 25 x 25 Pixel einzurichten und für jeden Status ein anderes Bild zu verwenden:
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton {
width:25px;
height:25px;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
background-image:url(images/sdk/dlgremove_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
background-image:url(images/sdk/dlgremove_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
background-image:url(images/sdk/dlgremove_up.png);
}
Der freigegebene Inhalt wird unten im Hauptteil des Dialogfelds angezeigt und enthält eine Miniaturansicht, einen Titel, eine Ursprungs-URL und eine Beschreibung. Sie wird in einen Container eingeschlossen, der wie folgt gesteuert wird:
.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogcontent
CSS-Eigenschaften des Dialogfeldinhalts
rand |
Container-Rahmen. |
Padding |
Innerer Abstand. |
Beispiel: Zum Einrichten eines unteren Containers mit einem gepunkteten Rahmen von einem Pixel und ohne Abstand:
.s7smartcropvideoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
border: 1px dotted #A0A0A0;
padding: 0;
}
Das Miniaturbild wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .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 Miniaturansicht. |
vertikale Ausrichtung |
Miniaturansicht für die vertikale Ausrichtung. |
Padding |
Innerer Abstand. |
Beispiel: Um die Miniaturansicht auf 90 x 60 Pixel festzulegen und die Miniaturansicht mit zehn Pixel Abstand oben auszurichten:
.s7smartcropvideoviewer .s7emaildialog .s7dialogthumbnail {
height: 60px;
padding: 10px;
vertical-align: top;
width: 90px;
}
Titel, Ursprung und Beschreibung des Inhalts werden weiter in einem Bereich rechts neben der Inhaltsminiatur gruppiert. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel
CSS-Eigenschaften des Informationsbereichs für das Dialogfeld
width |
Bedienfeldbreite. |
Beispiel: Zum Einrichten eines Inhaltsinformationsbereichs mit einer Breite von 300 Pixel:
.s7smartcropvideoviewer .s7emaildialog .s7dialoginfopanel {
width: 300px;
}
Der Inhaltstitel wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle
CSS-Eigenschaften des Dialogfeldtitels
margin |
Außenrand. |
Schriftstärke |
Schriftstärke. |
Schriftgröße |
Schriftgröße. |
Schriftfamilie |
Schriftfamilie. |
Beispiel: Zum Einrichten eines Inhaltstitels für die Verwendung einer fett gedruckten Schriftart mit einer zehnten Pixelbreite:
.s7smartcropvideoviewer .s7emaildialog .s7dialogtitle {
font-weight: bold;
margin: 10px;
}
Die Inhaltsquelle wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin
CSS-Eigenschaften des Inhaltsherweises des Dialogfelds
margin |
Außenrand. |
Schriftstärke |
Schriftstärke. |
Schriftgröße |
Schriftgröße. |
Schriftfamilie |
Schriftfamilie. |
Beispiel: Zum Einrichten des Inhaltsursprungs mit einer zehnfachen Spanne:
.s7smartcropvideoviewer .s7emaildialog .s7dialogorigin {
margin: 10px;
}
Die Inhaltsbeschreibung wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription
CSS-Eigenschaften der Inhaltsbeschreibung des Dialogfelds
margin |
Außenrand. |
Schriftstärke |
Schriftstärke. |
Schriftgröße |
Schriftgröße. |
Schriftfamilie |
Schriftfamilie. |
Beispiel: Zum Einrichten einer Inhaltsbeschreibung mit einer zehnten Pixelbreite und einer neun Punkt-Schriftart:
.s7smartcropvideoviewer .s7emaildialog .s7dialogdescription {
font-size: 9pt;
margin: 10px;
}
Wenn ein Benutzer falsche Eingabedaten eingibt und die Inline-Validierung fehlschlägt oder wenn das Dialogfeld beim Senden des Formulars einen Fehler oder eine Bestätigungsmeldung rendern muss, wird oben im Dialogfeldtext eine Meldung angezeigt. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage
CSS-Eigenschaften der Fehlermeldung im Dialogfeld
background-image |
Fehlersymbol. Standard ist ein Ausrufezeichen. |
background-position |
Die Fehlersymbolposition innerhalb des Nachrichtenbereichs. |
color |
Textfarbe der Nachricht. |
Schriftstärke |
Schriftstärke. |
Schriftgröße |
Schriftgröße. |
Schriftfamilie |
Schriftfamilie. |
line-height |
Texthöhe innerhalb der Nachricht. Beeinflusst die vertikale Ausrichtung. |
Padding |
Innerer Abstand. |
Diese Nachricht unterstützt die state
-Attributauswahl mit den folgenden möglichen Werten: verifyerror
, senderror
, und sendsuccess
. Der Wert verifyerror
wird festgelegt, wenn eine Nachricht aufgrund eines Fehlers bei der Überprüfung der Inline-Eingabe angezeigt wird. Der Wert senderror
wird festgelegt, wenn ein Backend-E-Mail-Dienst einen Fehler meldet. Die sendsuccess
-Wert festgelegt ist, 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. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Um eine Nachricht so einzurichten, dass sie eine 10-Punkt-Fettschrift verwendet, haben Sie eine 25-Pixel-Zeilenhöhe und einen 20-Pixel-Abstand auf der linken Seite. Verwenden Sie außerdem ein Ausrufezeichen-Symbol, einen roten Text, wenn ein Fehler auftritt, und kein Symbol und grünen Text, wenn ein Erfolg eintritt:
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
background-image: url("images/sdk/dlgerrimg.png");
color: #FF0000;
}
.s7smartcropvideoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
background-image: none;
color: #00B200;
}
.s7smartcropvideoviewer .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 nahe der rechten Kante des Dialogfelds gerendert, das mit der folgenden CSS-Klassenauswahl gesteuert wird:
.s7smartcropvideoviewer .s7emaildialog .s7dialogscrollpanel
CSS-Eigenschaften des Bildlauffensters des Dialogfelds
width |
Bildlaufbereichbreite. |
Beispiel: Um ein Bildlaufbedienfeld mit einer Breite von 44 Pixel einzurichten:
.s7smartcropvideoviewer .s7emaildialog .s7dialogscrollpanel {
width: 44px;
}
Das Erscheinungsbild des Bildlaufleistenbereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar
CSS-Eigenschaften der Bildlaufleiste
width |
Die Breite der Bildlaufleiste. |
Anfang |
Der Versatz der vertikalen Bildlaufleiste am oberen Rand des Bildlaufbereichs. |
unten |
Der Versatz der vertikalen Bildlaufleiste am unteren Rand des Bildlaufbereichs. |
rechts |
Der horizontale Versatz der Bildlaufleiste am rechten Rand des Bildlaufbereichs. |
Beispiel: Um eine Bildlaufleiste einzurichten, die 28 Pixel breit ist, und eine 8-Pixel-Spanne von oben, rechts und unten im Bildlaufbereich festzulegen:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
Die Bildlaufleisten-Spur ist der Bereich zwischen den oberen und unteren Bildlauftasten. Die Komponente legt automatisch die Position und Höhe der Spur fest. Die Verfolgung wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack
CSS-Eigenschaften der Bildlaufspur
width |
Die Spurbreite. |
background-color |
Die Hintergrundfarbe der Verfolgung. |
Beispiel: Zum Einrichten einer Bildlaufleiste, die 28 Pixel breit ist und einen grauen Hintergrund hat:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
Der Bildlaufleisten-Daumen bewegt sich in einem Bildlaufbereich vertikal. Seine vertikale Position wird vollständig von der Komponentenlogik gesteuert, die Daumenhöhe ändert sich jedoch nicht dynamisch in Abhängigkeit von der Inhaltsmenge. Sie können die Daumenhöhe und andere Aspekte mit dem folgenden CSS-Klassenselektor konfigurieren:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb
CSS-Eigenschaften der Bildlaufleisten-Miniatur
width |
Die Daumenbreite. |
height |
Die Daumenhöhe. |
Auffüllung |
Der vertikale Abstand zwischen dem oberen Ende des Gleises. |
padding-bottom |
Der vertikale Abstand zwischen dem unteren Ende des Gleises. |
background-image |
Das Bild, das für einen bestimmten Daumenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Thumb unterstützt die state
-Attribut-Selektor, der verwendet werden kann, um verschiedene Skins auf verschiedene Daumenstatus anzuwenden: up
, down
, over
, und disabled
.
Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten eines Bildlaufleisten-Daumens mit 28 x 45 Pixel, einer zehnten Pixelspanne oben und unten und unterschiedlicher Abbildung für jeden Status:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
Das Erscheinungsbild der oberen und unteren Bildlaufschaltflächen wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7smartcropvideoviewer .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 Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltflächen unterstützen state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden: up
, down
, over
, und disabled
.
Beispiel: Zum Einrichten von Bildlaufschaltflächen mit 28 x 32 Pixel und unterschiedlicher Grafik für jeden Status:
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7smartcropvideoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}