Create flexible multi-column content with frames

The frames offer an easy way to create multi-column layouts with "css_styled_content". Any content elements can be inserted into these frames.

In general, each content element is enclosed by a div element. By default, these divs have the class csc-default. If a frame is selected, this class is replaced by another. This can be adapted and extended.

Here is an example of 2-column content elements within single-column content. The section that is defined by css-styled-content and in which you can make additions is shown.

tt_content.stdWrap {
...
 innerWrap.cObject = CASE
 innerWrap.cObject {
 key.field = section_frame
...
 ##left section, does not need to be adjusted
 20 =< tt_content.stdWrap.innerWrap.cObject.default
 ##CSS class for frame 1
 20.15.value = csc-frame csc-frame-frame1

 ##right area, with customization
 21 =< tt_content.stdWrap.innerWrap.cObject.default
 ##CSS class for frame 1
 21.15.value = csc-frame csc-frame-frame2
 ## right area with final clearer
 21.30.value = >|</div><div class="clearer"> </div>

 ##optional, new frame definition
 30 =< tt_content.stdWrap.innerWrap.cObject.default
 30.15.value = mycss class
 }
...
}

CSS definition for this:

##distance between the two elements
div.csc-frame-frame2 { 
margin-left: 30px;
}
div.csc-frame-frame1, div.csc-frame-frame2 { 
margin-bottom: 20px;
width: 210px;
float: left;
}
.clearer {
clear: both;
display: block;
height: 1px;
margin-bottom: -1px;
font-size: 1px;
line-height: 1px;
}

So that the editor knows what to select, you can rename the frames in PageTSconfig and remove frames that are not required:

TCEFORM.tt_content.section_frame { 
 altLabels {
 21 = Right box
 20 = Left box
 }
 addItems.30 = additional box
 removeItems=1,10,11,12
}