Das Layout Feld in der Tabelle pages bzw das feld header_layout in der Tabelle tt_content kann verwendet werden um verschiedene Designvorlagen für die content Elemente bzw den Seiten zur Verfügung zu stellen.

Als erstes ein Beispiel wie man die Auswahlmöglichkeit dieser Felder im Backend anpasst.

Dazu reicht es, folgendes Typoscript in das Page TSConfig zu gebene:

# Inhalt der Layout Select box bei seiten
TCEFORM.pages {
  layout.altLabels.2 = 3 Spalten
  layout.altLabels.1 = 2 Spalten
  layout.altLabels.0 = Normal (1 Spalte)
}

# Inhalt der Typ Select box bei content Elementen
TCEFORM.tt_content {
  header_layout.altLabels.2 = Grauer Hintergrund
  header_layout.altLabels.1 = Gruener Hintergrund
  header_layout.altLabels.0 = Normal(weis)
}

Durch dieses Snippet kann man jetzt bei Seiten und Inhaltselementen jeweils 3 verschiedenene Designvorlagen auswählen.

Nun muss man noch im Typoscript Setup die Layouts definieren, für die Seiten funktioniert das z.B. so:

[globalVar=TSFE:page|layout=1] 
page.10.template.file= fileadmin/templates/template_2spalten.html
[global]

[globalVar=TSFE:page|layout=2] 
page.10.template.file= fileadmin/templates/template_3spalten.html
[global]

In diesem Beispiel wird das html Template einfach je nach Layout Auswahl geändert.

Natürlich könnte man auch die css Datei je nach ausgewähltem Layout ändern:

[globalVar=TSFE:page|layout=1] 
page.includeCSS.layout= fileadmin/templates/style_2.css
[global]

[globalVar=TSFE:page|layout=2] 
page.includeCSS.layout= fileadmin/templates/style_3.css
[global]

Das Layout für die Inhaltselmente wird wie folgt definiert:

page.10=TEMPLATE
page.10{
  template = FILE
    # einbinden des templates (html datei mit marker)
  template.file = fileadmin/templates/template.html
    # subpart auf den gearbeitet wird
  workOnSubpart = DOCUMENT
  subparts{
    CONTENT<styles.content.get
    CONTENT.renderObj.stdWrap.innerWrap.cObject=CASE
    CONTENT.renderObj.stdWrap.innerWrap.cObject{
      key.field = header_layout
      default=TEXT
      default.value=<div class="weis">|</div>
      1=TEXT
      1.value=<div class="gruen">|</div>
      2=TEXT
      2.value=<div class="grau">|</div>
    }
  }
}

Comments

Kurt, 02-07-11 08:59:

---

Das ganze funktioniert gut, bis auf eine Sache:
TCEFORM.tt_content.header_layout.altLabels.2 = Grauer Hintergrund
Das gilt für Überschriften (header). Stattdessen muss es so heissen:
TCEFORM.tt_content.layout.altLabels.2 = Grauer Hintergrund
Also ohne header...

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *