Page History

...

Korrespondenzen, die als E-Mail versendet werden können aus verschiedenen Elementen zusammengestellt werden.

Im einfachsten Fall enthält eine Korrespondenz nur ein Textelement. Dieses wird dann mit dem folgenden HTML-Code zu eine Multipart-Nachricht verarbeitet.

In der E-Mail ist die Struktur ähnlich dem abgebildeten Code vorhanden. Manche Element sind nicht in jeder Nachricht.

Code Block

language	xml
theme	Midnight
firstline	1
title	Beispiel Mailstruktur
linenumbers	true

<body>
	<div class="sdw_head"></div>

...

Code Block

language

css


	<div class="sdw_plain">
		Beispieltext für die ganze Breite
		<div class="sdw_right">Beispieltext rechtsbündig</div>
		<h1>Uberschriften Ebene 1</h1>
		<h2>Uberschriften Ebene 1</h2>
		<h3>Uberschriften Ebene 1</h3>
	</div>
	<div class="sdw_row">
		<div class="sdw_cell sdw_colstyle_w20"><em>Label-Spalte</em></div>
		<div class="sdw_cell sdw_colstyle_w80">Inhaltsspalte</div>
	</div>
	<div class="sdw_row">
	<!-- weitere Zeilen möglich -->
	</div>
 
	<div class="sdw_foot">Verweis auf die Anwendung</div>
</body>

Das Design der Nachricht ist durch ein Standard Style-Sheet definiert.

Im Bereich der Voreinstellungen (CiCd) kann dieses durch ein eigenes Styl-Sheet ersetzt werden. Dabei müssen für alle Elemente die Styleangaben übernommen werden. Das eigene Stylesheet wird dann als einziges ausgeliefert.

Die Selktoren

sdw_colstyle_w10

entsprechen den Breitenangaben aus den Layoutstilen für die Prinkausgabe. Eine Layout Tabelle 2 Spaltig 20 / 80 wird in zwei <div> Elemente aufgeteilt und erhält die Selektoren

sdw_colstyle_w20 / sdw_colstyle_w80

Wenn Sie in der E-Mail Bilder anzeigen lassen wollen müssen diese im CSS als Inline-Elemente mitgeliefert werden. Entweder als SVG-Element oder als jpg/png base64 codiert.

Code Block

language	css
theme	Midnight
title	Beispiel-CSS

  body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	background-image:
		url("data:image/svg+xml;utf8,<svg>[Bildinformationen]</svg>");
	background-attachment: fixed;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: 30%;
	margin-left: 2em;
	margin-right: 4em;
	max-width: 900px;
}

.sdw_row { 	display: flex;
}

.sdw_cell {
	border-color: grey;
	border-style: solid;
	padding: 3px
}

.sdw_colstyle_w10 { 	flex-basis: 10%
}

.sdw_colstyle_w20 { 	flex-basis: 20%
}

.sdw_colstyle_w30 { 	flex-basis: 30%
}

.sdw_colstyle_w40 { 	flex-basis: 40%
}

.sdw_colstyle_w50 { 	flex-basis: 50%
}

.sdw_colstyle_w60 { 	flex-basis: 60%
}

.sdw_colstyle_w70 { 	flex-basis: 70%
}

.sdw_colstyle_w80 { 	flex-basis: 80%
}

.sdw_colstyle_w90 { 	flex-basis: 90%
}

.sdw_right { 	text-align: right;
}

.sdw_foot {
	text-align: center;
	font-size: 0.8em;
	margin-top: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: #cccccc;
}

.sdw_foot a {
	text-decoration: none;
	color: #d36f16
}

Schritt-für-Schritt-Anleitung

...

Design in den Voreinstellungen anlegen.

Wechseln Sie in den Bereich "Administration/Anwendungseinstellungen".

Dort legen Sie bitte unter Organisation → CiCd einen Neuen Eintrag mit dem Schlüssel: CSS Vorgaben für E-Mail an.

Die Inhalte der CSS-Datei fügen Sie als Text im Bereich "Wert" ein.

Image Added

Zum ausprobieren haben wir ein JS-Fiddle eingerichtet:

Image Added

https://codepen.io/stattbuchung/pen/JegqxG

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version Current

Key

Schritt-für-Schritt-Anleitung

Design in den Voreinstellungen anlegen.

Verwandte Artikel