[TYPO3-german] Pages -Layout nutzen
Chris Wolff - AERTiCKET AG
cwolff at aer.de
Tue Sep 2 11:05:37 CEST 2014
Hi Stefan,
grundsätzlich ist die Idee mit dem Page Layout gut.
Ich würde nur nicht empfehlen es mittels condition zu machen.
Bei mir sieht der code ungefähr so aus:
bodyTagCObject = COA
bodyTagCObject {
stdWrap.noTrimWrap = |<body |>|
# Page id das bodytag id
10 = TEXT
10.value = id="page-{TSFE:id}"
10.insertData = 1
10.noTrimWrap = || |
# body class
20 = COA
20 {
wrap = class="|"
# remove last space
trim = 1
# add a Layout Class
10 = TEXT
10 {
intval = 1
# append a Space for other Classes
data = page:layout
noTrimWrap = |layout-| |
}
# Language Class
20 < .10
20.data = GP:L
20.noTrimWrap = | lang-| |
}
}
Ich binde ausserdem gerne noch eine "lang-" classe ein damit kann ich z.b CSS hintergründe auch sprach gesteuert machen.
Gruss chris
-----Ursprüngliche Nachricht-----
Von: typo3-german-bounces at lists.typo3.org [mailto:typo3-german-bounces at lists.typo3.org] Im Auftrag von Stefan Padberg
Gesendet: Dienstag, 2. September 2014 10:53
An: typo3-german at lists.typo3.org
Betreff: Re: [TYPO3-german] Pages -Layout nutzen
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
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
More information about the TYPO3-german
mailing list