Though we have not released it to the TER, we do have TVFW version 2 available.
It does work with TYPO3 6.2. We have used it on our customer sites.

Here is the extension manual which has a link to the GIT repo with the code for version 2.
You should use the develop branch.

You can use version 1 skins with version 2, but will need to add one constant to the skin (detailed in manual).



The skin's TypoScript is an important component to adapting the skin to produce adequate HTML to replicate the visual design. Following is a list of the objects you might find in a skin. Not all objects are found in all skins.

The file is located in the skin directory at typoscript/skin_typoscript.ts


This is the object that produces the header for the entire site. If you need a different header for an individual page (like a home page), you can rewrite the header object in a TypoScript template on that page.

If you need a different header for a section of the site, you can rewrite the object in a TypoScript  template attached to the root page of the section. 

If you need a different header for a particular template than all other templates, see the note at the bottom right of this page about writing alternate objects to individual templates.


This is the object that produces the footer for the entire site. For alternate footer needs see the instructions for the header. They apply for the footer as well.


This is for including additional CSS, JavaScript and other code that you want loaded in the head of the document. It will be loaded after the links to CSS and JavaScript code with the exception of the skin's JavaScript file which falls after the items entered in this object. This means you can include JQuery plugins with this object and they will be loaded before the skin's JavaScript.

Objects for Graphic Headers in Modules

It is possible to have TYPO3 generate graphic text headers for the modules. The objects used for this are:

  • graphicHeaderModBase
  • graphicHeaderMod1
  • graphicHeaderMod2
  • graphicHeaderMod3
  • graphicHeaderMod4

The best way to understand how to use these is to read the code in the skin_typoscript.ts file in the skin called "skin_bn_blue_demo." You can see the final front-end output by actually switching to this skin and dropping in a module with entries in the title fields.


Pre Code and Post Code Objects

These objects are used to interject code between various content areas in the page template. They are why you can adapt the framework to so many different designs without remapping page templates.

These can be used to interject wrapping divs, breadcrumb menus, etc. anywhere in the page templates. Here is a list of the objects (see also the note below on writing alternate objects to individual templates).










What you need to keep in mind is that the pre and post code around an block of content only show up if that block of content is actually generated. The objects listed in red will show up in all page templates. The others will show up in some templates and not others. The pre and post code in the feature will only show up if content is placed in the feature area.

There is one unique object called preCodeContent. It is for interjecting code that will show up after the header (if there is no feature) or after the feature (if there is content in the feature). There is no corresponding post code object for this as anything you would write there you can simply write in the preCodeFooter.

The pre and post code objects for the header and footer are a bit superfluous as anything you would code within them could simply be coded in the header or footer. They are there to keep a consistent convention of surrounding the content areas with pre and post code.

Targeting Alternate Objects to Individual Templates

It is now possible to write alternate header, footer, preCode and postCode objects and target them to individual templates. For instance, if you write the TypoScript object "header" and also write an object "f2b.header", then all templates will use the "header" object except template F2b which will use the "f2b.header." This greatly enhances the flexibility of the framework as it gives you total control of the HTML structure on a template by template basis.