Menueebene wrapItemAndSub allStdWrap allWrap beforeWrap before beforeWrap stdWrap2 linkWrap stdWrap Menüpunkt erste Ebene, activ, nicht verlinkt stdWrap linkWrap stdWrap2 afterWrap after afterWrap allWrap allStdWrap [...] allStdWrap #hier fängt die zweite Ebene an wrapItemAndSub allStdWrap allWrap beforeWrap before beforeWrap stdWrap2 linkWrap <a> stdWrap Menüpunkt zweite Ebene, verlinkt stdWrap </a> linkWrap stdWrap2 afterWrap [...] ... <a> linkWrap stdWrap Menüpunkt zweite Ebene, verlinkt stdWrap linkWrap </a> ... Auflistung der TypoScript Hierarchie von stdWrap: outerWrap wrap3 prepend dataWrap wrap2 noTrimWrap wrap preCObject
wir einen Wrap um jedes Text Content Element in der rechten Spalte erhalten: tt_content { stdWrap.outerWrap.cObject = CASE stdWrap.outerWrap.cObject { key.field = colPos # Default ist ohne wrap default = [...] Wrap um alle Textelemente in einer bestimmten Spalte Content-Elemente können abhängig von ihrem Typ (Text, Bild usw.) und ihrer Positionierung mit beliebigen wraps umschlossen werden. In diesem Beispiel [...] value = | # colPos 2 ist die rechte Spalte 2 = CASE 2 { key.field = CType # cObject text bekommt einen wrap text = TEXT text.value = <div class="wrapper1">|</div> default = TEXT default.value = | } } }
} contentWrap.20.wrap = <div> | </div> contentWrap.20.10 < styles.content.get contentWrap.20.10.select.where = colPos = 1 contentWrap.20.10.wrap = <div id="contentLeft">|</div> contentWrap.20.20 = COA [...] subparts { contentWrap = COA ##Top box contentWrap.10 < styles.content.get contentWrap.10.wrap = <div id="contentTop">|</div> ##floated boxes wrapped in a box contentWrap.20 = COA contentWrap.20.if { ## backend [...] where = colPos = 3 contentWrap.20.40.wrap = <div id="contentRight">|</div> ##bottom box contentWrap.30 < styles.content.get contentWrap.30.select.where = colPos = 4 contentWrap.30.wrap = <div id="contentBo
kann. tt_content.stdWrap { ... innerWrap.cObject = CASE innerWrap.cObject { key.field = section_frame ... ##linker Bereich, muss nicht angepasst werden 20 =< tt_content.stdWrap.innerWrap.cObject.default ##CSS [...] 20.15.value = csc-frame csc-frame-frame1 ##rechter Bereich, mit Anpassung 21 =< tt_content.stdWrap.innerWrap.cObject.default ##CSS Klasse für Rahmen 1 21.15.value = csc-frame csc-frame-frame2 ## rechter [...] = >|</div><div class="clearer"> </div> ##optional, neue Rahmendefinition 30 =< tt_content.stdWrap.innerWrap.cObject.default 30.15.value = meinecssKlasse } ... } CSS Definition dazu: ##Abstand zwischen
paar Pixel nach unten erweitert: tt_content.image.20.1.imageLinkWrap.JSwindow.expand = 0,20 Ein Text unter dem Bild lässt sich über den wrap-Parameter einfügen, dieser schliesst das img-Tag im Fenster ein [...] enthält: tt_content.image.20.1.imageLinkWrap { bodyTag = <body style="margin:0; background: #ccc;"> width = 960m title = Image from jweiland.net JSwindow.expand = 0,20 wrap = <A href="javascript:close();"> | [...] wird: tt_content.image.20.1.imageLinkWrap.width = 960m Wer mag, kann auch den Inhalt der Titelzeile im neuen Fenster ändern: tt_content.image.20.1.imageLinkWrap.title = Bild im Popup-Fenster
Text vor dem Rootline Menue wrap = <p>Sie sind hier: |</p> 1 = TMENU 1.target = _top 1.NO { stdWrap.htmlSpecialChars = 1 # Layout 1: Seite 1 | Seite 2 | Seite 3 #linkWrap = | | |*||*| [...] | | # Layout 2: Seite 1 > Seite 2 > Seite 3 #linkWrap = | > |*||*| | # Layout 3: Seite 1 >> Seite 2 >> Seite 3 linkWrap = | » |*||*| | doNotLinkIt = |*| 0 |*| 1 } }
stdheader.10 { 1.dataWrap = <h1 style="padding:0; margin:0px 10px 10px 10px; font-family: Arial, Helvetica, sans-serif; font-size:25px; line-height:33px; color:#333333;">|</h1> 2.dataWrap = <h2 style="padding:0; [...] color:#333333;">|</h2> 3.dataWrap = <h3 style="padding:0; margin:10px; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:17px; color:#333333;">|</h3> 4.dataWrap = <h4 style="padding:0; [...] :17px; color:#333333;">|</h4> } ## p mit style versehen tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes.P.style = font-family:Arial, Helvetica, sans-serif;color: #666B6E; font-size:
Layouts 2 = COA 2.10 = COA 2.10 { wrap = <div class="content clearfix">|</div> # Oberer Bereich, ganze Breite 10 < styles.content.get 10.select.where = colPos = 1 10.wrap = <div class="fullwidth">|</div> [...] styles.content.get 20.select.where = colPos = 0 20.wrap = <div class="main">|</div> # Sidebar 30 < styles.content.get 30.select.where = colPos = 2 30.wrap = <div class="sidebar">|</div> } # Footerbereich [...] 2.20 < styles.content.get 2.20.select.where = colPos = 3 2.20.wrap = <div class="footer">|</div> } # Object in die Variable content page.10.variables { content < temp.contentStructure }
COA lib.rootline { wrap = <ul class="rootline">|</ul> # Breadcrumbs 10 = HMENU 10 { special = rootline special.range = 1|-1 1 = TMENU 1 { NO = 1 NO.doNotLinkIt = |*| 0 |*| 1 NO.allWrap = |*|<li>|<span c [...] class="divider">/</li>|*|<li>|</li> NO.stdWrap.htmlSpecialChars = 1 } } } 2. Rootline um News-Titel erweitern ## Über die Condition wird erreicht, dass der Code nur dann ausgeführt wird, ## wenn [...] [globalVar = GP:tx_news_pi1|news > 0] lib.rootline.10.1.NO.doNotLinkIt = 0 lib.rootline.10.1.NO.allWrap = <li>|<span class="divider">/</li> lib.rootline.20 = RECORDS lib.rootline.20 { dontCheckPid
<style> 10 < lib.imageresourceSmall 10.stdWrap.wrap = @media (max-width: 768px){body { background-image: url(/|); }} 20 < lib.imageresourceBig 20.stdWrap.wrap = @media (min-width: 769px){body { backgr