Zum Inhalt springen

Newsletter + css Formatierung

Erstellt am 10. März 2010 · 1 Antwort · letzte Antwort am 10. März 2010

Tags: Frage

id31 ·

Hallo

Ich nutze für einen Newsletterversand die DirectMail/DirectMailSubscription Extension und habe für den Newsletter ein entsprechendes Template angelegt. Soweit so gut, der Versand funktioniert auch einwandfrei, die Inhalte und auch die Grafiken werden übergeben.

Nur die css Formatierung funktioniert nicht...weil diese wohl wie ich mittlerweile in Erfahrung bringen konnte nicht im TypoScript des Templates eingebunden ist.

Momentan schaut mein Template so aus...

# spam protect e-mail addresses
   config.spamProtectEmailAddresses = 1 
   config.spamProtectEmailAddresses_atSubst = (at)

# XHTML
   config.doctype = xhtml_trans
   config.xhtml_cleaning = all

# cache period
   config.cache_period = 3600

# language
   config.htmlTag_langKey = de
   config.metaCharset = utf-8
   config.language = de
   config.locale_all = de_DE

page = PAGE
page {
   typeNum = 0
   bodyTag = 
   stylesheet = fileadmin/templates/main/css/newsletter.css

   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/templates/main/newsletter.html
   10.workOnSubpart = DOCUMENT_BODY
   10.marks {

   TOP-MENU = HMENU
   TOP-MENU {
      special = directory 
      special.value = 1
      entryLevel = 0
      #stdWrap.wrap = <ul>|</ul>
      1 = TMENU
      1 {
      noBlur = 1
      expAll = 1
      wrap = <ul>|</ul>
      NO.wrapItemAndSub = <li>|</li>
      NO.ATagTitle.field = abstract // description // title
      ACT = 1
      ACT.wrapItemAndSub = <li class="act">|</li>
      ACT.ATagTitle.field = abstract // description // title
      }
   }

   HEADER-IMG = IMAGE
   HEADER-IMG {
      file = fileadmin/templates/main/img/img_header.jpg
      stdWrap.typolink.parameter = 9
      alttext = TYPO3 Template free - Home
   }

   MIDDLE-MARKER = CONTENT
   MIDDLE-MARKER {
      table = tt_content
      select.orderBy = sorting
      select.where = colPos = 0
   }

   }
}

Die newsletter.css ist ja hier noch extern eingebunden, nur weis ich nicht wie ich meine css

innerhalb des TypoScript unterbringen soll?

body, html {
	position: relative;
	text-align: center;
	border: 0;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 101%;
	font: normal 100.01% Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff;
}

#outer-wrapper {
	position: relative;
	z-index: 0;
	text-align: left;
	margin: 0 auto;
	height: auto;
	background: #FFFFFF;
}

#content-wrapper {
	position: absolute;
	top: 204px;
	left: 0;
	width: 100%;
	height: auto;
	background: #FFFFFF;
	clear: both;
}

#header, #outer-wrapper, #footer {
	width: 756px;
}

#header-img {
	width: 744px;
}
#middle-marker-box {
	margin: 24px 12px 12px 24px;
	padding: 0;
}

#middle {
	float: left;
	width: 100%px;
	z-index: 2;
	background: #FFFFFF;
}

#middle-content {
	width: 100%px;
}

/*#right-marker-box {
	margin: 24px 36px 12px 12px;
	padding: 0;
}

#right-marker {
	margin: 0;
	padding: 0 12px;
	background: #f1f1f1;
}

#right {
	float: left;
	width: 252px;
	z-index: 4;
	background: #FFFFFF;
}

#right-content {
	width: 252px;
}*/

#header {
	position: absolute;
	left: 0;
	top: 6px;
	height: 162px;
	background: #FFFFFF;
}

#header-img {
	position: absolute;
	left: 6px;
	top: 6px;
	height: 150px;
	background: #FFFFFF;
}

#top {
	position: absolute;
	top: 168px;
	left: 0;
	width: 100%;
	height: 20px;
	background: #e5eef7;
}

H1, H2, H3, H4, H5, H6, P, UL { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; }
A { color: #004078; text-decoration: none; }
A:hover { color: #004078; text-decoration: underline; }
P, UL, OL { font-size: 11px; }
P { margin: 0px 0px 0px 0px; }

H1 { font-size: 14px; color: #000000; }
H2 { font-size: 14px; color: #000000; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #004078; padding: 0 0 3px 0; }
H3 { font-size: 12px; color: #000000; }
H4 { font-size: 11px; color: #000000; }
H5 { font-size: 10px; color: #000000; }
H6 { font-size: 9px; color: #333333; font-weight: normal; }
H1, H2, H3, H4, H5, H6 { margin: 0px 0px 0px 0px; margin-top: 20px; }
H1 { margin: 0px 0px 0px 0px; margin-top: 20px; margin-bottom: 20px; }
H2, H3 { margin: 0px 0px 0px 0px; margin-top: 20px; margin-bottom: 10px; }
H4, H5, H6 { margin: 0px 0px 0px 0px; margin-top: 20px; margin-bottom: 10px; }
H1.csc-firstHeader, H2.csc-firstHeader  { margin-top: 0px; }
H3.csc-firstHeader { margin-top: 0px; }
H4.csc-firstHeader, H5.csc-firstHeader, H6.csc-firstHeader { margin-top: 0px; }

P.bodytext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; line-height: 14px; padding-bottom: 6px; text-align:justify; }

UL { list-style-type: disc; list-style-position: outside; }
UL UL LI { font-size: 10px; }
LI { padding-left: 2px; }

IMG { border-style: none; }

P.csc-caption { font-size: 10px; }

.csc-textpic-caption { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; }

#footer {
	position: relative;
	left: 0;
	height: auto;
	clear: both;
	background: #FFFFFF;
}

#footer-box {
	position: relative;
	margin: 0;
	padding: 6px;
}

#footer-text {
	margin: 0;
	padding: 6px;
	background: #FFFFFF;
	text-align: center;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #E6E6E6;
	font-size: 10px;
	line-height: normal;
	color: #002642;
}

Wer kann mir da weiter helfen, ich habe bisher nirgendwo einen brauchbaren Ansatz finden können!

longhook ·

Hallo id31,

eine Variante ist es zum Beispiel, die Stil-Angaben im Kopf der HTML-Datei mitzuliefern. Beispiel:

page {
headerData.10 = TEXT
headerData.10.value (
<style type="text/css">
/* Hier deine Auszeichnungen in normaler CSS-Syntax */
</style>
)
}

Weil ich das Thema heute erst hatte und es mich einiges an Arbeit gekostet hat: Schau am besten noch vor der Fertigstellung deines HTML-Templates mal in dieses Thema rein ...

Gruß
longhook