TYPO3 Template Design Guide

In this article I want to explain some principles and want to give some recommendations  for a clear and maintainable TYPO3 Site, especially regarding a well structured TYPO3-Template design.

This article is based on the traditional templating in TYPO3. But it includes some extra hints for TemplaVoila at the end, and most  of the suggestion will also take effect for TemplaVoila...

Common principles:

Templatedesign is like programming: a good style results in reusability and cheaper maintenance. The most important principles are:

  • always start with a analysis of the requirements and the needed sitestructur, and plan your work.
  • Never use Code double. (Instead store it in a generic way and reuse it)
  • Logical structur
  • Make enough comments so one can understand the code easily also after a longer time.

An fictitious example:

Say we want a Site in TYPO3. The Site should have a mainmenu in the top and the submenu in the right. Also there is a footmenu and a breadcrummenu in the site. The site should be available in a printversion and in a special barrier-free version.

As a particularity the Design in the Subtree from Site B should be a bit different to the rest.

Also the Subsite AB and Subsite B should have a newslist in the right.
 
Image 1: Design (Layout)
 
Image 2: Sitestructur



 
The TYPO3 Templates are structured and ordered like this:

  • One Maintemplate in the root of the site
    This Template hasn’t much Code in it, only some setting which are common and generic for the site like: config.xhtmlcleaning
  • All other TS-Code is structured in separate Templates (which are stored in the common Sysfolder “Templates”) like this example templates:
    1. + MainMenu/Submenu
      (TS-Code for the Menues:
      lib.mainmenu=HMENU …
      lib.submenu=HMENU
      ...)
    2. + Breadcrum/Footmenu
      (TS-Code for the Footmenu (make printlink, link to barrierefree version, and sitelinks from the page “[Footmenu]”
      lib.footmenu=COA …
      lib.breadcrum=HMENU…
        )
    3. + Plugin Settings
      (Because we use News extension. Here the TS Code for the Setup of the newsextension like Templates etc..)
      [If there are many extension, you can split the settings in more templates.]
    4. + Language
      (This template contain languagerelated typoscript code, like config.language= and all the Conditions regarding the languageswitch, also you can maintain some langnguage labes here)
    5. + PAGE
      (The important Configuration of the Layout:
      page=PAGE
      page.typeNum=0
      ….
            MAINMENU<temp.mainmenu
            CONTENT<style.content.get
            FOOTMENU<temp.footmenu
            BREADCRUM<temp.breadcrum

      …..)
    6.  + PRINTVERSION
      (Setup for the printversion:
      printversion=PAGE
      printversion.typeNum=99
      ….
      BREADCRUM<temp.breadcrum

      ….)
  • For the Design in Site B we want a diffrent design, so we add a “extension template” to “Site B”. Only add TS-Code which is changed! If you need the different design twice, than store the TS-Code also in the sysfolder and include it! (Never write code twice!):

 

This results in a few suggestions for a TYPO3 Site:

  • Only use one maintemplate in the sitetree!
  • Split the TS Code in many Templates, store this Templates as “extension template” in an Sysfolder. Include these templates in the maintemplate therefor use the field “Include basis templates”.
  • Use temporary TS-objects (like lib.mainmenu, lib.loginform…) for MENUS and other “objects”, which are needed in the page.
  • Use clear comments in the Templates.
  • For Menus like Footmenu or other “static menus” use a site from type  “not in menu” (so you can add or change menuitems later just by editing the subsites of this site)
  • Subtemplates (extension templates in the sitetree) should only contain changed properties. If you need the same effect multiple times, store the TS-Code in a common TS-Template and include the definitions.. (Never use code double :-) )
  • for example TS-Code see TS-R

 

Suggestion for Templateing:

I prefer not to use automaketemplates, because the time needed for templating is nearly the same. Instead I prefer to use the direct way with markers. It has  the advantage that non chached pages could be rendered faster and I have a better control over the output.

 

Suggestion for the fileadmin folders:

As you can see in the image, I prefer to structure and categorize all the files needed for a TYPO3 site and give them a self-explaining name. Also it could enhances maintainability to split CSS in more than one file.

 


