Add custom section frames to typo3

Every typo3 content element has a default frame that gets rendered as a wrapping div with the class "csc-default". You can select this frame in the "Appearance" tab in the typo3 backend.
Typo3 default frames

You can easily add own frames to your page.

First you have to add your new frames in the TSconfig of your page:

TCEFORM.tt_content.section_frame {
   addItems.100 = Custom Frame 1
   addItems.200 = Another Frame

Now you can select the two new frames from the dropdown in the apperance tab:
Typo3 custom frames

To wrap your content element with something custom, we need some typoscript

tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame
  100 = TEXT
  100.value = <div class="custom_class">|</div>

  200 = TEXT
  200.value = <div class="another_custom_class">|</div>

Now your content elements get custom wrapper divs with your own html code and css classes.

comments powered by Disqus