Zum Inhalt springen

csc-firstHeader mit Überschriftenlayouts

Erstellt am 30. Juni 2010 · 19 Antworten · letzte Antwort am 12. Juli 2010

Tags: Frage

Nicole87 ·

Hallo!

Ich habe wieder ein Problem: Ich habe es geschafft, für die Überschriften eines Elementes verschiedene Stile auswählbar zumachen und diese auch schön in h1, h2 und h3 auszugeben.

Leider überschreibe ich so immer das csc-firstHeader, das TYPO3 setzt. Allerdings muss es doch möglich sein, dass mein Layout umgesetzt und das csc-firstHeader eingebunden wird! Außerdem bekommt die erste Überschrift, wenn sie im RTE gesetzt wird, anscheinend auch keine csc-firstHeader-Klasse...

Das würde ich alles gerne ändern, weiß aber nicht wie... Ich hoffe mir kann hier einer der Experten helfen 😉

Der Code, den ich für die Überschriftenlayouts nun in mein Setup eingetragen habe ist dieser:

#Überschriftlayouts
lib.stdheader = CASE
lib.stdheader {
  key.field = header_layout
  #Default/H1 (0)
  default = TEXT
  default.field = header
  default.wrap = <h1>|</h1>
  # Verlinkung von Ueberschriften
  default.typolink {
    parameter.insertData = 1
    parameter = {field:header_link}
  }
  
  #H2(1)
  1 = TEXT
  1.field = header
  1.wrap = <h2>|</h2>
  # Verlinkung von Ueberschriften
  1.typolink {
    parameter.insertData = 1
    parameter = {field:header_link}
  }
  
  #H3(2)
  2 = TEXT
  2.field = header
  2.wrap = <h3>|</h3>
  # Verlinkung von Ueberschriften
  2.typolink {
    parameter.insertData = 1
    parameter = {field:header_link}
  }

}

Bin für jeden Wink echt dankbar! Meldet euch! *smile*

Grüße
Nicole

Nicole87 ·

Ich schubs nochmal, weil ich noch keine Lösung dafür gefunden habe....

Kein TypoScript-Crack da, der mal ein Viertelstündchen investieren mag? *liebschau*

Ich komm einfach nicht weiter... #angry#

Grüße
Nicole

BastianBalthasarBux ·

Tipp 1: guck in das css_styled_content typoscript

Tipp 2:

lib.stdheader.3.10.1 < lib.stdheader.default.10.1
lib.stdheader.3.10.1.fontTag = <h1 class="right" {register:headerStyle}>|</h1>

wobei '3' vom CASE Objekt kommt.

wenn dir das zu wenig hingeworfene Brocken sind, kannst dich ja gern noch mal melden. 😉

BastianBalthasarBux ·

achso, noch hinzuzufügen für deinen anwendungsfall:

das case objekt ist bei mir die colpos. du brauchst also theoretisch lediglich sowas zu schreiben:

lib.stdheader.10.1.fontTag = <h1 {register:headerStyle}>|</h1>
lib.stdheader.10.2.fontTag = <h2 {register:headerStyle}>|</h2>

ganz ohne (eigenes) case objekt etc..., AFAIR.
aber wie gesagt, am besten aufschluss gibt css_styled_content TS.
Aufrufbar am einfachsten via Template Analyzer in deinem (TypoScript) Template-Datensatz und dann ein beherzter klick auf 'EXT:css_styled_content/static/'

Nicole87 ·

Hallo BBB!

Danke für deine Hilfe! 😃

Leider scheine ich sie nicht richtig umsetzen zu können...

