“Indentation and Frames” for TYPO3 content elements

TYPO3 content elements yield a setting called “Indentation and Frames” (or simply ”Frame” in older TYPO3 versions) that is often ignored. It can be used to add custom CSS classes to content elements, or even wrap them in a nested custom tag structure. Here is how to use it…

The defaults

By default the “Frame” dropdown box of any standard CE is prepopulated with a number of choices. Each of these choices wraps the CE with a div tag, most of them using a certain CSS class and all of them with a tag id that contains the UID number of the CE:

1. Default Frame:
   <div id=”[CE_UID]“ class=”csc-default”>|</div>
2. Invisible:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-invisible”>|</div>
3. Ruler before:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-rulerBefore”>|</div>
4. Ruler after:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-rulerAfter”>|</div>
5. Indent:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-indent”>|</div>
6. Indent 33/66%:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-indent3366″>|</div>
7. Indent 66/33%:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-indent6633″>|</div>
8. Frame 1:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-frame1″>|</div>
9. Frame 2:
   <div id=”[CE_UID]” class=”csc-frame csc-frame-frame2″>|</div>
10. No Frame:
    <div id=”[CE_UID]“>|</div>

You can simply use these default classes by (re-)defining them in your own CSS definitions.

Removing dropdown choices

The 10 default choices may confuse your editors – especially when there are no CSS definitions for them, so they are actually useless. Remove all but the “Default Frame” item in TS-Config like this:

TCEFORM.tt_content.section_frame.removeItems = 1,5,6,10,11,12,20,21,66

Each of the numbers listed corresponds to the an entry in the list above. 1 = Invisible, 5 = Ruler before, 6 = Ruler after,… , 21 = Frame 2, 66 = No Frame

Adding dropdown choices

To add additional frame choices you have to add code to TS-Config, TS-Setup and CSS:

TS-Config:

TCEFORM.tt_content.section_frame {
  addItems.100 = Light background
  addItems.110 = Red outline
}

TS-Setup:

tt_content.stdWrap.innerWrap.cObject {
  100 < tt_content.stdWrap.innerWrap.cObject.default
  100.15.value = light-bgrnd
  110 < tt_content.stdWrap.innerWrap.cObject.default
  110.15.value = red-outline
}

CSS:

.light-bgrnd{
  background: #ccc;
}
.red-outline{
  border: 1px solid red;
}

But you could also completely change the wrapping of the CE like this…
TS-Setup:

tt_content.stdWrap.innerWrap.cObject {
  100 = TEXT
  100.value = <div id="MyOwnDivID">|</div>
}

But be aware that the latter TS will stopp other CE settings from working (like the Before and After distance entries). To really understand what you are doing, have a look into TS-Object-Browser to see how tt_content.stdWrap.innerWrap.cObject is structured and how you might modify it without losing features.