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