Aktuell stelle ich meinen gesamten eMail-Verkehr auf HTML um.
Dazu habe ich mit einem (externen) HTML-eMail-Editor Mails erstellt, wenn ich aber nun den reinen Code in das entsprechende Feld, z.B. der Registirerungs-Bestätigungsmail, innerhalb des SW-Backends hineinkopiere, erscheint folgende Fehlermeldung beim Testversand:
Muß bei der verwendeten Shopware-Syntax etwas besonderes beachtet werden?
Shopware stört sich am Eintrag decoration: none. Kennt sich hier jemand damit aus und kann vielleicht einen Tip geben?
Du musst das CSS aus der HTML löschen. Smarty stört es sonst. Gruß Heiner
Smarty stört sich an den Geschweiften Klammern.
Hast du da Javascript mit drin?
Generell musst du Javascript in {literal}{/literal} Tags setzen, damit das in Smarty funktioniert.
Ja, daran liegt es; vielen Dank für den Hinweis.
Könnt Ihr einen HTML-Editor empfehlen (idealer Weise speziell für E-Mails), der KEINE CSS-Funktion aufweist!
Gibt es sonst eine Möglichkeit, aus Shopware heraus Bestätigungsmails zu versenden, welche CSS enthalten?
Hallo,
einfach (wie Shopware selbst) inline - CSS verwenden, dann gibt es keine Probleme (also beim Link < a href=“test123.html” style=“text-decoration: none;”>Link< / a >). Ist auch das Beste, damit es auch alle (Handy-)E-Mail-Programme korrekt anzeigen.
Grüße
Sebastian
Ich würde ein extra dafür konzipirtes Editierprogramm bevorzugen, damit ich nicht auf der Codeoberfläche arbeiten muß, falls es sowas gibt …
Welcher Editor wird empfohlen?
Hallo,
http://lmgtfy.com/?q=html+editor+email+inline+css+generator bzw. CSS Inliner Tool | Email Design Reference . HTML-Code aus dem externen HTML-E-Mail-Editor rein, inline-CSS kommt raus - das akzeptiert dann auch die E-Mail-Vorlage. Von Shopware gibt es da sonst nichts.
Grüße
Sebastian
Handelt es sich bei dem nachfolgenden Quellcode um inline-CSS?
Registrierung Test @media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important } h1 {
font-size:30px!important; text-align:center } h2 { font-size:26px!important; text-align:center } h3 { font-size:20px!important; text-align:center } h1 a { font-size:30px!important } h2 a { font-size:26px!important } h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:11px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:14px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important }
.es-button { font-size:20px!important; display:block!important; border-left-width:0px!important; border-right-width:0px!important; border-top-width:0px!important; border-bottom-width:0px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important;
overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } } #outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } .es-button { mso-style-priority:100!important; text-decoration:none!important; } a[x-apple-data-detectors] { color:inherit!important; text-decoration:none!important; font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; line-height:inherit!important; } .es-desk-hidden { display:none; float:left; overflow:hidden; width:0; max-height:0; line-height:0; mso-hide:all; } Test
Teile davon. Inline wäre sowas:
Du hast bei dir allerdings einen Style-Tag drin und da wird CSS reingepackt und auch media-queries...
</code></pre>
<p>Die media-queries (@media) werden auch nicht von jedem Mail-Programm unterstützt.<br />
Gerade bei Mails muss man deutlich mehr die einzelnen Anbieter durchtesten, da es nicht wie bei Browsern eine breite Unterstützung für alle CSS Funktionen gibt.</p>