Additional headers in fluid_styled_content

Add your own partialRootPath

This tutorial is for TYPO3 8 LTS and later. For TYPO3 7 LTS you need to replace lib.contentElement with lib.fluidContent.

First we need to add  (Web > Template > Setup) a custom partialRootPath:

 

lib.contentElement {
  partialRootPaths {
    30 = EXT:myext/Resources/Private/Extensions/fluid_styled_content/Partials/
  }
}

Add new header types

Navigate to this folder (create if not existing):

 

typo3conf/myext/Resources/Private/Extensions/fluid_styled_content/Partials/Header

 

Now we copy the Header.html from typo3/sysext/fluid_styled_content/Resources/Private/Partials/Header/ into this folder. This wil serve as basic and contains the default headers.

Just add a new case to create a new header type:

 

<f:case value="7">
  <h3 class="myNewHeader"><f:link.typolink parameter="{link}">{header}</f:link.typolink></h3>
</f:case>

 

Enough fluid. Now we need to add some page TSconfig (Right click on your page in page tree › Edit › Resources) to add the header type to the backend: 

 

TCEFORM.tt_content.header_layout {     
  addItems.7 = My new header
}

 

Save, clear caches and then you are ready to use your new header!

Remove header types

We can remove header types we don´t need for our website. Often the h1 header will be removed (hidden) because the template already renders a h1.

In TYPO3 6, 7 and 8 we have the following headers per default:

 

List (ID = name): 0 = default, 1 = Layout 1, 2 = Layout 2, 3 = Layout 3, 4= Layout 4, 5 = Layout 5, 100 = Hidden

 

If you want to remove layout 1 and layout 4 this would be your code:

 

TCEFORM.tt_content.header_layout {
 removeItems = 1, 4 
}

 

1, 4 are the IDs of those header types (as shown in list)

Example

Template setup:

 

lib.contentElement {
  partialRootPaths {
    30 = EXT:myext/Resources/Private/Extensions/fluid_styled_content/Partials/Header
  }
}

 

Page TSconfig:

 

TCEFORM.tt_content.header_layout {      
  addItems.7 = My new header
}

 

Header.html:

 

<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="2">
      <h2>
        <f:link.typolink parameter="{link}">{header}</f:link.typolink>
      </h2>
    </f:case>
    <f:case value="3">
      <h3>
        <f:link.typolink parameter="{link}">{header}</f:link.typolink>
      </h3>
    </f:case>
    <f:case value="4">
      <h4>
        <f:link.typolink parameter="{link}">{header}</f:link.typolink>
      </h4>
    </f:case>
    <f:case value="5">
      <h5>
        <f:link.typolink parameter="{link}">{header}</f:link.typolink>
      </h5>
    </f:case>
    <f:case value="6">
      <h6>
        <f:link.typolink parameter="{link}">{header}</f:link.typolink>
      </h6>
    </f:case>
    <f:case value="7">
      <h3 class="myNewHeader">
        <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>