Running with TemplaVoila

Outdated

This information is outdated. While some details may still apply in specific situations, this page was written for packages of TYPO3 that are no longer current.

<< Back to Extension manuals page

[edit]

The TemplaVoila extension manual isn't much use for the administrator level of involvement. You'll need your own HTML file to begin with. You'll use that file as a base. TemplaVoila will help you set up the appopriate data structures so that Typo3 content will be dropped into your resulting template.

Tutorial: Futuristic Template Building

This is the place to go to learn how to use TemplaVoila...

http://typo3.org/documentation/document-library/doc_tut_ftb1/

Cheat Sheet for setting up a TemplaVoila Template

When I'm working with TemplaVoila, I can't live without this cheat sheet!!! it just pulls out the critical details from the Futuristic Template Building Tutorial...

http://www.mcuniverse.com/archive/TV-Cheat-Sheet-Tutorial.1462.0.html

Dynamic Menu Code

Setting up the dynamic menu system is fundamental. But I often have a hard time finding the source code to get one setup, when I need them. Here's where I did find it: http://typo3.org/documentation/document-library/doc_tut_ftb1/Creating_the_dynamic/ , but the rest of this is to keep the information handy.

All of this code goes in the Setup section of the Template. You'll want to take note of the CSS wraps defined here. These will need to be reflected in your CSS style/sheets.

• General Setup

 # Menu 1 cObject
 lib.menu_1 = HMENU

• Single Level Vertical Menu

   # First level menu-object, textual
 lib.menu_1.1 = TMENU
 lib.menu_1.1 {
     # Normal state properties
   NO.allWrap = <div class="menu1-level1-no"> | </div>
   NO.stdWrap.htmlSpecialChars = 1
     # Enable active state and set properties:
   ACT = 1
   ACT.stdWrap.htmlSpecialChars = 1
   ACT.allWrap = <div class="menu1-level1-act"> | </div>
 }

• Additional Levels can be added by duplicating code and incrementing numbers as shown below:

   # Second level menu-object, textual
 lib.menu_1.2 = TMENU
 lib.menu_1.2 {
     # Normal state properties
   NO.allWrap = <div class="menu1-level2-no"> | </div>
   NO.stdWrap.htmlSpecialChars = 1
     # Enable active state and set properties:
   ACT = 1
   ACT.stdWrap.htmlSpecialChars = 1
   ACT.allWrap = <div class="menu1-level2-act"> | </div>
 } 

For versions 4.2.10, edit the XML properties of the DS to change the HSC tag from 1 to 0.

<field_menu type="array"> <tx_templavoila type="array"> <title>Main menu</title> <description>map to the HTML elements to create a navigation menu</description> <sample_data type="array"> <numIndex index="0">[one, two, three]</numIndex> </sample_data> <eType>TypoScriptObject</eType> <tags>*:inner</tags> <proc type="array"> <int>0</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> <TypoScriptObjPath>lib.menu_1</TypoScriptObjPath> </tx_templavoila> </field_menu>