Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:inhaltselemente

Headlines mit Klassen versehen

css_styled_content gibt Überschriften aus dem Feld Header wie folgt aus:

<div class="csc-header csc-header-n1">
  <h1 class="csc-firstHeader">Überschrift erster Ordnung, erste Überschrift auf Seite</h1>
</div>
<div class="csc-header csc-header-n2">
  <h1>Überschrift erster Ordnung</h1>
</div>
<div class="csc-header csc-header-n3">
  <h2>Überschrift zweiter Ordnung</h2>
</div>

Jede Überschrift wird also mit einem zusätzlichen div-Element umschlossen, welches eine allgemeine Klasse sowie eine fortlaufend nummerierte Klasse (-n1 etc.) erhält. Die erste Überschrift auf jeder Seite erhält zudem die Klasse csc-firstHeader.

Mit diesem TypoScript wird folgendes erreicht:

  • Die div-Elemente werden komplett entfernt.
  • Allen Überschriften wird direkt eine Klasse zugewiesen, die abhängig vom Wert im Feld header_layout ist.
  • Falls das Feld header_layout 0 (Default) zurückgibt, wird der Wert 1 genommen.
  • Die praktische Klasse der ersten Überschrift auf einer Seite bleibt erhalten.
lib.stdheader {
	3 >
	3 = LOAD_REGISTER
	3.headerClass.cObject = CASE
	3.headerClass.cObject {
		key.field = header_layout
		0 = TEXT
		0 {
			value = header-first header-1
			if.value = 1
			if.equals.data = cObj:parentRecordNumber
			noTrimWrap = | class="|"|
		}
		default = TEXT
		default {
			value = header-first header-{field:header_layout}
			if.value = 1
			if.equals.data = cObj:parentRecordNumber
			stdWrap.insertData = 1
			noTrimWrap = | class="|"|
		}
		stdWrap.ifEmpty.cObject = CASE
		stdWrap.ifEmpty.cObject {
			key.field = header_layout
			0 = TEXT
			0 {
				value = header-1
				noTrimWrap = | class="|"|
			}
			default = TEXT
			default {
				value = header-{field:header_layout}
				insertData = 1
				noTrimWrap = | class="|"|
			}
		}
	}
	stdWrap.dataWrap >
}

Erklärung:

Wir passen css_styled_content an. Das Register mit der Überschriften-Klasse csc-firstHeader wird überschrieben mit zwei CASE-Abfragen. Die Zuweisung von Klassen erfolgt nach zwei Abhängigkeiten: Dem Wert in header_layout (CASE) und dem Wert von cObj:parentRecordNumber (IF).

Das erste CASE-Objekt gibt nur dann einen Wert (also die Klassen) zurück, wenn der Wert aus cObj:parentRecordNumber mit 1 identisch ist. In diesem Fall handelt es sich dann um die erste Überschrift dieser Seite. Die erste Klasse wäre daher header-first, die zweite Klasse beinhaltet den Wert aus dem Feld header_layout. Da dies bedeuten würde, dass die Default-Überschrift die Klasse header-0 erhalten würde, korrigieren wir dies mit der CASE-Abfrage und weisen der Default-Überschrift den festen Wert header-1 zu.

Wenn das erste CASE-Objekt keinen Wert ausgibt, weil es sich nicht um die erste Überschrift der Seite handelt, wird Dank ifEmpty der Wert des zweiten CASE-Objekts ausgegeben. Bis auf die fehlende if-Abfrage sind beide CASE-Objekte identisch.

Das zweite TypoScript sorgt dafür, dass Überschriften aus dem RTE ebenfalls Klassen erhalten:

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines {
	addAttributes.H1.class = header-1
	addAttributes.H2.class = header-2
	addAttributes.H3.class = header-3
}

Ergebnis:

<h1 class="header-first header-1">Überschrift erster Ordnung, erste Überschrift auf Seite</h1>
<h1 class="header-1">Überschrift erster Ordnung</h1>
<h2 class="header-2">Überschrift zweiter Ordnung</h2>
<h3 class="header-2">Überschrift dritter Ordnung</h3>
[...]

Listenelemente im RTE um <span> ergänzen

Hiermit lassen sich Auflistungszeichen und Text separat formatieren.

  • Listenelement mit andersfarbigem Zeichen
Setup:

lib.parseFunc_RTE.externalBlocks := addToList(ol,ul,li)
lib.parseFunc_RTE.externalBlocks {
	li.callRecursive = 1
	li.callRecursive.alternativeWrap = <li><span>|</span></li>
	li.stdWrap.HTMLparser {
		allowTags = li,span,p
		removeTags = p
	}
	ul.callRecursive = 1
	ol.callRecursive = 1
}

CSS:

li {color:red;}
li > span {color:black;}
typo3/inhaltselemente.txt · Zuletzt geändert: 2015/12/03 19:32 (Externe Bearbeitung)