Suggestions for TemplaVoila

  • Most of the suggestions above are also relevant for templating with TV, regarding splitting of TS in Templates  etc... This are the differences:
    • in the PAGE template you give all the control to TemplaVoila instead of defining your site there.
    • PRINTVERSION is not neccessary because TemplaVoila has its own concepts for this.
    • Diffrent sitelayouts are handled with TS-TO -> this is a much more powerful and flexible way.
  • As an addition you have an additional sysfolder "TV-Templates" with all your TV-TemplateObjects and TV-Datastructures, most of the fields in your Datastructure uses typoscript objects. (Its nearly the same as in the classic method... you have to define your lib.* TS-objects ...)
  • Because also the FCE (flexible content elements) could require  some TS objects it is good to have an extra Template +FCE Fields with the definitions...
  • always try to use few TS-Datastructures:
    • because mostly most of the fields are the same in diffrent TV-TemplateObjects
    • If you just don't need all defined fields in a TV-DS for a certain TV-TO you can just ignore this field in your mapping (dont map it) and so you still can use the same TV-DS
  • I prefer to add my headerDatas (especially the CSS Files) in the TS page definition (+PAGE) so the step "selecting headerparts" is not needed after an update of the mappings.

coming next...

I plan to write more articles with this topic, especially:

  • Concepts for the right column
  • Multilanguage and TemplaVoila
  • Extension Design Guide

blog comments powered by Disqus
  1. Robbie 27.05.11 02:17

    Thank you very much for this information. I was given the task of designing & developing the front/back end systems for cellphone database & your article was tremendously helpful.

  2. Steven Davis 23.04.11 09:28

    What is a fair price for a web designer to do this for me? I don't have a lot of experience with designing websites. I don't want someone to charge me that much to do it.SEO Chicago

  3. Gregory 22.02.11 22:28

    This tutorial helped me out a ton with the design for my business continuity site. Very glad to have found this site and its many great attributes. I look forward to learning more and contributing to the conversation.

  4. www.redball.com http://www.redball.com 29.09.10 06:48

    A clear description of the common principles that should be adhered to for maintaining a TYPO3 Site is given in the blog. In the beginning I was having some trouble to comprehend the idea conveyed but when I read the blog two times I was able to get a clear picture. I am happy to point that each and every detail is clearly explained especially with regards to the basic principles in template designing. Such informative blogs really go a long way in facilitating exchange of information.

  5. TYPO3 Agentur http://www.artgraphix.de 10.05.10 21:25

    Easy and understandable tutorial

    Thanks and greetings from de

  6. Ernst http://www.bierbauch.biz 08.04.10 08:48

    THX for this tutorial. A bit old, but Typo3 has not changed that much in the last years.

  7. TYPO3Pedia http://typo3pedia.com/ 24.03.10 13:19

    Easy and understandable tutorial for such beginners in TYPO3 like me.

    Thank you for the post.

  8. Wolfgang http://marx-development.de 06.07.09 13:44

    Still looking for a biginners step by step guide... but thans for the try...

  9. Herb 04.03.09 14:32

    Hallo und guten Morge,
    schöne Seite . Sehr übersichtlich und informativ.
    Frohe Pfingsten noch..
    Viele Grüße

  10. matt 15.02.09 19:27

    Hallo,
    eine sehr schöne Webseite!

    Viele Grüße aus Essen

  11. Rizwan 24.12.08 21:34

    Hi, is there any side which can give step by step inro for typo3 Template Structure

  12. Samir 21.10.08 11:27

    Hello!
    This is my first message,
    I would to tel you that there is an error when you moving the mouse up the flags in the right-top page of your blog:
    English flag->de
    German flag->en

    Best regards

  13. Jamsin 07.07.08 18:31

    Sorry but I didn't understand anything...you wewre just talking generally, but what about us beginners ,we cen not no how to do this.
    You should write what we have to click so we could design our own template in typo3

    thanks

  14. Daniel Pötzinger http://www.typo3-media.com 02.10.06 15:35

    Thanks.
    Yes just create a new Templaterecord (without the Flags "clear setup", "clear constants" and "is root")

    Another hint:
    The extension templates are included via "Include basis templates": Here the order does matter: So the Template "+PAGE" should be at the last postion, because it needs the defined TS-Objects.

  15. guest 21.09.06 10:00

    How do I create this extension templates in the SysFolder ? Just add another database record of the type "Template" ?

  16. Anke Richter http://www.mein-gesundheitsforum.de 19.09.06 16:18

    Yeah, even I understood it... ;-)

blogroll