[TYPO3-german] Pages -Layout nutzen

Stefan Padberg post at bergische-webschmiede.de
Tue Sep 2 11:43:23 CEST 2014


Ja, völlig klar. Ich hab das grade schnell "aus der la main" 
geschüttelt, wie man im Rheinland sagt. Deine Lösung ist eleganter.

Gruß
Stefan

Am 02.09.2014 um 11:05 schrieb Chris Wolff - AERTiCKET AG:
> 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
>


-- 
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