create-website-with-templavoila

Welcome to my blog : I have written this templavoila tutorial for all new and beginner typo3 developers. This tutorial will help you to 1.create new website using templavoila.
2.Help you to understand templavoila mapping process.
3.How to write basic typo3 script in order to create simple typo3 template.
4.How to map typo3 menu and submenus.

Introduction to Templavoila
We can create a typo3 website in various ways. The simple one is the old classical method in which developer have to write some typo3 script and defining some variables in configuration section of template record. Procss of specifing the content place holder in our template is called as mapping process. In classical method this mapping process is done by writing TS (typo script).
But
This is a bit complex and difficult method for new developers. So solution is the templavoila (TV). In simple words TV just simplefies the mapping process.
Templavoila allows us to map the web page contents like ( body, typo3 menu, sub menus, main contents, left contents, and / or other user contents ) in a graphical/Web page manner. (i.e. It displays a our website template in a saperate frame in whichwe can map above contents in our map.) and it is TV's job to write typo script in our template record.

Start a new website using Templavoila. (It is assumed that you have installed TV )

1.Template -
To start a new website using templavoila, you must have a simple typo3 template. ( So first step is to create a typo3 template or email me I will provide a free typo3 template. You can also create a typo3 template by using simple steps given in my blog....use left navigation).

2.Start -
Click on templavoila from left menus. It will show a simple wizard called "TemplaVoilà Control Center" at right most frame. please read everything written below New site wizard.
and click on start wizard now.

3.Select the template HTML file - In this step you have to select the typo3 template file (I mailed you already-keep it in typo3/fileadmin/template folder). This wizard will show you all typo3 templates from template folder. So your job now is to select one of them. Currently you have one template file. First click on Preview First link to view the template. Then click on Choose as template link.


4.Enter default values for new site - After finishing above step the wizard will show you the selected template file in saperate frame and asks you to enter following basic things about new typo3(TV) website.
1 - Website name.
2 - URL of website.
3 - Editor user name.
Now click on Create New Site. Wizard will take you to the next step of creating website using templavoila which is called as templavoila mapping process of typo3 templates.


5.Templavoila mapping - Aftrer finishing above step the wizard will display you a message - "New site has been created and adapted." - Hurray. Now we will turn to actual mapping process.
This is a very important step. Here you can see the chosen template in saperate frame and you have to do mapping of following elements.(body,main menus, sub menus,Main content). you can view a complete mapping process in the following videos. For more videos of templavoila mapping process, you can browse youtube.
Begin Mapping - Read everything written in this wizard and click on Start the mapping process. This is the point where you have to do mapping. So lets start.
This new wizard will show you Template object details like data structure record of template, filepath of template etc. Below that you can see a statement "Data structure to be mapped to HTML template". (Line describes itself)
The table displays different data elements to be mapped with related mapping instructions.


*ROOT - we have to map the ROOT of data structure. But templavoila extension itself does this mapping with body tag of your template(because root element is nothing but a collection of whole data so it has to be body tag only- we can change this according to our need. But dont change this if you are a beginner).


*Main content area - To map the main content area you have to select the HTML element from your template where you want to place the main contents of site.(Same as editable region in HTML Templates). OK but how to map it?? Click on Map button next to the mapping instruction of main content area. It wil show your template in a new frame called mapping window with default mode: Exploded visual. This mode allows us easy mapping technique, so dont change it for now, I will discus other modes later in this post. Now click on HTML element for main content area.(If you are using my template then clickon id="mainContent").
Wizard will get changed and click on Set button to finish the mapping process of Main content area.


*Main Menu - Here you have to map the elemet from HTML template where you want to display the typo3 menu. This mapping will tell typo3 to keep all menus in the selected HTML element. Again click on MAP button and set the element(click on id="mainMenu" for my template).
Note:Once you finish this menu mapping process typo3 will automatically put all menus in the selected HTML element. Typo3 menus are nothing but links to all the pages that you have created using admin CMS.


*Sub menu(If Any) - Now you are going to map submenus for your site using templavoila. Many times submenus are not necessary, but if your site needs submenus then you can map them according to need. So pick the HTML element where you want the submenus to be placed.
Ok Now you have finished the mapping process so click on save button.




2 comments:

sanu said...

Hi !
I was trying out the steps u had told.. but after saying create new site ... i get this error! :

Fatal error: Call to undefined method t3lib_BEfunc::getrecordwsol() in C:\wamp\www\quickstart-3.8.1\typo3conf\ext\templavoila\class.tx_templavoila_api.php on line 1160

What wud be the reason? i am using typo3 3.8.1

admin said...

I use the last Typo3 version (4.1.5) with TV and also Wamp, and all runs smooth.
I'm a very beginner in Typo, so consider that I could only suggest to change your version of Typo, and upgrade to the last one.