QuickSite 2.1 is now available. You can download here.

 

Putting TemplaVoila to Work

TemplaVoila is the most powerful of the TYPO3 templating methods. With this templating extension an experienced developer can produce sites with very flexible layout options for the content editor. Also, any site layout that can be produced in HTML can be integrated into TYPO3 using Templavoila.

However, sometimes developers struggle getting their heads around TemplaVoila or else use it awkwardly. Few use it efficiently or to its potential.

Although the tutorial Futuristic Template Building gives an introduction of how to use the features of TemplaVoila (TV), I have not found a comprehensive resource for describing how to most effectively use this extension in a day to day production environment.

After working with TV for some time, I have been able to develop an approach and set of favorite practices for TemplaVoila that works well for me. This site is an attempt to share those practices and the QuickSite package I use to build my sites. I use the term favorite practices over best practices as I do not have any pretension of this approach being the definitive word on TYPO3 templates. However, for me this approach has made templating one of the easiest things I do in my development work.

* indicates required field

Sign Up for Framework News

You can subscribe to news about the this framework in the form to the right. This will give you periodic news about the framework including updates to the QuickSite, bug fixes, tips, etc. I promise not to flood you inbox with junk and you can unsubscribe at any time.

Framework Provided by Busy Noggin, Inc.

This framework is provided free of charge by Busy Noggin, Inc., a web development company, and was authored by Ron Hall of Busy Noggin. You can find out more about our company at www.busynoggin.com.

What do these four pages have in common?

They all run off the same TemplaVoila page template.

click each to enlarge

Overview Video

Here is an early edition of a video presenting an overview of this framework and the Busy Noggin QuickSite. It is a little over 6 minutes long.

Please note that this video used an early version of the framework. The current version uses a new point and click interface for managing skins which is even easier than what is shown in the video. Also, the backend look of the interface has been upgraded to be consistent with the latest versions of TYPO3.

HD version

Non-HD version (for lower bandwidth)

How This Site is Organized

This site is organized so as to be read sequentially.  Work your way through each section starting in the upper left of the menu. There is a download section which provides the Busy Noggin QuickSite package which runs this framework and which I use as a starter for all my sites.

 

Flexible & Comprehensive 

  • Modular approach to building pages
  • HTML structures that accommodate all kinds of visual styling
  • Cuts down drastically the amount of TemplaVoila mapping needed from site to site
  • Preserves all the power of TemplaVoila for handling special situations
 
 

Core & Skin Files 

  • Provides core templates that can be used from installation to installation without remapping.
  • Skins are developed that carry all the structure and visual changes needed to modify the output of the core templates to the site's unique requirements
  • Even custom CSS classes for the RTE can be supplied through the skins.
  • Those with good front end coding skills but limited TypoScript or TemplaVoila skills can still template sites with this approach.
  • Leverages the unique benefits of CSS and TypoScript
 
 

Modularity with Utility FCEs 

  • Ad hoc layouts using columns and modules in combination with common page templates
  • Options for modifying the visual presentation of columns and modules
  • Columns and modules are self-adjusting and fit within the space available
  • Columns can be nested inside modules and other columns
  • Additional utility FCEs for handling common layout and content needs
 
 

Backend Layout 

  • Extensive use of the TemplaVoila beLayout tag to simplify what the editor sees
  • Trims down the visual noise on the backend
  • JavaScript-driven tabs