To customize an existing template in TYPO3 based on the Introduction Package, it is usually sufficient to work within the \typo3conf\ext\bootstrap_package\Resources\Private\Templates\Page\ directory. For example, to customize the three-column template, you can modify the file \typo3conf\ext\bootstrap_package\Resources\Private\Templates\Page\Default3Columns.html. However, if you want the option to add additional row structures above or below the existing three-column layout, this needs to be configured in the backend layouts.
For example, if you want to give editors the option to add a full-width block above the three-column content in the backend, you need to modify the following file:
\typo3conf\ext\bootstrap_package\Configuration\PageTS\Mod\WebLayout\BackendLayouts\default_3_columns.txt
Change the following section:
rowCount = 2
rows {
1 {
columns {
1 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.left
colPos = 1
colspan = 1
}
2 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.normal
colPos = 0
colspan = 4
}
3 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.right
colPos = 2
colspan = 1
}
}
}
2 {
columns {
1 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.footer1
colPos = 10
colspan = 2
}
2 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.footer2
colPos = 11
colspan = 2
}
3 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.footer3
colPos = 12
colspan = 2
}
}
}
}
zu 3 Zeilen, so zu beispielsweise:
rowCount = 3
rows {
1 {
columns {
1 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.top
colPos = 20
colspan = 6
}
}
}
2 {
columns {
1 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.left
colPos = 1
colspan = 1
}
2 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.normal
colPos = 0
colspan = 4
}
3 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.right
colPos = 2
colspan = 1
}
}
}
3 {
columns {
1 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.footer1
colPos = 10
colspan = 2
}
2 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.footer2
colPos = 11
colspan = 2
}
3 {
name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.footer3
colPos = 12
colspan = 2
}
}
}
}
Please note: Do not keep the old file under a slightly modified name (e.g. default_3_columnsBACKUP.txt or something similar), as TYPO3 will still take it into account, which can interfere with the process. In other words: Increase the rowCount from 2 to 3 and add another row before the existing rows with its own colPos (which will then be used in the above-mentioned file \typo3conf\ext\bootstrap_package\Resources\Private\Templates\Page\Default3Columns.html) and colspan 6 (so the row spans the entire width). Since we have now named the position "top" and specified name = LLL:EXT:bootstrap_package/Resources/Private/Language/Backend.xlf:backend_layout.column.top, we also need to modify the translations. First, we add the new position to
\typo3conf\ext\bootstrap_package\Resources\Private\Language\Backend.xlf
as follows:
<trans-unit id="backend_layout.column.top">
<source>Top</source>
</trans-unit>
We then also add it for the respective language (in this case, German) in
\typo3conf\l10n\de\bootstrap_package\Resources\Private\Language\de.Backend.xml
with:
<label index="backend_layout.column.top">Oben</label>
and in
\typo3conf\l10n\de\bootstrap_package\Resources\Private\Language\de.Backend.xlf
with:
<trans-unit id="backend_layout.column.top" approved="yes">
<source>Top</source>
<target state="translated">Oben</target></trans-unit>
We can now use the newly created position in the above-mentioned \typo3conf\ext\bootstrap_package\Resources\Private\Templates\Page\Default3Columns.html. This means inserting it using Fluid template syntax (f:cObject; see also https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/CObject.html), for example:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '20'}" />
That's it. Tested with TYPO3 8.7.1.
