[TYPO3-german] Pages -Layout nutzen
Stefan Padberg
post at bergische-webschmiede.de
Tue Sep 2 10:52:56 CEST 2014
Hallo Marco,
es handelt sich ja um eine Layout-Variante für eine Seite. Deshalb
reicht es, wenn man sich diese Variante als CSS-Klasse ins body-Tag
holt. Das mache standardmäßig ich so:
[page|layout = 1]
page.bodyTagCObject = COA
page.bodyTagCObject.wrap = <body|>
# page id einbauen
# ist manchmal ganz nett, wenn man auf einer einzelnen Seite eine
# Ausnahme definieren möchte
page.bodyTagCObject.10 = TEXT
page.bodyTagCObject.10.field = uid
page.bodyTagCObject.10.stdWrap.noTrimWrap = | id="p-|"|
# class string
page.bodyTagCObject.20 = COA
page.bodyTagCObject.20.stdWrap.noTrimWrap = | class="|"|
# und dann das layout:
[page|layout = 1]
page.bodyTagCObject.20.10 = TEXT
page.bodyTagCObject.20.10 {
stdWrap.noTrimWrap = |layout1| |
}
[end]
# und weils so schön ist, gleich noch das backendlayout ausgeben lassen
[page|backend_layout = 1]
page.bodyTagCObject.20.20 = TEXT
page.bodyTagCObject.20.20 {
stdWrap.noTrimWrap = |backendlayout1| |
}
[end]
Sowas in der Art würde ich empfehlen. Damit kannst du dein CSS dann
sauber strukturieren.
Wenn du Layout-Varianten für einzelne Inhaltselemente benötigst, musst
du die bei den einzelnen Inhaltselementen anlegen. Das ist etwas
komplizierter, geht aber nach dem ähnlichen Muster. Erst TCEFORM
anpassen und dann tt_content entsprechend anpassen.
Beste Grüße
Stefan
Am 02.09.2014 um 10:38 schrieb Marco Brüggemann:
> Hallo,
>
> Ich habe für meine Webseite Backend-Layouts angelegt und nutze diese
> auch erfolgreich:
>
> Frage:
> Mache ich im Backend einen Rechtsklick auf die Seite in der mein Content
> steht, dann kann ich im Kontextmenü den Punkt "Bearbeiten" auswählen und
> dort dann unter dem "Reiter: Erscheinungsbild" mit mein Backend-Layout
> auswählen.
>
> Über dieser "Backend-Layout-Auswahlgeschichte" gibt es noch den Punkt:
> "Frontend-Layout"
>
> Hat dieser Punkt etwas mit den Backendlayouts etwas zu tun?
>
> Ich möchte mit diesem Frontend-Layout vor allem die Hintergrundfarbe der
> Seite verändern:
>
> angelegt habe ich diese Farben:
>
> TCEFORM.pages.layout {
> addItems {
> 4 = test1
> 5 = test2
> 6 = test3
> 7 = test4
> 8 = test5
> }
> altLabels {
> 0 = kein hg
> 1 = HG: weiss
> 2 = HG: 50%-weiß
> 3 = HG: grau50
> 4 = HG: 50%-grau50
> 5 = HG: schw
> 6 = HG: 50%-schw
> 7 = HG: orange
> 8 = HG: 50%-orange
> }
> }
>
> für das erste Backendlayout habe ich dann diese Seitenkonstruktion im
> "TS-Setup":
>
> # Die Seite wird zusammengebaut
>
> tmp.pagebuild = COA
> tmp.pagebuild {
> wrap = | <div class="clear"> </div>
>
> 10 < tmp.headerbuild
> 20 < tmp.mainmenubuild
>
> # der Contentbereich mit Fallunterscheidung je nach dem welches
> Backend-Layout eingestellt ist
> 50 = CASE
> 50 {
> key.field = backend_layout
>
> # ---------------- Layout 1
> 1 = COA
> 1 {
> wrap = <section class="content"> | </section>
>
> 10 = COA
> 10 {
> 10 >
> 10 < styles.content.getContent01
> 10 {
> stdWrap.required = 1
> stdWrap.wrap = <section
> class="contentarea1_default"><div class="box pagelayout-{field:layout}">
> | <div class="clear"> </div></div></section>
> insertData = 1
> }
> }
> 20 = COA
> 20 {
> 10 >
> 10 < styles.content.getContent02
> 10 {
> stdWrap.required = 1
> stdWrap.wrap = <section
> class="contentarea2_default"><div class="box pagelayout-{field:layout}">
> | <div class="clear"> </div></div></section>
> insertData = 1
> }
> }
> 30 = COA
> 30 {
> 10 >
> 10 < styles.content.getContent03
> 10 {
> stdWrap.required = 1
> stdWrap.wrap = <section
> class="contentarea3_default"><div class="box pagelayout-{field:layout}">
> | <div class="clear"> </div></div></section>
> insertData = 1
> }
> }
> 40 = COA
> 40 {
> 10 >
> 10 < styles.content.getContent04
> 10 {
> stdWrap.required = 1
> stdWrap.wrap = <section
> class="contentarea4_default"><div class="box pagelayout-{field:layout}">
> | <div class="clear"> </div></div></section>
> insertData = 1
> }
> }
> } # Ende Layout 1
>
> [...]
>
> wie ihr vielleicht sehen könnt. versuche ich der DIV-Box <div
> class="box"> irgendwie das TCEFORM.pages.layout als css-Klasse zu geben.
>
> leider funktioniert es aber nicht mit
> <div class="box pagelayout-{field:layout}">
> [...]
> insertData = 1
>
> könnt Ihr mir helfen, damit ich dort diese Klasse eingeben kann?
>
> Vielen Dank und einen schönen Tag für euch,
> Marco
>
--
Bergische Webschmiede
Typo3 Dienstleistungen
:: Dipl.-Ing. Stefan Padberg
:: www.bergische-webschmiede.de
---
Diese E-Mail ist frei von Viren und Malware, denn der avast! Antivirus Schutz ist aktiv.
http://www.avast.com
More information about the TYPO3-german
mailing list