Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:can_i_use_css [2021/08/31 15:47] – [Formularelemente] bk
+++ de:can_i_use_css [2025/02/10 11:29] (aktuell) – [Wie nutze ich den CSS-Editor?] bk
@@ Zeile 4: / Zeile 4: @@
 ü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 mit
+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.
-Hilfe 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 neuen E-Mail-Builder V2 verwendet, kann aber in jedes beliebige Template übernommen werden.
+Der CSS-Editor wird im E-Mail-Builder verwendet, kann aber in jedes beliebige Template übernommen werden.
-Bitte kontaktieren Sie bei Fragen Ihren Account-Manager.
+Bei Fragen melden Sie sich gerne über ein Ticket bei unserem Support-Team.
+===== Oberfläche =====
-==== 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.
-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 wiederrum Unterpunkte zuzuordnen.
+{{:de:campaigns_css_overview_1.png?700|}}
-In unserem Beispiel unterscheiden wir zwischen Globalen Einstellungen, dem Header, dem Content und Überschriften.
-Innerhalb der globalen Einstellungen kann zwischen den Punkten Schrift und Hintergrundfarbe gewählt werden.
-{{:de:campaigns_css_overview.png?700|}}
-==== Vorbereitungen ====
+===== Übersicht des CSS-Editors =====
-Der Entwickler kann mit Hilfe von CSS sein Design (E-Mail) stylen und mit Hilfe des CSS-Editors das Template so gestalten, dass ein Redakteur das Aussehen der E-Mail über ein Formular anpassen kann. Um dieses Ziel zu erreichen, werden CSS-Eigenschaften editierbar gemacht.
-Styles werden im Head des HTMLs definiert. Hier dürfen Klassen oder allgemeine Tags wie body, a oder td angesprochen werden. Auf diese Art erstellte Angaben werden beim Generieren des Mailings in der promio.mail automatisch als Inline-CSS in die entsprechenden Tags im body übertragen, um eine optimale Darstellung in allen gängigen E-Mail-Clients zu erreichen.
+Wenn im Template die Vorgaben erfüllt sind, befindet sich im Editor links oben ein Button "CSS editieren".
-Hierbei darf nur eine Klasse pro HTML-Element verwendet werden. Diese muss direkt über Klassen-Identifier und nicht über übergeordnete Elemente angesprochen werden. Eine Verschachtelung ist nicht möglich. Bitte nutzen Sie außerhalb von mediaQuerries keine kaskadierten Bezeichner oder Selektoren.
-(Beispiel  a {color:#000000;} bzw. .pmMainTable{background-color:#cccccc;})
-Der CSS-Inlinisierer ignoriert alle Angabe, die per per ID und innerhalb von Media Queries gemacht werden.
-Bitte definieren Sie im CSS keine leeren Klassen, da diese das Inlinisieren des CSS verhindern.
+<WRAP round important 70%>
+Die Vorgaben zum Thema Template für den Entwickler finden Sie in Artikel //"[[de:otml]]"// (Kapitel "CSS").
+</WRAP>
-==== Aufbau des CSS ====
+{{:de:css_editor_formular_leer.png?nolink|}}
-Um CSS Attribute im CSS-Editor bearbeiten zu können, muss dem <style> Tag im Master-Template die id "pn-js-css-editor" zugewiesen werden.
-<code html>
+===== Formularelemente =====
-<style id="pn-js-css-editor" type="text/css">
-</code>
-Über den CSS-Klassen, deren Eigenschaften dem Redakteur im Formular zur Bearbeitung freigegeben werden sollen, müssen in einem Kommentar nachfolgende Steuerbefehle hinterlegt werden.
-|**Steuerbefehl**|**Beschreibung**|**Beispiel**|
-|@nav (Unique)|Name des Tabs (Menüpunkt) in der Menüleiste ein.|@nav Seite|
-|@navItem (Unique in @nav)|Name des Subtabs (Untermenüpunkt) ein.|@navitem Header|
-|@info (Optional)|Beschreibung|@ Eigenschaften des Kopfbereichs |
-Fast alle CSS-Befehle können editierbar gemacht werden. Abhängig vom Typ werden sie später im Formular als Input-Feld, Dropdown oder Color-Picker dargestellt. \\
-Allen editierbaren Eigenschaften muss ein Präfix /*@edit*/  vorangestellt werden.
-Beispiel:
-<code css>
-/*
-@nav Header
-@navItem Hintergrundfarbe
-@info  Eigenschaften des Kopfbereichs
-*/
-.pmMainTableContent{
-  /*@edit*/background-color : #2f2f2f;
-width:600px;
-}
-</code>
-Ergebnis: \\
-{{:de:css_editor_formular.jpg?nolink|}}
-Es werden also aus einzelnen Eigenschaften mittels /*@edit*/ Formularfelder erstellt. Nicht alle Elemente innerhalb einer Klasse müssen editierbar sein und auch nicht alle Klassen innerhalb des CSS müssen editierbar gemacht werden. Die Verteilung über den CSS-Inliniesierer ist davon unabhängig. \\
-Jede Klasse, der die entsprechenden Steuerbefehle vorangestellt wurden, erzeugt einen Untermenüpunkt.
-Es ist nicht möglich, mehrere Klassen in einem Untermenüpunkt anzusprechen. \\
-Über die Checkbox hinter den erzeugten Formularfeldern, kann eine CSS-Eigenschaft als important gekennzeichnet werden, so dass sie nicht von anderen Deklarationen überschrieben wird.
-==== Übersicht des CSS-Editors ====
-Wenn  die Vorgaben erfüllt sind, befindet sich im Editor links oben ein Button "CSS editieren".
-{{:de:css_editor_formular_leer.jpg?nolink|}} \\
-**Hinweise:**
-  * Der Beschriftung für @nav und @navItem sollen möglichst kurz sein.
-  * Die Bezeichnungen für @nav und @navItem sind case-sensitiv. Daher muss auf Groß- und Kleinbuchstaben geachtet werden.
-  * Die CSS-Datei muss valide sein.
-  * Das CSS darf keine leeren Attribute enthalten.
-  * Änderungen innerhalb von Media-Queries werden nicht im Vorschau-Fenster der promio.mail angezeigt. Öffnen Sie die Vorschau über „externer Link“ in einem neuen Browserfenster und verkleinern Sie dieses manuell, um diese Änderungen nachvollziehen zu können.
-  * Verwenden Sie keine abgekürzten Schreibweisen für CSS-Eigenschaften.
-==== 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&200|}} \\
+{{: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**|
@@ Zeile 97: / Zeile 43: @@
 **font-style** :  Auswahlliste für Schriftstyle \\
-{{:de:css_editor_schriftstyle.png?nolink&200|}}
+{{:de:css_editor_schriftstyle.png?nolink&250|}}
 **font-weight**: Numerische Eingabe \\
-{{:de:css_editor_schriftstaerke.png?nolink&200|}}
+{{:de:css_editor_schriftstaerke.png?nolink&250|}}
 **font-size**: Textgröße in %, em, pt oder px\\
-{{:de:css_editor_schriftgroesse.png?nolink&200|}}
+{{:de:css_editor_schriftgroesse.png?nolink&250|}}
 **text-align**: Auswahlliste für die horizontale Ausrichtung \\
-{{:de:css_editor_ausrichtung.png?nolink&200|}}
+{{:de:css_editor_ausrichtung.png?nolink&250|}}
 **color/background-color/border-color**: Color-Picker \\
-{{:de:css_editor_farbwahl.png?nolink&200|}}
+{{:de:css_editor_farbwahl.png?nolink&250|}}
 **border-style**: Auswahlliste für Rahmenstyle \\
-{{:de:css_editor_border.png?nolink&200|}}
+{{:de:css_editor_border.png?nolink&250|}}
- {{tag>CSS CSS-Editor Template E-Mail-Builder}}
+{{tag>CSS_Editor Templates E-Mail-Builder }}

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge