TYPO3 7.2 Bootstrap Templating

Custom template with backend layout so that even your average Joe can work with the content in the backend.

This is mainly to document how I achieved that so as to memorize it since I don't work with TYPO3 all that much.

IMPORTANT Problems logging in TYPO3 > LocalConfiguration, sec level normal not rsa and change install password. Hash: md5.cz


The look of it

Take a look inside

TYPO3 fluid template

  • Count the columns

    Decide how many column positions is needed. Images with overlayed text have one column for image and one column for the overlay text. Each column will have it's own box in backend layout:

  • TYPO3 fluid HTML frontend template

    HTML template file using fluid: uses namespace

    {namespace f=Tx_Fluid_ViewHelpers}
    and The cObject-ViewHelper.


    Tags marked f:cObject fall under the fluid namespace. All the rest of it is interpreted as a regular HTML/plain text.

    Template location

    New file in bootstrap_package/Resources/Private/Templates

    Fastest way

    Have a static HTML page, like bootstrapzero templates or the like. Replace the content parts with columns fluid definitions.

    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '200'}"/>

    Column numbers can be whatever apart from 0,1,2,3 which are reserved for content, sidebars and border. They don't have to be used at all though.

  • Backend Layout for that template

    Backend layout defines names of boxes in the backend (for orientation) and assigns a column number to the content in them. If there is a frontend template defined for the specific page, content from the backend layout will only show up on the frontend if the HTML frontend template defines spaces for the respective column number that is populated in the backend. Content undefined in HTML template won't show up.

    Layout location

    New file in bootstrap_package/Configuration/PageTS/Mod/WebLayout or easier in backend:

    Web > Lists > "Root" > [+] > New Record: Backend layout

    NOTE - System BLs are located in:

              	BS Package/.../Configuration/PageTS/Mod/WebLayout/BackendLayouts

    Edit the config field. Upload an icon 50x75px to be able to tell the new layout.

    Set the number of columns and rows and work it out colPos by colPos, as defined in HTML template.

    Colspan defines the span - the number of cols ina row is defined by you:

    backend_layout {
    	colCount = 4
    	rowCount = 14
    	rows {
      	1 {
    		columns {
        		1 {
      				name = CallToAction_MobileOnly
      				colPos = 1000
      				colspan = 4
      	2 {
      	columns {
      			1 {
      				name = Image_Top1
      				colPos = 100
      				colspan = 1

    The colspan and layout in general will only affect the box position in the backend - it's for the person who'll care of content only. The actuall appearance on frontent is set in HTML template.

  • Bootstrap Package TYPO3 setup.txt

    Located in bootstrap_package/Configuration/TypoScript

    Lines 347-349, set the HTML template as the default one, the one to which the website will fallback.

                default = TEXT
                default.value = {$page.fluidtemplate.templateRootPath}MyHomeTemplate.html
                default.insertData = 1

    It won't be update-proof. This way there doesn't have to be explicit connection between backend layout and a HTML template.

    • TO DO  
  • CSS and JS definitions

    In Root's Typo Script record.

    Page-specific CSS/JS import / based on page ID

    [globalVar = TSFE:id = 29]
    page {
      10 = TEXT
      10.value = <link rel="icon" type="image/png" href="fileadmin/ico/favicon.png" />
      11 = TEXT
        field = subtitle // title
        noTrimWrap = |<title>| Page title</title>|
      page.includeCSS {
       file1 = fileadmin/templates/projects.css
       file2 = fileadmin/templates/basic.css
      page.includeJS {
       file1 = fileadmin/templates/toggle.js

    General import (on all pages) is the same without the [global] directive.

  • Setup

    Choose backend layout for a specific page in

    Web > Page > [pencil icon] > Apperance

  • Images don't have to be same size but they must be of equal proportions

    There is a crop tool in the backend.

    • TO DO