Zum Inhalt springen

Klassen von CSS Styled Content

Erstellt am 19. September 2004 · 2 Antworten · letzte Antwort am 19. September 2004

Tags: Frage

Alex Weber ·

Hallo,

wenn man mit CSC arbeitet, werden die Überschriften standardmäßig mit einer Klasse versehen, was dann so aussieht:

<!--  Header: [begin] -->
<div class="csc-header csc-header-n1"><h1 class="csc firstHeader">test</h1></div>
<!--  Header: [end] -->
			
<!--  Text: [begin] -->
<p class="bodytext">....<p>
<!--  Text: [end] -->

Das gefällt mir soweit ganz gut, denn es wird bei nachfolgenden Inhalten ja weiter hoch gezählt. Die nächste Überschrift im Dokument bekäme dann also die Klasse csc-header csc-header-n2. Besteht aber nun eine Möglichkeit, auch den zur Überschrift gehörenden Text mit dieser Klasse zu versehen? Ich stelle mir das dann in etwa so vor:

<!--  Header: [begin] -->
<div class="csc-header csc-header-n1"><h1 class="csc firstHeader">test</h1></div>
<!--  Header: [end] -->
			
<!--  Text: [begin] -->
<div class="csc-text csc-text-n1"><p class="bodytext">....<p></div>
<!--  Text: [end] -->

Hat jemand sowas schonmal umgesetzt, und kann mir weiterhelfen?

Alex Weber ·

Ich habe mal folgendes in mein Setup geschrieben:

tt_content.text = COA
tt_content.text {
10 = < lib.stdheader

20 = LOAD_REGISTER
20.text.Class = csc-firstHeader
20.text.Class.if.value=1
20.text.Class.if.equals.data = cObj:parentRecordNumber
20.text.Class.noTrimWrap = | class="|"|


30 = TEXT
30 {
field = bodytext
required = 1

dataWrap = <p class="csc-Text-{field:layout}">|</p>
htmlSpecialChars = 1

editIcons = tt_content:bodytext,layout
editIcons.beforeLastTag = 1
editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.subheader

prefixComment = 2 | TEXT:
}
}

Die Klasse wird auch erzeugt, zählt aber nicht hoch. Ausgegeben bekomme ich:

<!--  TEXT: [begin] -->
<p class="csc-Text-0">...</p>
<!--  TEXT: [end] -->

Anstatt der 0 hätte hier eine 1 erscheinen sollen. Wie bekomme ich das hin?

Alex Weber ·

Ich habs alleine hinbekommen. Mit folgendem Setup Code wird nun der gesamte Record in einen DIV gepackt, der Code ist garantiert viel zu groß, aber so funktioniert er erstmal:

Genau wie ich es haben wollte, beinahe besser, denn nun umschließt der DIV csc-header-n1 den gesamten Record.

Setup:

includeLibs.tx_cssstyledcontent_pi1 = EXT:css_styled_content/pi1/class.tx_cssstyledcontent_pi1.php

tt_content.text = COA
tt_content.text {



2 = LOAD_REGISTER
2.headerStyle.field = header_position
2.headerStyle.required = 1
2.headerStyle.noTrimWrap = | style="text-align:|;"|

3 = LOAD_REGISTER
3.headerClass = csc-firstHeader
3.headerClass.if.value=1
3.headerClass.if.equals.data = cObj:parentRecordNumber
3.headerClass.noTrimWrap = | class="|"|

10 = CASE
10.setCurrent {
field = header
htmlSpecialChars = 1
typolink.parameter.field = header_link
}
10.key.field = header_layout
10.key.ifEmpty = {$content.defaultHeaderType}
10.key.ifEmpty.override.data = register: defaultHeaderType

10.1 = TEXT
10.1.current = 1
10.1.insertData = 1
10.1.fontTag = <h1{register:headerStyle}{register:headerClass}>|</h1>

10.2 < .10.1
10.2.fontTag = <h2{register:headerStyle}{register:headerClass}>|</h2>

10.3 < .10.1
10.3.fontTag = <h3{register:headerStyle}{register:headerClass}>|</h3>

10.4 < .10.1
10.4.fontTag = <h4{register:headerStyle}{register:headerClass}>|</h4>

10.5 < .10.1
10.5.fontTag = <h5{register:headerStyle}{register:headerClass}>|</h5>


stdWrap.fieldRequired = bodytext
stdWrap.if {
equals.field = header_layout
value = 100
negate = 1
}

stdWrap.editIcons = tt_content : header, [header_layout | header_position], [header_link|date]
stdWrap.editIcons.beforeLastTag = 1
stdWrap.editIcons.iconTitle.data = LLL:EXT:css_styled_content/pi1/locallang.php:eIcon.header

stdWrap.dataWrap = <div class="csc-header-n{cObj:parentRecordNumber}">|</div>
stdWrap.prefixComment = 
}

tt_content.stdWrap.prefixComment =

Dieser Setupcodde muss sicherlich noch bereinigt werden, aber so funktioniert es bei mir super.

die resultierende HTML Ausgabe:

<div class="csc-header-n1"><h1 class="csc-firstHeader">test</h1>
<!--  Text: [begin] -->
<p class="bodytext">...</p>
<!--  Text: [end] -->
</div>