Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:can_i_use_css [2021/08/31 16:18] – [Aufbau des CSS] 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|}}
-==== Vorbereitungen ====
-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.
+===== Übersicht des CSS-Editors =====
-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.
+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>
-==== Übersicht des CSS-Editors ====
+{{:de:css_editor_formular_leer.png?nolink|}}
-Wenn  die Vorgaben erfüllt sind, befindet sich im Editor links oben ein Button "CSS editieren".
-{{:de:css_editor_formular_leer.png?nolink|}} \\
+===== Formularelemente =====
-**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.
@@ Zeile 74: / Zeile 60: @@
 {{:de:css_editor_border.png?nolink&250|}}
-<WRAP round important 70%>
-Weiterführende Informationen zum Thema Template finden Sie in Artikel //Development of E-Mail templates for promio.connect//
-</WRAP>
- {{tag>CSS CSS-Editor Template E-Mail-Builder}}
+{{tag>CSS_Editor Templates E-Mail-Builder }}

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge