====== Wie nutze ich den CSS-Editor? ======

Der CSS-Editor bietet Ihnen die Möglichkeit, über CSS-Angaben Attribute zu definieren, die dann 
über ein Formular von Redakteuren verändert werden können. Dadurch bestimmen Sie selbst, welche Bereiche durch den Benutzer des Templates angepasst werden dürfen. 

Zu diesem Zweck wird ein zentrales Style Sheet im Header erlaubt. Dies wird in der Laufzeit mithilfe des CSS-Inliner-Tools in einem Inline-CSS überführt, um eine optimale Darstellung in verschiedenen E-Mail-Clients zu gewährleisten. 

Der CSS-Editor wird im E-Mail-Builder verwendet, kann aber in jedes beliebige Template übernommen werden.  

Bei Fragen melden Sie sich gerne über ein Ticket bei unserem Support-Team.
===== Oberfläche =====

Hier sehen Sie ein fertiges Formular, mit welchem der Redakteur zum Beispiel die Schriftart und -größe des Newsletters ändern kann. Sie haben die Möglichkeit, verschiedene Menüpunkte zu benennen und diesen wiederum Unterpunkte zuzuordnen. 

{{:de:campaigns_css_overview_1.png?700|}}


===== Übersicht des CSS-Editors =====

Wenn im Template die Vorgaben erfüllt sind, befindet sich im Editor links oben ein Button "CSS editieren".

<WRAP round important 70%>
Die Vorgaben zum Thema Template für den Entwickler finden Sie in Artikel //"[[de:otml]]"// (Kapitel "CSS"). 
</WRAP>

{{:de:css_editor_formular_leer.png?nolink|}}


===== Formularelemente =====

Die CSS-Eigenschaften wurden in Gruppen aufgeteilt. Zu jeder Gruppe wurde ein Editor-Baustein (kurz Editor) implementiert. 

**font-family**: Auswahlliste Schriftart \\
{{:de:css_editor_schriften.png?nolink&250|}} \\
In der nachfolgenden Tabelle finden Sie die Werte für font-family auf Grundlage derer der CSS-Editor ein Drop-Down zur Auswahl der Schrift erzeugt. Werden davon abweichende Werte verwendet, erstellt der CSS-Editor stattdessen ein Inputfeld.
|**Schriftart-Wert in CSS Quelltext**|**Schriftart in CSS Editor**|
|Arial \\ Arial,Helvetica \\ Arial,Helvetica,sans-serif|Arial, Helvetica, sans-serif|
|'Times New Roman' \\ 'Times New Roman', Times \\ 'Times New Roman', Times, serif|'Times New Roman', Times, serif;|
|'Courier New' \\ 'Courier New', Courier \\ 'Courier New', Courier, monospace|'Courier New', Courier, monospace;|
|Georgia \\ Georgia, 'Times New Roman' \\ Georgia, 'Times New Roman', Times \\ Georgia, 'Times New Roman', Times, serif|Georgia, 'Times New Roman', Times, serif|
|Verdana \\ Verdana, Arial \\ Verdana, Arial, Helvetica \\ Verdana, Arial, Helvetica, sans-serif|Verdana, Arial, Helvetica, sans-serif|
|Geneva \\ Geneva, Arial \\ Geneva, Arial, Helvetica \\ Geneva, Arial, Helvetica, sans-serif|Geneva, Arial, Helvetica, sans-serif|

**font-style** :  Auswahlliste für Schriftstyle \\
{{:de:css_editor_schriftstyle.png?nolink&250|}}

**font-weight**: Numerische Eingabe \\
{{:de:css_editor_schriftstaerke.png?nolink&250|}}

**font-size**: Textgröße in %, em, pt oder px\\
{{:de:css_editor_schriftgroesse.png?nolink&250|}}

**text-align**: Auswahlliste für die horizontale Ausrichtung \\
{{:de:css_editor_ausrichtung.png?nolink&250|}}

**color/background-color/border-color**: Color-Picker \\
{{:de:css_editor_farbwahl.png?nolink&250|}}

**border-style**: Auswahlliste für Rahmenstyle \\
{{:de:css_editor_border.png?nolink&250|}}


{{tag>CSS_Editor Templates E-Mail-Builder }}