typo3 cms templates - free typo3 templates , Templavoila tutorial

create templavoila FCE Flexible Content Element

2008-02-07T09:16:00.000-08:00

FCE (Flexible Content Element). This post will help you to understand following points about FCE in typo3 templates.
What is FCE?
How to create FCE?
How to use FCE in website pages / templates?

Before you start: FCE is a area in your typo3 temaplte. You have to map the area from your typo3 template to place any perticular FCE. So very first thing you must have is, a typo3 template with place holder for our FCE. If you dont have a typo3 template then click here Free typo3 templates.

What is FCE?
Flexible content element is a typo3 element which can be created by user Or in simple words we can say a "User created Element". It is very simple to understand if you go step by step.

When we want to add any new element on pur page, Typo3 system asks us to click on any element(e.g. sitemap / regular HTML / bullet list). When we add any one of this in our page then related form opens up say if we click on sitemap then the form contains fields about sitemap only. But if at any position you want to add a element to your page which will give you 2 fields (one image link one textarea), then typo3 system is not supported to give such element directly. Here is the need of Flexible content element. User can create your own element and name them and can use them any where in project as a regular typo3 element.
This is what FCE, isn't it simple to understand.
FCE is nothing but user form elements with user templates.

How to create FCE?
Here I will explain how to create FCE with simple steps. I am assuming that you have already mapped your template using templavoila. If yes then proceed with this post otherwise click here to read how to map the template in templavoila.

Step1
Creating FCE using templavoila is nothing but defining some area in template file as a separate contain holder. So if your original template in fileadmin folder has some area that can be defined as content holder then proceed with next step else just write following HTML in your template. This new content area is nothing but your FCE i.e. Flexible content element.

Step2
Go to the File > Filelist module and go in the directory where your template file is located.
Once you get your template file then click on blue icon beside your template file. It will open a small context menu then click on templavoila. It will take you to the Templavoila's mapping wizard. This wizard should come with root element unmapped. If it is coming with some previous mapping then click on clear button.

Step3
Here you have to map the ROOT in your FCE element. Remember you have already done this for your template mapping. But that was a page mapping and this is a FCE mapping so you have to select HTML element other than body tag. In our case you have to click on our first div(i.e. id="FCE1"). This click will tell typo3 system that your new FCE's ROOT is id="FCE1".
Remember we are going to create a simple FCE with one header field and one body field ( thats why we have created div structure in step1).

Step4
You have mapped the ROOT of your your FCE. Now you have to map header and body of your FCE. For this you have to create a element first. So click on a small textbox below mapping options which already has value field_. Edit it and write field_head.

Will continue this post later about how to create a new FCE and how to use FCE in our page.

download-free-typo3-templates

2008-01-27T01:52:00.000-08:00

Free typo3 templates
I have written this blog for only typo3 beginners and thus I am providing the free typo3 templates for only learning purpose. Go through following important tips to get typo3 template.
Heart of typo3 system is its powerful template system. Once you learn to create typo3 templates and to map them means you learned 30% of typo3. But if you are a typo3 beginner then you should start learning the template mapping process and not with typo3 template designing. I am writing a new posts which will help you to create your own typo3 templates. If you need a sample typo3 template to learn , just send me a email and I will send you a free typo3 template, which you can use for learning purpose only. If you find any difficulty while using typo3 template you can send your queries to my email.
Email:typo3.cms.php[@]gmail.com - remove [] from email id.
We are providing free typo3 templates for learning purpose only. My sample typo3 templates are designed in simple structure which will help new developers to learn typo templates quickly.

Typo template customization.
We do typo3 template customization also. We can design sample templates according to your business needs. You can send your template requirements on the same email id and we will send you two sample typo templates.

what is typo3, new to typo3

2008-01-26T00:51:00.000-08:00

