Photo of Torben Hansen

A TechBlog by Torben Hansen

Freelance Full Stack Web Developer located in Germany.
I create web applications mainly using TYPO3, PHP, Python and JavaScript.
Home Archive Tags

How to use content element layouts with gridelements

I often use the content element layout field in TYPO3 to add some selective CSS styling to content elements. For example, if the editor inserts a divider content element on a TYPO3 page, she/he can adjust the color of the divider by using the content element layout field like shown below.

I just define the available layouts in the page TS of the root page.

TCEFORM.tt_content.layout {
addItems.60 = Color: Brown
addItems.61 = Color: Gray

Then I use the following Typoscript to add an extra css class to the divider (e.g. brown and gray).

temp < tt_content.div
tt_content.div = CASE
tt_content.div {
key.field = layout
default < temp

60 = COA
60 < temp
60.wrap = <div class="divider brown">|</div>

61 = COA
61 < temp
61.wrap = <div class="divider gray">|</div>

Normally I globally use the defined content element layouts on other content elements too (e.g. headers), so the editor always uses the same field in TYPO3 to change the colors of content elements. You can also use the shown technique with gridelements, so the user can change the css styling of the gridelement without the need to use a flexform configuration. I just reuse the previously defined content element layout in the Typoscript of my gridelement as shown below by using a CASE on the wrap.

# ID of gridelement
1 < lib.gridelements.defaultGridSetup
1 {
columns {
# column 1
0 < .default
0.wrap = <div class="column1">|</div>

# column 2
1 < .default
1.wrap = <div class="column2">|</div>
wrap.cObject = CASE
wrap.cObject {
key.field = layout
default = TEXT
default.value = <div class="mydefaultclass">|</div>

60 = TEXT
60.value = <div class="mydefaultclass brown">|</div>

61 = TEXT
61.value = <div class="mydefaultclass gray">|</div>

Now the gridelement uses the TYPO3 content layout field to add an extra CSS class to its wrap.