# StattBuchung Hilfezentrum : E-Mail-Gestaltung

Created by Thomas Mack, last modified on Dez 07, 2018

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.

Beispiel Mailstruktur

    <body>
    	<div class="sdw_head"></div>
    	<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.

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}

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

Zum ausprobieren haben wir ein JS-Fiddle eingerichtet:

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

## Verwandte Artikel

- Seite:
  E-Mail-Gestaltung

## Attachments:

image2018-4-30 7:55:2.png (image/png)
image2018-12-7_9-5-35.png (image/png)