Add additional heading types

css_styled_content (TYPO3 4.x, 6.x, 7.x)

Five heading types are predefined by default. Additional headline types for the editor can be added by completing the setup as follows:

lib.stdheader.10 {
    6 = TEXT
    6.current = 1
    6.insertData = 1
    6.fontTag = <h3 class="variant1">|</h3>
    7 = TEXT
    7.current = 1
    7.insertData = 1
    7.fontTag = <h4 class="variante2">|</h4>
}

The fields must then be made visible and named in the TSconfig page:

TCEFORM.tt_content.header_layout {
    addItems.6 = Name1
    addItems.7 = Name2 
}

fluid_styled_content (from TYPO3 7.6)

First, another partialRootPath must be created and stored in the TypoScript setup. The number 30 in the code example is freely chosen. A number greater than 10 should be used.

The first code block refers to TYPO3 7 LTS, the second to TYPO3 8 LTS, here the name of the object has changed.

## For TYPO3 7 LTS
lib.fluidContent {
    partialRootPaths {
        30 = fileadmin/ext/fluid_styled_content/Resources/Private/Partials/
    }
}

## For TYPO3 8 LTS
lib.contentElement {
    partialRootPaths {
        30 = fileadmin/ext/fluid_styled_content/Resources/Private/Partials/
    }
}

The Header folder must now be created in the stored path. The file
typo3/sysext/fluid_styled_content/Resources/Private/Partials/Header/Header.html
is then copied to the Header folder.

New headers can now be created in the Header.html file by adding a new case:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:switch expression="{layout}">
  <f:case value="1">
    <h1><f:link.typolink parameter="{link}">{header}</f:link.typolink></h1>
  </f:case>
  ...
  <f:case value="7">
    <h3 class="variant1"><f:link.typolink parameter="{link}">{header}</f:link.typolink></h3>
  </f:case>
  <f:case value="100">
    <f:comment> -- do not show header -- </f:comment>
  </f:case>
  <f:case default="true">
    <f:if condition="{default}">
      <f:render partial="Header/Header" arguments="{
        header: header,
        layout: default,
        link: link}" />
    </f:if>
  </f:case>
</f:switch>
</html>

The fields are then named and made visible in the TSconfig page:

TCEFORM.tt_content.header_layout {
      addItems.7 = New header
}

This page contains automatically translated content.

Updated: 09.04.2025