What is typo3??
(This post is for all who don't know what is typo3 and those who are new to typo3.)
Typo3 is a free(open source) CMS( Content Management System) developed by TYPO3.org. I am using lots of free open source CMS but this is the most powerful cms that I have seen ever. I am really enjoying learning and developing with Typo3. It is bit difficult to learn but once you learn this CMS you can develop websites more faster , which is a main advantage of this CMS.
Features of Typo3 CM
This CMS is very powerful and very fast to create static and/or dynamic websites. Lots of important features are provided in this CMS which makes our development faster. Following are some of the important features of typo3 CMS.
1. Faster development.
2. Easy Extensions.
3. User can develop there own extensions.
4. Great user(developer-editor) interface.

As I said earlier typo3 very fast while developing websites, let me explain one point with respect to its speed.
* Once you finished your template mapping and/or menus creation, you can create new pages in just 3-4 clicks.Can you imagine its speed.
* Page contents (say different paragraphs/images/graphic media) can be treated as saperate element and thus developer can edit/delete any piece of these paragraphs.
* Developer can easily Show/Hide these saperate elements in single click.
* Any of these contents can be copied from one page to other page. Isn't it great.
(go through other posts to learn other important features of typo3 cms)

create-website-with-templavoila

2008-01-19T06:20:00.000-08:00

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.

typo3-script-example

2008-01-18T08:32:00.001-08:00

How to write TypoScript?
The very first thing you must know about Typo3 is "The heart of Typo3 system is it's template.". So you have to learn how to create templates first.(please go through other posts to learn how to create typo3 templates.)
Now I will explain a small piece of TypoScript. Which is used for template mapping and setting up your template and other configuration.
Example of typo script.
Config : bgColor= red
Setting : body bgcolor="{ $bgColor }"

how to use typo3 sitemap

2008-01-18T08:30:00.001-08:00

While developing any web application or any simple information website, Sitemap playes important role in presenting navigational structure. Sitemap is useful for the site users to find there interested pages from whole site structure. Now think if you website has 100s of pages then it becomes very difficult to create sitemap manualy. Typo3 sitemap is a simple page element. You just have to add it in your page like regular page element. Just right click on page on which you want to add sitemap of your typo3 website, a small menu will get open and then click item to add new page element. This action will show all page elements in right most pannel of typo development environment. Just select the sitemap element.

free-typo3-templates-customized

2008-01-18T08:29:00.000-08:00

We are providing free typo3 templates.
Please send your enquiry and type of template / Website, so we can send you different templates.
We provide customized typo3 templates also according to your business needs.We can prepare good templates according to business needs.

use-typo3-tt_news-extension

2008-01-18T08:28:00.000-08:00

typo3-download

2008-01-18T08:25:00.000-08:00

templavoila-tutorial

2008-01-17T11:12:00.000-08:00

You may think that mapping each part of template (like body,main content,menu,submenu..) is tedious process and for this type of classic mapping we have to write some typo script(TS) in template setup.
The easy alternative to this process is to use TemplaVoila. This extension allows users to map there subparts in a very neat graphical way. I have used this extension and it is very useful when you need a fast development in typo3.It is so simple to use and helpful for beginners. It actually generates the TS and writes it in Setup(template record).
Will update this post very sooon.

realurl-extension-mod-rewrite

2008-01-17T11:01:00.000-08:00

Google considers many things before listing our site in search results.
Speaking url or we can say RealUrl is also a important factor that google consider while listing our site.
Speaking url means the url which describes its contents. This feature can be implemented using apache web servers's mod rewrite engine. Typo3 has an extension called as realUrl which helps us to integrate such speaking urls in our typo application.
Here are the simple steps to use realUrl extension.
1. Download and install the extension from typo3.org.
2. Create .htaccess file for mod rewrite.
3. Update localconf.php / realurl_autoconfig.php.
I will explain these steps in detail very sooon.

typo3-documentation

2008-01-16T11:05:00.000-08:00

create-typo3-menu-subparts

2008-01-16T11:03:00.000-08:00

Creating Text menus in typo3 is very simple.
For this you have to create subparts markers in your HTMl Template file.
Subparts markets are nothing but entity wrapped in ###.
e.g.

typo3-install

2008-01-16T11:02:00.000-08:00

Typo3 installation and support Links.
www.typo3.org

typo3-templates-cms

2008-01-16T10:59:00.000-08:00

Here are simple steps to create typo3 templates.

typo3-Indian-developer

2008-01-10T10:57:00.001-08:00

create-website-in-typo3

2008-01-10T10:49:00.000-08:00

Before starting with typo3 website development, I would like to tell some thing important about typo3.
Typo3 is a very powerful open source CMS. It is bit difficult to learn but if you start learning typo3 in correct manner and with proper guidelines then it bocomes very easy to learn. Many times new typoe developers makes some mistakes while learnign it. you should first understand the typo3 system.
You should know following points about typo3 to learn it in proper way.

1. Very important thing is typo template.
2. Writing typo script is also very important after learnign template system.
3. typo3 extensions and making use of them. ( realurl , tt_news etc..)

Confused about how to start learnign typo3??
I suggest you should start learning template system of typo3. Once you understand how to create and/or make use of built in templates then you would be able to make any simple and static website with typo3.