[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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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