#Überschriftlayouts
lib.stdheader = CASE
lib.stdheader {
  key.field = header_layout
  #Default/H1 (0)
  default = TEXT
  default.field = header
  default.fontTag = <h1 {register:headerStyle}>|</h1>
  # Verlinkung
  default.typolink {
    parameter.insertData = 1
    parameter = {field:header_link}
  }

Gibt mir leider nur

<h1 {register:headerStyle}>Willkommen</h1>

aus...

Ich hab das mit der CASE nicht so ganz verstanden und wo nun mein TemplateAnalyzer ist, weiß ich leider nicht... ^^"

Ich habe im typo3/sysext/css_styled_content/static/setup.txt das gefunden:

	# Create class="csc-firstHeader" attribute for <Hx> tags
	3 = LOAD_REGISTER
	3.headerClass = csc-firstHeader
	3.headerClass.if.value=1
	3.headerClass.if.equals.data = cObj:parentRecordNumber
	3.headerClass.noTrimWrap = | id="|"|

Ich weiß nur nicht, wie ich n un damit umgehen soll... :/ sollte ich das nochmal hinter mein Layout-Script schreiben oder wie?

Danke!

Gruß
Nicole

BastianBalthasarBux ·

nö, so wie ich das sehe bist du insofern am falschen dampfer, als es ja schon das case objekt gäbe, für die unterschiedlichen layouts (überschrift 1, überschrift 2, etc.)
hier diese stelle in css_styled_content setup:

581: 10.key.field = header_layout
582: 10.key.ifEmpty = {$content.defaultHeaderType}
583: 10.key.ifEmpty.override.data = register: defaultHeaderType
584:
585: 10.1 = TEXT
586: 10.1.current = 1
587: 10.1.insertData = 1
588: 10.1.fontTag = <h1{register:headerStyle}{register:headerClass}>|</h1>
589:
590: 10.2 < .10.1
591: 10.2.fontTag = <h2{register:headerStyle}{register:headerClass}>|</h2>
592:
593: 10.3 < .10.1
594: 10.3.fontTag = <h3{register:headerStyle}{register:headerClass}>|</h3>
595:
596: 10.4 < .10.1
597: 10.4.fontTag = <h4{register:headerStyle}{register:headerClass}>|</h4>
598:
599: 10.5 < .10.1
600: 10.5.fontTag = <h5{register:headerStyle}{register:headerClass}>|</h5>

(von nem 4.4.0 default)

daran sieht man, eigentlich wär das ja schon gemacht.
genaugenommen brauchst nur css angeben für h1, h2 etc ...

und natürlich diese stile auswählbar machen, die du haben möchtest.

das wieder kannst via page-TS machen:
beispiel für 3 überschriften:

TCEFORM.tt_content.header_layout {
  // header_layout Available types:
  header 1 = 1
  header 2 = 2
  header 3 = 3

  // Default setzen
  setup.defaults = 1
  altLabels.1 = Überschrift 1
  altLabels.2 = Überschrift 2
  altLabels.3 = Überschrift 3
  disableNoMatchingValueElement = 1
  // hier können items entfernt werden
  removeItems = 0,4,5,100
}

so gesehen denkst du vermutlich einfach zu kompliziert. 😉

Nicole87 ·

Morgen!

Ich glaub ich bin einfach zu doof für TypoScript *lol*

Habe nun den oben genannten Code von mir entfernt. In der Layoutauswahl für die Überschrift gibt es "Normal", "Überschrift 2", "Überschrift 3" und "Verborgen". So.

Lass ich also den Code soweit raus, bekomme ich meinen csc-firstHeader ausgegeben - Jippi -, aber die Überschriften nicht so wie ich das will:
Normal = h1
Überschrift 2 = h1
Überschrift 3 = h3

Nachdem ich nun versucht habe, das meinen bedürfnissen anzupassen (das 0. Layout h1, das 1. h2, das 2. h2) bekomme ich:
Normal = h2
Überschrift 2 = h2
Überschrift 3 = h3

Warum das nun so und nicht ist wie ich will, verstehe ich nicht. Ich habe in meinem TS stehen:

header_layout {
		removeItems = 3, 4, 5
		altLabels.0 = Normal
		altLabels.1 = Überschrift 2
		altLabels.2 = Überschrift 3
        }

Und in der Setup.txt steht nun:

# This CASE cObject renders the header content:
	# currentValue is set to the header data, possibly wrapped in link-tags.
	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 = <h2{register:headerStyle}{register:headerClass}>|</h2>

	10.0 < .10.1
	10.0.fontTag = <h1{register:headerStyle}{register:headerClass}>|</h1>

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

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

Habe dort die h-Tags geändert und versucht eine Definition für das nullte Label einzubinden... Klappt wie gesagt nicht...

Noch eine Idee? #paralyzed#

Grüße
Nicole

BastianBalthasarBux ·

Also, dann formulieren wir aus:

das hier kommt in das TSconfig Feld von deiner Root-Seite, und sorgt dafür, dass man im Dropdown des CEs die entsprechenden Einträge auswählen kann:

TCEFORM.tt_content.header_layout {
  // header_layout Available types:
  header 1 = 1
  header 2 = 2
  header 3 = 3
 
  // Default setzen
  setup.defaults = 1
  altLabels.1 = Überschrift 1
  altLabels.2 = Überschrift 2
  altLabels.3 = Überschrift 3
  disableNoMatchingValueElement = 1
  // hier können items entfernt werden
  removeItems = 0,4,5,100
}

Überschrift 1 -> in dieser Konfiguration Standardmässig ausgewählt.

Für das Frontend-Rendering musst du das hier in dein TypoScript Setup des Templates schreiben:

lib.stdheader.10.1.fontTag = <h1 {register:headerStyle}>|</h1>
lib.stdheader.10.2.fontTag = <h2 {register:headerStyle}>|</h2>
lib.stdheader.10.3.fontTag = <h3 {register:headerStyle}>|</h3>

Damit werden die drei Übeschriften dann als h1, h2, und h3 gerendert, was sie aber ja eh schon standardmässig werden, AFAIK

Daher ist eigentlich nur der teil für das TSconfig für dich interessant.

im CSS kannst dann ganz einfach für h1, h2 und h3 die stile vergeben.
Du könntest aber, wenn dir die h1-3 nicht reichen für das css sowas noch machen:

lib.stdheader.10.1.fontTag = <div class="myh1"><h1 {register:headerStyle}>|</h1></div>
lib.stdheader.10.2.fontTag = <div class="myh2"><h2 {register:headerStyle}>|</h2></div>
lib.stdheader.10.3.fontTag = <div class="myh3"><h3 {register:headerStyle}>|</h3></div>

Und bitte: Wenn du TS postest, dann bitte 'alles' -> soll heissen. zumindest die korrekte Objekhierarchie.

mit '10.1.irgendwas' kann kein mensch so wirklich wissen, wo du dich grad befindest in dem multidimensionalen array. 😉 (ja, typoscript ist nichts anderes als ein riesiges multidimensionales php array)

Nicole87 ·

Hallo!

Danke fürs Ausformulieren, aber mein Problem löst das doch trotzdem nicht!?
Wie die "header_layout Available types" funktionieren ist mir nicht wirklich klar. Die Titel der Labels habe ich eingestellt und die überflüssigen Layouts entfernt.
Siehe hier (Template-TS):

TCEFORM.tt_content {
#Überschriftstypen reduzieren und umbenennnen
	header_layout {
		removeItems = 3, 4, 5
		altLabels.0 = Normal
		altLabels.1 = Überschrift 2
		altLabels.2 = Überschrift 3
        }

Jedoch ist bei mir eben nicht
1 = h1
2 = h2
3 = h3
sondern
0 = h1
1 = h2
2 = h3

Wenn ich nun aber folgendes in mein TS aufnehme, wie du gesagt hast, dann ist der csc-firstHeader wieder weg.

lib.stdheader.10.1.fontTag = <h1 {register:headerStyle}>|</h1>
lib.stdheader.10.2.fontTag = <h2 {register:headerStyle}>|</h2>
lib.stdheader.10.3.fontTag = <h3 {register:headerStyle}>|</h3>

Das wäre ja quasi wieder die Ausgangssituation.

Habe gerade mal folgendes versucht:

lib.stdheader.10.1.fontTag = <h1 {register:headerClass}>|</h1>
lib.stdheader.10.2.fontTag = <h2 {register:headerClass}>|</h2>
lib.stdheader.10.3.fontTag = <h3 {register:headerClass}>|</h3>

Jedoch erscheint nun in jeder h1 bei der ich das Layout 0 gewählt habe, die Klasse csc-firstHeader gesetzt.
Das Überschriftenlayout 1 wird nun auch als h1 ausgegeben und Layout 2 als h2. Jedoch sollte 1 h2 und 2 h3 ausgeben... Jedoch sollte es doch so nicht sein - im setup.txt steht ja:

# Content header:
lib.stdheader = COA
lib.stdheader {

	# Create align style-attribute for <Hx> tags
	2 = LOAD_REGISTER
	2.headerStyle.field = header_position
	2.headerStyle.required = 1
	2.headerStyle.noTrimWrap = | style="text-align:|;"|

	# Create class="csc-firstHeader" attribute for <Hx> tags
	3 = LOAD_REGISTER
	3.headerClass = csc-firstHeader
	3.headerClass.if.value=1
	3.headerClass.if.equals.data = cObj:parentRecordNumber
	3.headerClass.noTrimWrap = | class="|"|

	# Date format:
	5 = TEXT
	5.field = date
	5.if.isTrue.field = date
	5.strftime = %x
	5.wrap = <p class="csc-header-date">|</p>
	5.prefixComment = 2 | Header date:

	# This CASE cObject renders the header content:
	# currentValue is set to the header data, possibly wrapped in link-tags.
	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>

	# Pops the used registers off the stack:
	98 = RESTORE_REGISTER
	99 = RESTORE_REGISTER

	# Post-processing:
	stdWrap.fieldRequired = header
	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.xml:eIcon.header

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

Hab ich jetz irgendwie ein Brett vorm Kopf, oder wie?#angry#

Gruß
Nicole

BastianBalthasarBux ·

hmm, jetzt glaub ich, ich verstehe dich nicht ganz richtig.

Also, du willst für die Überschrift 3 (in Worten drei) verschiedene Stile auswählbar machen für den Redakteur? Korrekt?

Genau genommen brauchst du dafür (vorausgesetzt du verwendest css_styled_content) lediglich das Schnipsel für das Page-TSconfig, um alles andere auszublenden. Der Rest ist ja schon da.
Und im CSS kannst du dann einfach via h1, h2, h3 die Stile vergeben.
Wenn du sicher gehen willst, dann kannst ja noch nen selector für das csc setzen, dass davon nur csc - überschriften betroffen sind. AFAIR wäre das dann etwa so:

div.csc-header h1 { font-size:200px;font-weight:bold;color:fuchsia; }
div.csc-header h2 { font-size:150px;font-weight:bold;color:green; }
div.csc-header h3 { font-size:200px;font-weight:bold;color:blue; }

aber vielleicht hab ich dich auch völlig falsch verstanden ...

und btw, wozu brauchst du eigentlich das csc-first-header?

Nicole87 ·

Puuuuh, okay ich fang nochmal von vorn an *s*

Ich möchte verschiedene Layouts für die Überschrift eines Elementes haben.
Es sollen insgesamt 4 Auswahlmöhlichkeiten vorhanden sein: h1, h2, h3 und verborgen
Ich habe meine Auswahl nun auf die vier Möglichkeiten begrenzt. Sie heißen im Backend "Normal", "Überschrift 2", "Überschrift 3" und "Verborgen".
Je nach ausgewähltem Layout soll ein anderer Headline-Tag um die Eingabe gelegt werden: Normal = h1, Überschrift 2 = h2, Überschrift 3 = h3, Verborgen = egal, da im CSS ausgeblendet.
Die CSS-Formatierung für die h-Tags ist zur Lösung des Problemes irrelevant.

Jedoch hat die allererste Überschrift der Seite andere Abstände als normal - egal welches Format/Layout gewählt wird.
Ich möchte darum die Klasse csc-firstHeader benutzen, da so die Formatierung der ersten Überschrift so für alle am einfachsten ist.

Im Moment ist die Darstellung jedoch nicht entsprechend:
* Jede Überschrift, bei der das Layout "Normal" ausgewählt ist, hat nun die Klasse csc-firstHeader.[<h1 class="csc-firstHeader">Text</h1>]
* Überschriften des Layouts "Überschrift 2" werden nicht mit h2 gewrappt [<h1>Text</h1>]
* auch Überschriften des Layouts "Überschrift 3" werden nicht mit h3 dargestellt [<h2>Text</h2>]

Ist nun alles wieder klarer, BBB? Du bist meine einzige Hoffnung! 😢

Grüße
Nicole

BastianBalthasarBux ·

dann sollte AFAICS das hier im pageTSconfig völlig ausreichen:

TCEFORM.tt_content.header_layout {
  // header_layout Available types:
  header 0 = 0
  header 1 = 1
  header 2 = 2
  header 3 = 3
 
  // Default setzen
  setup.defaults = 0
  altLabels.1 = Überschrift 2
  altLabels.2 = Überschrift 3
  altLabels.3 = Verborgen
  disableNoMatchingValueElement = 1
  // hier können items entfernt werden
  removeItems = 4,5,100
}

der rest kann aus dem setup gestrichen werden, weil das ja alles schon gemacht ist im csc

* edit -> die labels korrigiert, weil sonst verwirrend. 😉

Nicole87 ·

Sorry, ich glaub das hast du schon drei mal geschickt, aber ich hab schon 80% davon in meinem TS und auch wenn ich es nun komplett übernehme ändert sich rein gar nichts.

TCEFORM.tt_content {
#Überschriftstypen reduzieren und umbenennnen
	header_layout {
		removeItems = 3, 4, 5
		altLabels.0 = Normal
		altLabels.1 = Überschrift 2
		altLabels.2 = Überschrift 3
		header 0 = 0
  		header 1 = 1
  		header 2 = 2
  		header 3 = 3
  		disableNoMatchingValueElement = 1
		setup.defaults = 0
        }
}

Ausgabe:
Normal = h1.csc-firstHeader
Überschrift 2 = h1
Überschrift 3 = h2

Leider nicht die gewünschte Ausgabe. Chache hab ich auch geleert....

Gruß
Nicole

BastianBalthasarBux ·

probiers mal so:

hau mal die "1er" raus, also so:

TCEFORM.tt_content.header_layout {
  // header_layout Available types:
  header 0 = 0
  header 2 = 2
  header 3 = 3
  header 4 = 4
 
  // Default setzen
  setup.defaults = 0
  altLabels.2 = Überschrift 2
  altLabels.3 = Überschrift 3
  altLabels.4 = Verborgen
  disableNoMatchingValueElement = 1
  // hier können items entfernt werden
  removeItems = 1,5,100
}

-> dann sollte es sein:
0 - h1
2 - h2
3 - h3
4 - verborgen

Nicole87 ·

Hi!

Das hat keinerlei Auswirkungen...

Gehört ja schon ins TS vom Template,oder?! 🙁

Gruß
Nicole

BastianBalthasarBux ·

óchi, wie der grieche zu sagen pflegt.

das gehört ins pageTSconfig.

lass die finger von ... 😉

im ernst: am setup vom csc solltest du eigentlich nix machen müssen.
die elemente sind ja da, dir geht's ja nur um die verfügbarkeit und benennung im BE.

Edit: genau genommen sagt der grieche '&#927;&#967;&#953;, klingt aber wie Óchi 😉

Edit 2: das forum kann kein griechisch. *lol*

test:

'&#927;&#967;&#953;

zefix! nicht amal óchi sagen kann man mehr 😉

Nicole87 ·

Hm. Also Im Page TS:

TCEFORM.tt_content {
#Überschriftstypen reduzieren und umbenennnen
	header_layout {
		removeItems = 3, 4, 5
		altLabels.0 = Normal
		altLabels.1 = Überschrift 2
		altLabels.2 = Überschrift 3
		disableNoMatchingValueElement = 1
		setup.defaults = 0
  		header 0 = 0
  		header 1 = 1
  		header 2 = 2
  		header 3 = 3
        }}

Hatten wir auch schon öfters und bringt noch immer nichts... :S

BastianBalthasarBux ·

removeItems = 1,5,100

und: altLabels.1 = Überschrift 2
wird zu
altLabels.2 = Überschrift 2

und
altLabels.2 = Überschrift 3

wird zu

altLabels.3 = Überschrift 3

genaugenommen könntest einfach den coden von meinem letzten beitrag einfach copy-pasten.
das hab ich ja genauestens an deine vorgaben angepasst. 😉

Nicole87 ·

Ich dachte, ich hätte schon geantwortet... Hm, komisch... oO"

Naja, aber trotzdem: ich hab deinen Code, den du mir ja schon mehrmals serviert hast 😉, nun auch mal komplett kopiert und, ich weiß ich wiederhole mich, aber es ist so, es ändert nichts!

Layout für die H1 ist h1, Layout für h2 ist in h1 und das Layout für h3 ist in h2.

Ich verstehs nicht...

BastianBalthasarBux ·

der code den ich serviert habe ist immer mal wieder abgeändert worden von mir.

egal: ich werde den code die tage mal kurz testen, dann sehen wir weiter. 😉