TYPO3 & Überschriften: formatiert, grafisch, versteckt und wech
17. Januar 2008 | 29 KommentareIn TYPO3 gibt es die Möglichkeit, Überschriften von Seiteninhalten mit einem anderen „Typ“ zu versehen. Damit kann man verschiedenen CSS-Klassen vergeben, grafische Überschriften (als Bilder) erzeugen, sie per CSS zu verstecken oder auch gar nicht erst auszugeben. Los geht’s!
In einer normalen TYPO3-Version gibt es die links zu sehenden Überschrifen-Layouts. Hier kann man auswählen was man will, es wird im Frontend immer eine <H1>Überschrift</h1> ausgegeben werden. Und auch verborgen hilft hier nicht. Aber zu irgendwas muss das Ganze ja gut sein. Doch dazu brauchen wir ein wenig TypoScript, ein bisschen CSS.
1: Layout-Typen umbenennen
Da ich die vorinstallieren Bezeichnungen nicht gerade aussägekräftig finde, bennene ich sie bei einer neuen TYPO3-Installation immer erst einmal um. Folgenden Code könnte man beispielsweise in die TSConfig der Root-Seite einfügen, um die Layout-Typen und so die umbenennen:
## Layout-Felder Ueberschriften umbenennen und Rest ausblenden
TCEFORM.tt_content.header_layout.altLabels {
1 = H2 rot
2 = Grafische Ueberschrift
3 = Versteckt (CSS)
4 = Nicht ausgeben
}
TCEFORM.tt_content.header_layout.removeItems = 5,6,7,8,9,10,100
Mit dem removeItems lassen sich die nicht benötigten felder ausblenden. Der Wert 100 entfernt übrigens das „Hidden/Versteckt/Verborgen„.
2: TypoScript anpassen
Nun müssen wir die Werte im TypoScript Setup der Root-Seite wieder entgegennehmen und damit die Frontend-Ausgabe anpassen. Dies geht wie folgt:
# UEBERSCHFIRTEN ALTERNATIVE LAYOUTS
# ***********************************************
# Ueberschrift neu formatieren
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
# DEFAULT H1-AUSGABE (0)
default = TEXT
default.field = header
default.wrap = |
;
# Verlinkung von Ueberschriften
default.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
#H2 ROT (1)
1 = TEXT
1.field = header
1.wrap = |
;
#GRAFISCHE UEBERSCHRIFT (2)
2 = IMAGE
2.file = GIFBUILDER
2.file {
XY = 1+[10.w], 24
backColor = #FFFFFF
10 = TEXT
10.text.field = header
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/arial.ttf
10.fontColor = #000
10.fontSize = 13
10.offset = 0, 12
# ggf vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 1, 38
# Hilfsebene fuer Hoehenberechnung
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 22
16.offset = 1000,1000
wrap = |
}
2.alttext.field = header
2.titletext.field = header
# Verlinkung von Ueberschriften
2.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
# CSS VERSTECKT (3)
3 = TEXT
3.field = header
3.wrap = |
;
# NICHT AUSGEBEN: WECH!!! (4)
4 = TEXT
4.field >
} # ENDE lib.stdheader
Mit der CASE-Abfrage zum Header-Layout fragen wir ab, welcher Layout-Typ gewählt wurde und passen entsprechend die Ausgabe im Frontend an. Per default wird die <h1>Überschrift</h1> ausgegeben.
Mit dem typolink aktiviert man die Verlinkung von Überschriften.
In den Varianten 1 (H2 ROT) und 3 (CSS VERSTECKT) wird einfach nur der Wrap um den Feldinhalt header angepasst und damit formatiert.
Bei der GRAFISCHEN UEBERSCHRIFT wird eine Überschrift mit dem GIFBUILDER erstellt und damit als Bild ausgegeben, was nützlich ist, wenn man z.B. eine Corporate-Design-Schriftart verwenden möchte.
Das ganze Spiel lässt sich nun nach Belieben noch ausdehnen. Aber das ist jetzt Eure Sache!
7. Februar 2008, 15:32 Uhr
Entschuldigung vorab, falls die Frage einigen blöd vorkommt (; Aber: Wo genau im Typoscript der root seite muss ich ich Anweisungen einfügen?
Due Umbenennung der Layout Typen klappt einwandfrei. Nur leider werden die Anweisungen nciht richtig umgesetzt ;(
habe das ganze jetzt im setup feld das root temlplates zwischen „seite = PAGE
seite{ [anweisungen] }“ gesetzt..oder muss das außerhalbt von dem „PAGE“ hin? Bin für jeden Tip dankbar! (;
10. Februar 2008, 11:27 Uhr
@Rene:
Das TypoScript muss ins TypoScript > Setup-Feld und außerhalb des Page-Objektes.
15. Februar 2008, 12:01 Uhr
Hmmm, bei mir funktioniert das so nicht…
habe wie oben beschrieben zunächst das TSConfig angepasst und dann das Setup der Root Seite. Hab mich ausserdem auf 2 Stile beschränkt: default und hidden (css). Ich kann nun auch nur noch die beiden Stile auswählen, allerdings werden mir nun im FE immer zwei Überschriften angezeigt:
Im Quelltext sieht das Ganze jetzt so aus:
ÜberschriftÜberschrift
Woran kann das liegen??
18. März 2008, 10:01 Uhr
Funktioniert das eventuell nur mit TemplaVoila? Bei mir funktioniert das so jedenfalls auch nicht.
18. März 2008, 11:07 Uhr
Also, wir haben es jetzt nochmal ausprobiert und in eine frisch aufgespielte TYPO3-Installation (4.1.6) ohne TemplaVoila genau den oben angegebenen Code eingefügt und es lief alles sauber.
Das einzige womit man ein wenig aufpassen muss, sind die Anführungszeichen bei class=“rot“ / class=“hidden“. Die können beim Copy+Paste seltsame Formen annehmen.
Ansonsten funktioniert das alles!
Viel Glück / thomas alboth
29. April 2008, 14:01 Uhr
Hi!
Überschrift mit css verstecken findet Google nicht so lustig – von da her vorsicht mit so etwas…
Vielleicht funktioniert es bei einigen nicht, weil sie entweder das statische Temnplate „content(default)“ nicht eingebunden haben oder die Extension css_styled_content nicht installiert und das entsprechende statische Template nicht eingebunden haben…
Anleitung:
http://www.fi-ausbilden.de/blog/2007/07/08/typoscript-eine-einfuhrung-teil-2
4. Juli 2008, 09:40 Uhr
Ich bin noch neu bei Typo3 – wo finde ich bitte das TSConfig Feld? – Danke für Antworten
20. November 2008, 15:00 Uhr
Hat das schon jemand mit Typo 4.2.3 getestet?
Bei mir funktioniert es nur halb d.H. im Backend wird nichts umbenannt aber im Frontend scheint es zu funktionieren
20. November 2008, 17:08 Uhr
Jaja läuft. Wir haben schon ein paar Seiten upgedated, ohne das es etwas zerschossen hätte. //LG//tom
9. Februar 2009, 11:00 Uhr
Bei Typo3 4.2.2 läufts.
Problem:
Habe versucht mit:
6 = TEXT
6.field = header
6.wrap = |
eine weitere Überschrift zu definieren. Sie erscheint jedoch auch trotz:
## Layout Typen umbenennen
TCEFORM.tt_content.header_layout.altLabels {
1 = Grafisch mit Font
2 = Grafisch mit Font 2
3 = H3 140%
4 = H4 120%
5 = H5 100%
6 = H6 100% fett <- die ist gemeint
}
## Layout Typen ausblenden
TCEFORM.tt_content.header_layout.removeItems = 7,8,9,10 <- hier natürlich ohne 5 und 6
nicht in der Drop-Down-Liste im BE.
Gibt es noch soetwas wie:
TCEFORM.tt_content.header_layout.showItems ???
16. März 2009, 18:39 Uhr
Zu Eintrag 10 von Tutorial würde mich auch eine Problemlösung interessieren…
Anybody?
16. März 2009, 19:15 Uhr
@Tutorial / @DJ Volvic:
Also Frage 10 scheint von Interesse zu sein: Problem:
Wie erhalte ich einen sechsten Überschriften-Typ?
Per default gibt es die Werte 0 bis 5 sowie 100 für versteckt. Das wird in der Datei sysext/cms/tbl_tt_content.php definiert, genauer im Array $TCA[‚tt_content‘][‚columns‘][‚header_layout‘][‚config‘] unter items. Aber egal, eigentlich. Denn da müsst Ihr nicht herumcoden.
Um diesen Array um ein weiteres Element zu erweitern muss man in der Datei typo3conf/extTables.php einen sechsten TCA-Eintrag hinzufügen. Das geht z. B. über
$TCA[‚tt_content‘][‚columns‘][‚header_layout‘][‚config‘][‚items‘] = Array (
Array(‚LLL:EXT:lang/locallang_general.php:LGL.normal‘, ‚0‘),
Array(‚LLL:EXT:cms/locallang_ttc.php:header_layout.I.1‘, ‚1‘),
Array(‚LLL:EXT:cms/locallang_ttc.php:header_layout.I.2‘, ‚2‘),
Array(‚LLL:EXT:cms/locallang_ttc.php:header_layout.I.3‘, ‚3‘),
Array(‚LLL:EXT:cms/locallang_ttc.php:header_layout.I.4‘, ‚4‘),
Array(‚LLL:EXT:cms/locallang_ttc.php:header_layout.I.5‘, ‚5‘),
Array(‚Ueberschrift Sechs‘, ‚6‘),
Array(‚LLL:EXT:cms/locallang_ttc.php:header_layout.I.6‘, ‚100‘)
);
Jetzt speichern, hochschieben und Ihr werdet einen neuen Überschriftentyp Ueberschrift Sechs finden.
Viel Spaß // tom
16. März 2009, 19:22 Uhr
Klasse. Funzt. Danke Tom. Bitte. 🙂
19. März 2009, 10:42 Uhr
Vielen Dank auch für dieses ergonomische Arbeitsbeispiel. Dadurch haben Redakteure wirklich mehr Sicherheit beim einpflegen von Inhalten. Das verkürzt die Produktionslinie zwar nur um Sekunden, an die gleiche Stelle tritt jedoch Kundenzufriedenheit.
Diese Pulldowns für Layout-Typen gibt es noch an verschiedene Stellen, bspw. Textfeld-Layout, Sitemap-Layout. Wo und wie werden diese bearbeitet?
3. Oktober 2009, 15:03 Uhr
[…] TYPO3 & Überschriften: formatiert, grafisch, versteckt und wech […]
6. November 2009, 17:28 Uhr
Also bei mir TYPO3 4.2.10 wirken sich die Änderungen im Backend nicht aus (Menüeintrage umzubenennen)… Dennoch greifen die Änderungen im Frontend… Jemand ne Idee?
6. November 2009, 17:31 Uhr
k mein Fehler, muss natürlich in der TCconfig rein! Wer lesen kann…
31. Dezember 2009, 17:40 Uhr
Ich bekomme Probleme mit RealUrl da er die nun die Überschrift des ersten Textpic (=Sortenbeschreibung) als Postvar Variable sucht anstelle des Seitentitels (=Sorten).
Ansonsten funktioniert alles super.
8. Januar 2010, 00:18 Uhr
Hallo, vielen Dank für den Artikel – hier ein kleiner Nachtrag: nach dem Beispiel oben würde header_position nicht berücksichtigt werden, ich habe es etwas ergänzt so dass auch die Ausrichtung (links, rechts, mitte) zusammen mit den eigenen Layouts funktioniert:
# UEBERSCHFIRTEN ALTERNATIVE LAYOUTS
# ***********************************************
# Ueberschrift neu formatieren
lib.stdheader >
lib.stdheader = COA
lib.stdheader{
# Create align style-attribute for tags
2 = LOAD_REGISTER
2.headerStyle.field = header_position
2.headerStyle.required = 1
2.headerStyle.noTrimWrap = | style=“text-align:|;“|
}
lib.stdheader.10 = CASE
lib.stdheader.10 {
setCurrent {
field = header
htmlSpecialChars = 1
typolink.parameter.field = header_link
}
key.field = header_layout
# DEFAULT H1-AUSGABE (0)
default = TEXT
#default.field = header
default.current = 1
default.insertData = 1
default.wrap = |
# Verlinkung von Ueberschriften
default.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
#H2 ROT (1)
1 = TEXT
#1.field = header
1.current = 1
1.insertData = 1
1.wrap = |
#GRAFISCHE UEBERSCHRIFT (2)
2 = IMAGE
2.file = GIFBUILDER
2.file {
XY = 1+[10.w], 24
backColor = #FFFFFF
10 = TEXT
10.text.field = header
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/Trebuchet MS Bold.ttf
10.fontColor = #b25800
10.fontSize = 13
10.offset = 0, 12
# ggf vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 1, 38
# Hilfsebene fuer Hoehenberechnung
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 12
16.offset = 1000,1000
wrap = |
}
2.alttext.field = header
2.titletext.field = header
# Verlinkung von Ueberschriften
2.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
2.wrap = |
# CSS VERSTECKT (3)
3 = TEXT
3.field = header
3.wrap = |
# NICHT AUSGEBEN: (4)
4 = TEXT
4.field >
} # ENDE lib.stdheader
25. Januar 2010, 16:04 Uhr
Genial!!! Leider habe ich bei der grafischen Überschrift immer einen Rahmen um meine Überschrift. Obwohl ich Border = 0 drin habe! Nur bei der Überschrift, nicht bei normalen Bildern, hat jemend ne Lösung.
31. Januar 2010, 09:25 Uhr
Mein Border Problem ist gelöst! War im CSS noch ein Fehler!
Nun was anderes: „Wie kann ich es schaffen das die Überschrift bis zum Ende des Content geht? (#GRAFISCHE UEBERSCHRIFT (2))“ Oder den Hintergrund des Überschriftenfeldes mit der Hintergrundfarbe der formatierten Überschrift versehen. Wenn ich das im ObjectBrowser mache gilt dies für alle! Ich möchte aber für jede Überschrift einzeln wählen können.
Und wenn wir schon dabei sind, ich bekomme es nicht hin die Schrift Fett darzustellen.
1. Juli 2010, 16:39 Uhr
Wie kann ich denn dennoch die Klasse csc-firstHeader in der allerersten Überschrift ausgeben? :/
#Überschriftlayouts
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
#Default/H1 (0)
default = TEXT
default.field = header
default.wrap = |
# Verlinkung
default.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}
Da bekomm ich immer nur „Text“, „Text“, … Brauche in der ersten Überschrift auf der seite (egal, welches Layout) diese Klasse… :/
Danke schonmal!
Gruß! Nicole
29. Oktober 2010, 15:23 Uhr
Wie kann ich denn einfach eine neue Überschriftendefinition hinzufügen ohne die bestehenden neu definieren zu müssen?
Habe bereits mittels:
TCEFORM.tt_content.header_layout.addItems.9 = Neues Layout
ein neues Layout angelegt dass auch angezeigt wird. Jedoch will ich dafür jetzt noch eine spezielle Formatierung vornehmen. In diesem Beispiel werden jedoch alle Definitionen neu angelegt.
20. Januar 2011, 12:25 Uhr
wie kann ich dem Link einer Überschrift eine eigene CSS-Klasse ( mitgeben?
Folgendes funktioniert leider nicht:
lib.stdheader.10.9 < lib.stdheader.10.1
lib.stdheader.10.9.fontTag = |
lib.stdheader.10.9.typolink.ATagParams = class=“iconRecommend“
16. August 2011, 16:36 Uhr
Hallo, ich beschäftige mich beruflich mit Typo3 und trotzdem lerne ich doch immer noch dazu. Wirklich gute Beschreibung und funktioniert auch. Werde mich mal über die anderen Typo3 Artikel stürzen. Danke nochmal. Michael
9. Mai 2012, 11:07 Uhr
Danke für diesen Beitrag! War sehr Hilfreich.
18. Mai 2012, 15:15 Uhr
Sehr sehr hilfreich!
Gruß
– Johannes
29. November 2012, 12:58 Uhr
Hallo.
Erstmal danke für diesen Beitrag, er ist wirklich hilfreich.
Frage: muss ich zu jedem Layout eine Link-Definition schreiben, oder ist eine Definition über alle möglich?
beim Standard-Layout sagten wir ja:
„default.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}“
müsste ich also zum Layout 2 beispielsweise folgendes schreiben?:
„2 < .default
2 = TEXT
2.field = header
2.wrap = |“
funktioniert zwar, aber ist eine Definition in einer Zeil möglich? thx
21. Oktober 2014, 08:31 Uhr
Hi,
ich teste das ganze gerade mit typo3 6.2. Nur leider verlinkt er einfach die Überschriften nicht, hat jemand eine Indee woran dies liegen könnte?
Bsp.:
#H2 (1)
1 = TEXT
1.field = header
1.wrap = |
# Verlinkung von Ueberschriften
1.typolink {
parameter.insertData = 1
parameter = {field:header_link}
}