====== How do I use the CSS editor? ======

Using the CSS editor you are enabled to define attributes via CSS specifications that can be adapted by the editor.
This allows you to define areas that can be adopted by the user of the template. 

For this purpose, a central style sheet in the header is permitted. This style sheet will be transposed to an inline CSS with the help of the CSS inliner tools within the duration. This guarantees an optimum viewing in the different email clients.


The CSS editor is used in e-mail builder, but it can be adopted to any other template.  

If you have questions, please contact our support team via ticket.

===== Interface =====

With this completed form the editor is, e.g., able to change the font type and font size of a newsletter. You have the possibility to name different menue items and to assign them to sub items. 

Using the CSS editor you are enabled to define attributes via CSS specifications that can be adapted by the editor. This allows you to define areas that can be adopted by the user of the template.

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


===== Overview of the CSS editor =====

If the specifications are fulfilled in the template, the button "edit css" will appear on the left corner.

<WRAP round important 70%>
Specifications for developers you find in the article //"[[de:otml]]"// (section "CSS").
</WRAP>

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


===== forms elements =====

The CSS features have been segmented into groups. To every group, an editor module (short editor) has been implemented. 

**font-family**: select list font-family \\
{{:de:css_editor_schriften.png?nolink&250|}} \\
In the following table you find the values for font family on the base of which the CSS editor creates a drop down to select the font.
If different values are used, the CSS editor creates an input field instead.

|**font type value in the css source code**|**font type 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** :  select list for the font-style \\
{{:de:css_editor_schriftstyle.png?nolink&250|}}

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

**font-size**: text size in %, em, pt or px\\
{{:de:css_editor_schriftgroesse.png?nolink&250|}}

**text-align**: select list for horizontal position \\
{{:de:css_editor_ausrichtung.png?nolink&250|}}

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

**border-style**: select list to choose border-style \\
{{:de:css_editor_border.png?nolink&250|}}


 {{tag>css_editor templates e-mail_builder }}