Email Share

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:

.s7ecatalogviewer .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 auch CSS-Sprites .

Sie können die Schaltfläche aus dem Social-Freigabebereich entfernen, indem Sie display:none CSS-Eigenschaft in ihrer 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 und einem anderen Bild für jeden der vier verschiedenen Schaltflächenstatus.

.s7ecatalogviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogviewer .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:

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

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

.s7ecatalogviewer .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 einen weißen Hintergrund auf Touch-Geräten aufweist:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

Padding

Innerer Abstand für das Kopfzeilensymbol und den Titel.

Das Kopfzeilensymbol wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7emaildialog .s7dialogheadericon

CSS-Eigenschaften des Kopfzeilensymbols des Dialogfelds

width	Symbolbreite.
height	Symbolhöhe.
background-image	Symbolbild.
background-position	Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites .

Der Kopfzeilentitel wird mit der folgenden CSS-Klassenauswahl gesteuert:

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

.s7ecatalogviewer .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 auch CSS-Sprites .

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-Punkt-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 ist:

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

.s7ecatalogviewer .s7emaildialog .s7dialogfooter

CSS-Eigenschaften der Fußzeile des Dialogfelds ​

rand	Rand, mit dem Sie die Fußzeile visuell vom Rest des Dialogfelds trennen können.

Die Fußzeile verfügt über einen inneren Container, der beide Schaltflächen enthält. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

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

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

Schriftstärke	Schriftstärke der Schaltfläche.
Schriftgröße	Schriftgröße der Schaltfläche.
Schriftfamilie	Schriftfamilie der Schaltflächen.
line-height	Texthöhe innerhalb der Schaltfläche. Beeinflusst die vertikale Ausrichtung.
box-Shadow	Schlagschatten
margin-right	Rand der rechten Schaltfläche.

Die QuickInfos dieser Schaltfläche können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel - Zum Einrichten einer Footer mit der Schaltfläche Abbrechen 64 x 34 und der Schaltfläche E-Mail senden mit 82 x 34. Die Textfarbe und die Hintergrundfarbe unterscheiden sich je nach Schaltflächenstatus:

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

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

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:

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

Der gesamte Formularinhalt (wie Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit der folgenden CSS-Klassenauswahl gesteuert wird:

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

Innenabstand.

Beispiel: Zum Einrichten von Formularinhalten mit zehn Pixelabständen:

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

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

Padding

Inner Line padding.

Beispiel: Zum Einrichten eines Dialogfeldformulars mit zehn Pixelabständen pro Zeile:

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

Alle statischen Beschriftungen im Dialogfeldformular werden mit der folgenden CSS-Klassenauswahl gesteuert:

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

Dialogfeldbeschriftungen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel: Um alle Beschriftungen mit einer 9-Pixel-Schriftart auf grau und fett festzulegen:

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

CSS-Eigenschaften des Dialogfeldeingabecontainers

rand	Ränder um den Eingabefeld-Container.
Padding	Innenabstand.

Die meisten Eingabefelder, die sich von der Beschriftung links bis zum rechten Rand des Dialogfeldtextes (einschließlich Feld Von und Feld Nachricht ) erstrecken, werden mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

CSS-Eigenschaften des für die gesamte Eingabe des Dialogfelds vorgesehenen Felds

width

Breite des Eingabefelds.

Das Feld An ist enger, da auf der rechten Seite Platz für die Schaltfläche E-Mail entfernen zugewiesen wird. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

CSS-Eigenschaften des Dialogfelds geben ein kurzes Feld 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. So legen Sie für Felder, bei denen die Validierung fehlschlägt, denselben roten Rahmen fest. 250 Pixel breit bis -Feld. Und schließlich sind die übrigen Eingabefelder 300 Pixel breit:

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

Das Eingabefeld für E-Mail-Nachrichten wird auch wie folgt gesteuert:

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

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

Über die Schaltfläche Weitere E-Mail-Adresse hinzufügen können Benutzer mehr als eine Adresse im E-Mail-Formular hinzufügen. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .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	Schriftfamilie der Schaltflächen.
line-height	Texthöhe innerhalb der Schaltfläche. Betrifft die vertikale Ausrichtung.
text-align	Horizontale Textausrichtung.
Padding	Innenabstand.

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:

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

.s7ecatalogviewer .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 auch CSS-Sprites .

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel: Um eine Schaltfläche "Entfernen"einzurichten, die 25 x 25 Pixel groß ist, und für jeden Status ein anderes Bild zu verwenden:

.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogviewer .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 mit der folgenden CSS-Klassenauswahl gesteuert wird:

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent

CSS-Eigenschaften des Dialogfeldinhalts ​

rand	Container-Rahmen.
Padding	Innenabstand.

Beispiel: Zum Einrichten eines unteren Containers mit einem gepunkteten Rahmen von einem Pixel und ohne Abstand:

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

Das Miniaturbild wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .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 der vertikalen Ausrichtung.
Padding	Innenabstand.

Beispiel: Um die Miniaturansicht auf 90 x 60 Pixel festzulegen und die Miniaturansicht mit zehn Pixel Abstand oben auszurichten:

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

.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel

CSS-Eigenschaften des Informationsbereichs für das Dialogfeld

width

Bedienfeldbreite.

Beispiel: Zum Einrichten eines Inhaltsinformationsbereichs mit einer Breite von 300 Pixel:

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

Der Inhaltstitel wird mit der folgenden CSS-Klassenauswahl gesteuert:

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

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

Die Inhaltsquelle wird mit der folgenden CSS-Klassenauswahl gesteuert:

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

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

Die Inhaltsbeschreibung wird mit der folgenden CSS-Klassenauswahl gesteuert:

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

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

Wenn ein Benutzer falsche Eingabedaten eingibt und die Inline-Validierung fehlschlägt. 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:

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

CSS-Eigenschaften der Fehlermeldung im Dialogfeld

background-image	Fehlersymbol. Standard ist ein Ausrufezeichen.
background-position	Die Fehlersymbol-Position im Nachrichtenbereich.
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	Innenabstand.

Die QuickInfo der Schaltfläche 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, eine 25-Pixel-Zeilenhöhe, einen 20-Pixel-Abstand auf der linken Seite aufweist und ein Ausrufezeichen-Symbol verwendet. Und schließlich roter Text, wenn ein Fehler auftritt, und kein Symbol und grüner Text, wenn ein Erfolg vorliegt:

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogviewer .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:

.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel

CSS-Eigenschaften des Bildlauffensters des Dialogfelds

width

Bildlaufbereichbreite.

Beispiel: Um ein Bildlaufbedienfeld mit einer Breite von 44 Pixel einzurichten:

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

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

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

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

.s7ecatalogviewer .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 und einen grauen Hintergrund aufweist:

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

.s7ecatalogviewer .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 auch CSS-Sprites .

Beispiel: Zum Einrichten eines Bildlaufleisten-Daumens mit 28 x 45 Pixel, einer zehnten Pixelspanne oben und unten und unterschiedlicher Abbildung für jeden Status:

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogviewer .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:

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Es ist nicht möglich, Bildlaufschaltflächen mithilfe von CSS zu positionieren top, left, bottomund right Eigenschaften. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

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 auch CSS-Sprites .

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel: Zum Einrichten von Bildlaufschaltflächen mit 28 x 32 Pixel und unterschiedlicher Grafik für jeden Status:

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