The layout field in defined the pages table and the field header_layout defined in the tt_content table can be used to provide different templates for content elements and pages.

The first example shows how to customize the contents of the layout/header_layout field in the backend.

Following typoscript has to be put in the page TSConfig:

# Content of the layout select box for pages
TCEFORM.pages {
  layout.altLabels.2 = 3 columns
  layout.altLabels.1 = 2 columns
  layout.altLabels.0 = Normal (1 column)
}

# Content of the layout select box for content elments
TCEFORM.tt_content {
  header_layout.altLabels.2 = Grey background
  header_layout.altLabels.1 = Green background
  header_layout.altLabels.0 = Normal(white)
}

Thanks to this snippet you can select 3 different designs for pages and content elments.

Now the typoscript setup for the new layouts has to be done:

For pages it works like that:

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

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

In this example the html template is switched depending on the selected layout.

Certainly we could also change the css file depending on the layout:

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

The layout for the content elements is defined this way:

page.10=TEMPLATE
page.10{
  template = FILE
    # include the template (html file with subparts)
  template.file = fileadmin/templates/template.html
    # subpart on wich we work
  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="white">|</div>
      1=TEXT
      1.value=<div class="green">|</div>
      2=TEXT
      2.value=<div class="grey">|</div>
    }
  }
}

Comments

Corvinus, 19-06-07 14:44:

---

Great info, thanks!
But what to do if I'd like more than 4 Layout presets? Must be very simple, and undocumented,as usual...

thanks in advance

Corvinus

Corvinus, 19-06-07 14:45:

---

What about ENCRYPTING my EMAIL ADDRESS ON THIS SITE?

Helmuth, 20-06-07 10:34:

---

Hi,
We will put in that feature, when we relaunch the site.
There is no need that you fill, the email field.
For now i changed your email to the same email as in your last post.

peter, 22-01-08 18:36:

---

Can I use the layout field of the Table tt_content? For example to make a different wrapper for a Text element.

Marcus, 10-01-09 11:40:

---

Corvinus, it IS documented as usual. You can use in TSconfig, to add or remove positions:

TCEFORM.pages.layout.addItems
TCEFORM.pages.layout.removeItems

As described in TSconfig Quick reference - click on the icon with TS book beside the TSconfig field and go to:
TCEFORM.[tablename].[field].types.[type]

interesting, 11-04-11 00:20:

---

How to use it with Autoparser?

rodica, 20-10-11 10:40:

---

Hi,
QUESTION
Here, the hole content is wrapped:
default.value=<div class="white">|</div>

How to set the layout separately for header/bodytext/image?

THANKS! :)

Constantine, 24-11-11 00:00:

---

rodica, it's in documenation:
http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.5.1/view/1/7/



styles.content.getLeft.renderObj.stdWrap.innerWrap.cObject=CASE
styles.content.getLeft.renderObj.stdWrap.innerWrap.cObject {
key.field = layout

// Next line is what you need, I use this part for image only
if.isTrue.field = image

default=TEXT
default.value=AAA|BBB
1=TEXT
1.value=111|222
3=TEXT
3.value=CCC|DDD
10=TEXT
10.value=EEE|FFF
}

Add comment

* - required field

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

*

Content: *