[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">&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

_______________________________________________
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