Create base HTML Fluid Templates for Typo3 4.5

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short FTM).

Notice: This Post are the third part of Create a complete Typo3 website by using the Fluid Template Engine

Here we come to the next few steps for creating a base HTML Fluid Template, just do it point by point.
1. Navigate into the Typo3 Backend ‘FILE’->’Filelist’ Module and click on the ‘fileadmin’ tree node.
2. Click on New-Icon above the main-frame and create a folder named ‘templates’. Here you will store all your template files.
3. Navigate by using the file-tree into the new ‘templates’ directory, and create two directories named ‘layouts’ and ‘partials’. The ‘layouts’ directory is destined for the main templates, wherein the partial templates will be later included. The ‘partials’ directory will store the part templates, like the navigation, the subnavigation and so on.(show image)
4. Now, after we finish the creation of our directory structure, we create our first main-template file named ‘main.html’. Therefore we navigate into the ‘layouts’ directory and click again the New-Icon above the main frame, to create the file. (show image)
5. To edit our new template file, click on the file-icon on the left and click further on ‘Edit’ (show image)
6. Within the editor your are now able to write the first template code. Just create a main-border-structure (show image), where are later your content templates are placed in:

<div id="header">header</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">footer</div>

 

7. For our website we would create two seperate content templates. A first default content template that will have three columns, and a second template that will have the full size of the content. Therefore we create in the ‘templates’ directory two files, a ‘threeColumn.html’ for our default template and a ‘fullSize.html’ as an alternative template. (show image)
Notice: If you have a fault by naming between the template files and the TypoScript, there are no references shown in the last column from the last sample image.

8. Now we will write the content templates. First, we edit the ‘threeColumn.html’ template by click on his File-Icon. (show image)
The name of the f:layout must have the name of our in step 6 created template file, that means ‘main’. We could also create several content templates, that use different main-border-structures (as sample for style switches, or complete different website areas) that we assign to the f:layout name attribute.
The f:section defines that these templare is placed in the f:render section=”content” within the assigned main-border-structure template.

<f:layout name="main" />
<f:section name="content">
  <div id="content_left">
    <f:format.html>{content_left}</f:format.html>
  </div>
  <div id="content_main">
    <f:format.html>{content}</f:format.html>
  </div>
  <div id="content_right">
    <f:format.html>{content_right}</f:format.html>
  </div>
</f:section>

 

Our alternative content template could look like:

<f:layout name="main" />
<f:section name="content">
  <div id="content_main_full">
    <f:format.html>{content}</f:format.html>
  </div>
</f:section>

That’s it for now, from the HTML Fluid templates. 😉

Do you have understand every point?! If not, feel free to write me a comment 🙂

Read here the next step: Configure the Fluid TypoScript and create Backend-Templates

    • Pinto
    • February 15th, 2012

    Hi, super Tutorial.
    Habe da aber noch eine Anmerkung:
    In dieser Form rendert Fluid quasi als “Lückenfüller” viele p-Tags mit der Klasse “bodytext”.

    Dies lässt sich einfach verhindern, indem man als Format nicht “html” sondern “raw” angibt:

    {content}

    {content}

    Gruß

      • Horst
      • March 5th, 2012

      Vielen Dank für den Tipp!
      Hat mir viele Nerven erspart.

      Gruß
      Horst

  1. Hi Thomes,
    very nice manual, it helped me a lot.
    But I seem to miss one step: where do you ‘link’ a css in your template?
    I would like to use a CSS file, but don’t know where to enter this information in the template.

    Gruß

    • jank
    • March 28th, 2012

    Pinto :
    Hi, super Tutorial.
    Habe da aber noch eine Anmerkung:
    In dieser Form rendert Fluid quasi als “Lückenfüller” viele p-Tags mit der Klasse “bodytext”.
    Dies lässt sich einfach verhindern, indem man als Format nicht “html” sondern “raw” angibt:
    {content}
    {content}
    Gruß

    Den format.raw ViewHelper gibt es erst in Typo3 4.6. In Typo3 4.5 muss der format.html mit leerer parseFuncTSPath benutzt werden, um das selbe ergebnis zu erziehlen:
    {content}

  2. We need more documents like this :

    – In English (as opposed to only in German)
    – Really step by step and explicit (as opposed to assuming you already know a bunch of things)

    THANK YOU !

  3. Hi,

    I’ve encountered multiple paragraph ‘p’ tags in my content when I used f:format.html, so instead I used f:format.raw

    {content}

    I hope this helps anyone working on their first fluid layout as I do.

  4. I would like more information about this, because it is very nice., Thanks for sharing

    • dinamic
    • September 10th, 2013

    Hallo Thomas
    super Tutorial. Habe alles Schritt für Schritt nachvollzogen. Leider werden die Spalten untereinander dargestellt. Kann es am fehlenden CSS liegen? Gibt’s dieses auch irgendwo zum Download? Gibt es eine Muster Site wo dieses Projekt fertig angezeigt wird? Danke für deine Hilfe! Susanna

      • tdeuling
      • September 12th, 2013

      Danke 🙂
      Hört sich fast nach fehlendem CSS an. Werden denn die Inhalte in den Spalten angezeigt?
      Die Dateien gibt es glaub ich nicht mehr, ist schon soo lange her 😉