Creating a template with TemplaVoilà!

First of all, we will prepare the TYPO3 template. This is very easy as we only have to click on link “Template” in TYPO3’s menu and fill in a few information fields such as the title.

In Setup part, type:

# Default page object
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

In Constants part, type:

# We want absolute no target attribute as it is not XHTML-strict
# compliant and I really don't like new windows (_blank target) ! >
styles.content.links.extTarget = =
content.pageFrameObj = =
styles.content.searchresult.resultTarget = =

Edit the “general template record” to add static template css_styled_content.

Using TemplaVoilà!

The official documentation explaining how to create a website template with TemplaVoilà! is really good. This is why I will not copy it again on this page. You may read  the official tutoriel or have a look at E this tutorial describing step by step how get in touch with TemplaVoilà! The goal to keep in mind is to eventually get something like this for your website:

And here is an example of how useful Flexible Content Elements are… Once you create a new block of content, in addition to standard types like “Text” or “Text with Images”, you will get (in my case):

When choosing a content type “Portfolio” — that I created for my very own website — you get an input form with meaningful information, as shown on the screenshot below. This allows you to automatically get the nice portfolio of the Internet topic.

Using the Header field with a Flexible Content Element

Did you tried to map a TemplaVoilà element to the Header field of your content block? And you did not succeed? I had the same problem!

The trick is to choose a hidden element type, to map it to the HTML file containing the Flexible Content Element and then to modify the XML content of the DataStructure to add a few lines of TypoScript.

Source code to be put into DS part (XML)

    10 = TEXT = register:tx_templavoila_pi1.parentRec.header

New Content Element Wizard

Did you know that the new content element wizard may be configured to show tabs instead of a huge list of elements?

Simply add following TypoScript this to your page TS and enjoy!

templavoila.wizards.newContentElement.renderMode = tabs

Unlink vs Delete

You may have noticed that whenever you want to delete a content element, you have in fact an “unlink” button instead and that your deleted element was not deleted after all but moved to the “non-used elements” of your page (after all you clicked on unlink not delete, right?).

Quoting Tolleiv Nietsch (current leader of TemplaVoilà) [ reference]:

The “delete” icons can be enabled in with two “modes” in User- or PageTSConfig:

mod.web_txtemplavoilaM1.enableDeleteIconForLocalElements = 1

will show unlink and delete icons for local elements side-by-side

mod.web_txtemplavoilaM1.enableDeleteIconForLocalElements = 2

will show the delete icon and hide the unlink icon whenever possible

With the last setting the unlink icon will still appear for local elements if they’re used more than once on the current page — otherwise you wouldn’t be able to remove a single reference to the element.

If a element is referenced from other locations the confirm-dialog also shows a different message. The Refindex is used for this lookup.