Thema: Modified Editor (HTML+CSS)

Mercatura-IT.de · **am:** 06. August 2014, 11:54:50

Hey Leute,

ich versuche einen Newsletter einzubinden. In der HTML ist anfangs ein Style/CSS Schnipsel integriert. Wie kann ich eine vernünftige Anzeige erzeugen ?
Er schmeisst mir im Editor immer den CSS Schnipsel raus.
Muss ich eine separate .css datei erzeugen und die im HTML einbinden ? Oder geht es auch im Code selbst ?

LG und vielen Dank

Linkback: https://www.modified-shop.org/forum/index.php?topic=30801.0

Mercatura-IT.de · **Antwort #1 am:** 06. August 2014, 12:06:06

Um den Code geht es:

Code: XML [Auswählen]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=320, target-densitydpi=device-dpi">
<style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-width: 660px) {
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:5px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
p[class=footer-content-left] { text-align: center !important; }
#headline p { font-size: 30px !important; }
.article-content, #left-sidebar{ -webkit-text-size-adjust: 90% !important; -ms-text-size-adjust: 90% !important; }
.header-content, .footer-content-left {-webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important;}
img { height: auto; line-height: 100%;}
}
/* Client-specific Styles */
#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body { background-color: #256143; margin: 0; padding: 0; }
img { outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
} /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include code blocks in email. */
code {
white-space: normal;
word-break: break-all;
}
#background-table { background-color: #256143; }
/* Webkit Elements */
#top-bar { border-radius:6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; -webkit-font-smoothing: antialiased; background-color: #ffe561; color: #6b1118; }
#top-bar a { font-weight: bold; color: #6B1118; text-decoration: none;}
#footer { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body, td { font-family: HelveticaNeue, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 12px; color: #6b1118; }
.header-content a { font-weight: bold; color: #6B1118; text-decoration: none; }
#headline p { color: #eeeeee; font-family: HelveticaNeue, sans-serif; font-size: 36px; text-align: center; margin-top:0px; margin-bottom:30px; }
#headline p a { color: #eeeeee; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #6B1118; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: HelveticaNeue, sans-serif; }
.article-title a { color: #6B1118; text-decoration: none; }
.article-title.with-meta {margin-bottom: 0;}
.article-meta { font-size: 13px; line-height: 20px; color: #ccc; font-weight: bold; margin-top: 0;}
.article-content { font-size: 13px; line-height: 18px; color: #256143; margin-top: 0px; margin-bottom: 18px; font-family: HelveticaNeue, sans-serif; }
.article-content a { color: #6B1118; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #256143; }
.article-content li a { color: #6B1118; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #256143; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #6B1118; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 11px; line-height: 16px; color: #256143; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #6B1118; font-weight: bold; text-decoration: none; }
#footer { background-color: #FFE561; color: #256143; }
#footer a { color: #6B1118; text-decoration: none; font-weight: bold; }
#permission-reminder { white-space: normal; }
#street-address { color: #6B1118; white-space: normal; }
</style>
</head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table" style="table-layout:fixed" align="center">
<tbody><tr>
<td align="center" bgcolor="#256143">
<table class="w640" style="margin:0 10px;" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w640" width="640" height="20"></td></tr>

<tr>
<td class="w640" width="640">
<table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tbody><tr>
<td class="w15" width="15"></td>
<td class="w325" width="350" valign="middle" align="left">
<table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w325" width="350" height="8"></td></tr>
</tbody></table>
<div class="header-content"><webversion>Webversion</webversion><span class="hide">  |  <preferences lang="de">Einstellungen bearbeiten</preferences>  |  <unsubscribe>Abmelden</unsubscribe></span></div>
<table class="w325" width="350" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w325" width="350" height="8"></td></tr>
</tbody></table>
</td>
<td class="w30" width="30"></td>
<td class="w255" width="255" valign="middle" align="right">
<table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w255" width="255" height="8"></td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>

<td valign="middle"><fblike likeurl="https://www.facebook.com/djvservice"><img src="https://img.createsend1.com/img/templatebuilder/like-glyph.png" border="0" width="8" height="14" alt="Facebook icon"=""></fblike></td>
<td width="3"></td>
<td valign="middle"><div class="header-content"><fblike likeurl="https://www.facebook.com/djvservice">Gefällt mir</fblike></div></td>

<td class="w10" width="10"></td>
<td valign="middle"><tweet><img src="https://img.createsend1.com/img/templatebuilder/tweet-glyph.png" border="0" width="17" height="13" alt="Twitter icon"=""></tweet></td>
<td width="3"></td>
<td valign="middle"><div class="header-content"><tweet>Tweet</tweet></div></td>

<td class="w10" width="10"></td>
<td valign="middle"><forwardtoafriend lang="de"><img src="https://img.createsend1.com/img/templatebuilder/forward-glyph.png" border="0" width="19" height="14" alt="Forward icon"=""></forwardtoafriend></td>
<td width="3"></td>
<td valign="middle"><div class="header-content"><forwardtoafriend lang="de">Weiterleiten</forwardtoafriend></div></td>

</tr>
</tbody></table>
<table class="w255" width="255" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td class="w255" width="255" height="8"></td></tr>
</tbody></table>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody></table>

</td>
</tr>
<tr>
<td id="header" class="w640" width="640" align="center" bgcolor="#ffffff">

<div align="center" style="text-align: center">
<a href="http://www.djv-service.de">
<img id="customHeaderImage" label="Header Image" editable="true" width="640" src="http://www.djvservice.alfahosting.org/images/header_newsletter.jpg" class="w640" border="0" align="top" style="display: inline">
</a>
</div>

</td>
</tr>

<tr><td class="w640" width="640" height="30" bgcolor="#ffffff"></td></tr>
<tr id="gallery-content-row"><td class="w640" width="640" bgcolor="#ffffff">
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w30" width="30"></td>
<td class="w580" width="580">
<repeater>

<layout label="Text only">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w580" width="580">
<p align="left" class="article-title"><singleline label="Title">Add a title</singleline></p>
<div align="left" class="article-content">
<multiline label="Description">Enter your description</multiline>
</div>
</td>
</tr>
<tr><td class="w580" width="580" height="10"></td></tr>
</tbody></table>
</layout>

<layout label="Full width image">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w580" width="580" valign="top">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w580" width="580"><img editable="true" label="Image" class="w580" width="580" border="0"></td>
</tr>
<tr><td class="w580" width="580" height="10"></td></tr>
<tr>
<td class="w580" width="580">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w580" width="580" height="10"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</layout>

<layout label="Row of two images">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w280" width="280" valign="top">
<table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w280" width="280"><img editable="true" label="Image" class="w280" width="280" border="0"></td>
</tr>
<tr><td class="w280" width="280" height="10"></td></tr>
<tr>
<td class="w280" width="280">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w280" width="280" height="10"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td class="w280" width="280" valign="top">
<table class="w280" width="280" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w280" width="280"><img editable="true" label="Image" class="w280" width="280" border="0"></td>
</tr>
<tr><td class="w280" width="280" height="10"></td></tr>
<tr>
<td class="w280" width="280">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w280" width="280" height="10"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</layout>

<layout label="Row of three images">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w180" width="180" valign="top">
<table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
</tr>
<tr><td class="w180" width="180" height="10"></td></tr>
<tr>
<td class="w180" width="180">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w180" width="180" height="10"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td class="w180" width="180" valign="top">
<table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
</tr>
<tr><td class="w180" width="180" height="10"></td></tr>
<tr>
<td class="w180" width="180">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w180" width="180" height="10"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td class="w180" width="180" valign="top">
<table class="w180" width="180" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w180" width="180"><img editable="true" label="Image" class="w180" width="180" border="0"></td>
</tr>
<tr><td class="w180" width="180" height="10"></td></tr>
<tr>
<td class="w180" width="180">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w180" width="180" height="10"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</layout>

<layout label="Row of four images">
<table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w130" width="130" valign="top">
<table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
<tr>
<td class="w130" width="130">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td class="w130" width="130" valign="top">
<table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
<tr>
<td class="w130" width="130">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td class="w130" width="130" valign="top">
<table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
<tr>
<td class="w130" width="130">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
</tbody></table>
</td>
<td width="20"></td>
<td class="w130" width="130" valign="top">
<table class="w130" width="130" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td class="w130" width="130"><img editable="true" label="Image" class="w130" width="130" border="0"></td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
<tr>
<td class="w130" width="130">
<div align="center" class="article-content"><multiline label="Description">Enter your description</multiline></div>
</td>
</tr>
<tr><td class="w130" width="130" height="10"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</layout>
</repeater>
</td>
<td class="w30" width="30"></td>
</tr>
</tbody></table>
</td></tr>
<tr><td class="w640" width="640" height="15" bgcolor="#ffffff"></td></tr>

<tr>
<td class="w640" width="640">
<table id="footer" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFE561">
<tbody><tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="30"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
<tr>
<td class="w30" width="30"></td>
<td class="w580" width="360" valign="top">
<span class="hide"><p id="permission-reminder" align="left" class="footer-content-left"><span>Sie haben unseren kostenlosen </span><br>
<span>Informationsdienst abonniert.</span></p></span>
<p align="left" class="footer-content-left"><preferences lang="de">Abonnement bearbeiten</preferences> | <unsubscribe>Abmelden</unsubscribe></p>
</td>
<td class="hide w0" width="60"></td>
<td class="hide w0" width="160" valign="top">
<p id="street-address" align="right" class="footer-content-right"><span>DJV Service&Marketing GmbH</span><br>
<span>Friesdorfer Straße 194a</span><br>
<span>53175 Bonn</span><br>
<span></span><br>
<span>Tel.: 0228 / 38 72 90 - 0</span><br>
<span>Fax: 0228 / 38 72 90 - 25</span><br>
<span>E-Mail: info@djv-service.de</span></p>
</td>
<td class="w30" width="30"></td>
</tr>
<tr><td class="w30" width="30"></td><td class="w580 h0" width="360" height="15"></td><td class="w0" width="60"></td><td class="w0" width="160"></td><td class="w30" width="30"></td></tr>
</tbody></table>
</td>
</tr>
<tr><td class="w640" width="640" height="60"></td></tr>
</tbody></table>
</td>
</tr>
</tbody></table></body></html>

Mercatura-IT.de · **Antwort #2 am:** 06. August 2014, 13:07:22

Hat sich schon erledigt - Funktioniert jetzt !
Habe einfach den Editor abgeschaltet

fishnet · **Antwort #3 am:** 07. August 2014, 13:12:17

Nur zur Info: Wenn der Newsletter an mehr als 30 Leute geht, solltest du ihn NICHT über den Shop oder überhaupt über die eigene Domain versenden. Wurde hier im Forum mehrfach besprochen.

Mercatura-IT.de · **Antwort #4 am:** 07. August 2014, 13:37:46

Vielen Dank für den Hinweis,

ist uns bewusst. Der Newsletter an die LJV`s (16 an der Zahl) , wird lediglich über den Shop versendet.

Thema: Modified Editor (HTML+CSS)

Mercatura-IT.de

Modified Editor (HTML+CSS)

Mercatura-IT.de

Re: Modified Editor (HTML+CSS)

Mercatura-IT.de

Re: Modified Editor (HTML+CSS)

fishnet

Re: Modified Editor (HTML+CSS)

Mercatura-IT.de

Re: Modified Editor (HTML+CSS)

Teile Thema

Ähnliche Themen

WYSIWYG-Editor und HTML iframe (modified eCommerce Shopsoftware v1.05)

html Editor Kein Abstand bei Bildern

Content Manger zeig den Editor nicht an nur HTML Quellcode

XTC Editor Schriftgröße in Editor und Vorschau anders als im Shop