TYPO3 Templates

TYPO3 Templates
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 44%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Build dynamic and powerful TYPO3 templates using TypoScript, TemplaVoila, and other core technologies.
  • Customize dynamic menus, logos, and headers using tricks you won’t find in the official documentation.
  • Build content elements and template extensions to overhaul and improve TYPO3’s default back-end editing experience.
  • Follow along with the step-by-step instructions to build a site from scratch using all the lessons in the book in a practical example.

Book Details

Language : English
Paperback : 328 pages [ 235mm x 191mm ]
Release Date : November 2010
ISBN : 1847198406
ISBN 13 : 9781847198402
Author(s) : Jeremy Greenawalt
Topics and Technologies : All Books, CMS and eCommerce, Content Management (CMS), Open Source, PHP

Table of Contents

Chapter 1: Getting Started
Chapter 2: Enhancing your Template with CSS
Chapter 3: Adding Custom Template Fields
Chapter 4: Creating Flexible Menus
Chapter 5: Creating Multiple Templates
Chapter 6: Creating a Template from Scratch
Chapter 7: Customizing the Backend Editing
Chapter 8: Working with Flexible Content Elements
Chapter 9: Creating a Mobile Website
Chapter 10: Going International
Chapter 11: Building Websites with the TemplaVoila Framework
  • Chapter 1: Getting Started
    • Basic requirements
    • How templates were created
    • Introducing TemplaVoila!
    • Installing TemplaVoila
    • Creating a basic HTML template
      • The root tag
      • The menu area
      • The content section
    • Creating your first template with the TemplaVoila Wizard
      • Selecting the HTML template
      • Configuring the new site
      • Mapping the template
      • Data elements
      • Mapping instructions
      • HTML-path
      • Action
      • Mapping rules
      • Starting to map
        • Mapping the rest of our elements
      • Header parts
      • Creating the main menu
      • Creating the submenu
      • Testing the finished template
    • The page tree
    • If something didn't work right
    • Adding content to our front page
    • Summary
  • Chapter 2: Enhancing your Template with CSS
    • Creating a basic stylesheet
    • Including stylesheets in TYPO3
      • What you need for your main stylesheet
      • Adding CSS with the TemplaVoila Wizard
      • Including CSS with page.stylesheet
      • Including CSS with page.includeCSS
      • Including CSS with page.headerData
    • Using default markup in TYPO3
      • Headers
      • Image with text areas
      • Bullet lists
      • Tables
      • Removing default markup in TYPO3
    • Summary
  • Chapter 3: Adding Custom Template Fields
    • Modifying the page metadata
    • Adding a banner
      • Adding space for the banner to our HTML file
      • Adding the banner element to TemplaVoila
        • Configuring a data element
        • Viewing the data structure XML
      • Using our new data element
    • Adding the date to our template
      • Adding space for the date to our HTML file
      • Creating a data element
      • Viewing the updated XML
      • Showing our new banner
    • Loading the date and time from the TypoScript template
      • Changing our timestamp element in the data structure
      • Adding the timestamp object to the TypoScript template
    • Adding a dynamic logo
    • Summary
  • Chapter 4: Creating Flexible Menus
    • Page tree concepts
    • Introducing HMENU
    • Types of menu objects
    • Menu item states
    • HMENU properties
    • Common menu item properties
    • Introducing text-based menus
      • TMENU Properties
    • Adding separators to menu items
    • Redesigning the text-based menus
      • Final code
    • Introducing graphic menus
    • Introducing GIFBUILDER
      • The BOX object
      • The IMAGE object
      • The TEXT object
      • GIFBUILDER layers
      • GIFBUILDER properties
    • GMENU properties
    • Creating our first graphic menu
      • Modifying based on menu states
      • Main menu code
    • Creating a graphic menu with boxes
      • Submenu code
    • Using external images for menus
    • Other types of menus
    • Breadcrumb navigation
    • Pulling it all together
    • Summary
  • Chapter 5: Creating Multiple Templates
    • Creating new templates with sidebars
      • Creating the HTML and CSS
      • Adding columns to the data structure
      • Creating new TemplaVoila template objects
      • Mapping new template objects
    • Assigning a new template to our pages
    • Creating icons for templates
    • Assigning templates to subpages
    • Creating an extension template
    • Creating a printable template
      • Creating a print-only stylesheet
      • Creating a subtemplate
    • Creating a printable link
      • Adding a printable link section to the templates
      • Adding the printable link field to the data structure
      • Generating a printable link with TypoScript
    • Summary
  • Chapter 6: Creating a Template from Scratch
    • Designing the template
      • Creating a wireframe
    • Creating the HTML template
    • Creating the data structure
    • Creating data structure elements
      • The banner field
      • The date field
      • The main article field
      • The news fields
      • The upcoming events title field
      • The upcoming events list
      • The event container field
      • The event date and city fields
      • The product fields
      • The contact information fields
      • The footer field
    • Mapping the template object
    • Creating a folder in the page tree
    • Setting the TypoScript values
    • Creating an example page
      • Adding test content
    • Summary
  • Chapter 7: Customizing the Backend Editing
    • Updating the rich text editor
      • Editing the TSconfig
      • CSS properties
      • Classes properties
      • RTE class properties
      • Toolbar properties
      • HTML editor properties
    • Customizing the Page module
      • Creating the HTML layout
      • Assigning the backend layout
      • Adding some CSS styling
    • Setting a backend layout for a data structure with multiple template objects
    • Using backend layout files for template objects
    • Using static data structures in TemplaVoila 1.4.2
      • What are static data structures
      • Setting up static data structures
      • Modifying static data structures
    • Summary
  • Chapter 8: Working with Flexible Content Elements
    • Introducing flexible content elements
    • Creating our first flexible content element
      • Building the content element
      • Testing our new content element
    • Creating a flexible HTML wrapper
      • Building the content element
      • Testing our new content element
    • Creating a multi-column layout element
    • Extending the multi-column layout element
    • Creating a product display element
      • Creating the HTML and CSS
      • Creating a customized data structure
        • Product name
        • Product class
        • Product image
        • Product price
        • Product description
        • Text for product link
        • Product link
      • Viewing our results
    • Summary
  • Chapter 9: Creating a Mobile Website
    • Introducing conditions
      • Browsers
      • Versions
      • Operating systems
      • User agents
      • Language
      • Logged in users
      • Global variables and strings
      • User function
    • Testing browser compatibility
    • Creating a mobile version of your website
      • Detecting a mobile device
      • Creating a mobile stylesheet
      • Customizing our TypoScript objects
      • Bringing it all together
    • Adding a non-mobile link
    • Creating a mobile subtemplate
      • Adding a new option to our subtemplate pages
      • Creating a new TemplaVoila template for mobile devices
      • Adding our subtemplate to the TypoScript template setup
    • Redirecting to an external mobile site
    • Summary
  • Chapter 10: Going International
    • Introduction to internationalization and localization
    • Adding localization to a website
      • Adding a website language
      • Adding your languages to TypoScript
    • Adding localization to pages
      • Using the localization tab in the Page view
      • Hiding non-translated pages
    • Translating content
      • Creating universal elements
      • Adding content without a default language
      • TemplaVoila translator workflow
    • Adding a basic language menu
      • Adding the language menu to our TypoScript template
      • Viewing our changes on the frontend
    • Adding flags for language selection
    • Adding a localized logo
    • Creating localized TemplaVoila templates
    • Summary
  • Chapter 11: Building Websites with the TemplaVoila Framework
    • What is the TemplaVoila Framework?
    • Benefits of the TemplaVoila Framework
    • The TemplaVoila Framework workflow
    • Installing the TemplaVoila Framework
    • Setting up QuickSite for the first time
      • Assigning a site URL
      • Selecting a skin
      • Viewing our QuickSite frontend
    • Planning with the wireframe skin
    • Designing the page layouts
      • Page Templates
    • Utility FCEs
      • Column groups
      • Module groups
        • Module options
      • HTML wrapper
      • Plain image
      • Module Feature Image
    • Creating a custom skin
    • Editing a skin
      • Editing TypoScript for the HTML structure
      • Editing CSS
      • Editing TypoScript constants
      • Adding JavaScript
      • Additional resources
    • Adding special functionality
    • Adding content
      • Feature content
      • Generated content
    • Summary
    • TYPO3 Templates summary

Jeremy Greenawalt

Jeremy Greenawalt is a full-time developer and part-time writer with close to ten years professional experience in website and application creation. His first love was writing, but programming quickly followed.He is a co-founder of Vintage 56 where he helps develop websites, online shopping carts, web apps, iPhone/iOS apps, and anything else his friends can think up. Jeremy is also the web director of a large ministry, Generals International. Jeremy lives near Dallas, Texas with his wife, Rebekah, and their ever-youthful puppy, Aingeal. He loves spending time at home reading, playing around on the piano, or just relaxing on the couch with his family. You can read more from Jeremy at pocketrevolutionary.com, and you can follow him on Twitter at @jgreenawalt.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 7 submitted: last submission 27 Nov 2013

Errata Type:Grammar Page No:71

then, instead of than [making a beautiful menu.] End of second paragraph. Its a small error, I know...thought I'd let you know anyhow.

Errata Type:typo Page No: 76

Second paragraph: Like maxItems above, being has inheritance. It should be: Like maxItems above, begin has inheritance.

Errata type: Typo | Page number: 149 | Errata date: 29 Aug 2011

Buttet item 7: "Map the News element to the div with the news_item class" should be "Map the News element to the div with the news_list class"


Errata type: Language | Page number: 78

Like allWrap and and linkWrap, this is used to ...,should be
Like allWrap and linkWrap, this is used to ..
Errata type: Language | Page number: 89
line 6 ... with ImageMagick then others, ... should be: ... with ImageMagick than others, ...
Errata type: Language | Page number: 92
The code:
lib.subMenu.wrap = <id="submenu-area" style="margin-left: 0px">|</ul>
should be:
lib.subMenu.wrap = <ul id="submenu-area" style="margin-left: 0px">|</ul>
Errata type: Typo | Page number: 97
line 5: "properties, than it will simply ..." 
should be:
"properties, then it will simply ..."

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

TYPO3 Templates +    Sencha Touch Cookbook, Second Edition =
50% Off
the second eBook
Price for both: $39.00

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Learn TemplaVoila and how it can be modified to by more dynamic
  • Add dynamic banners and logos to an existing template design
  • Create custom menus using multiple approaches and techniques
  • Create multiple templates without repeating yourself
  • Customize the back-end editing experience for specific templates
  • Add multiple columns and special formatting with flexible content elements
  • Create powerful content elements with variables and intelligent formatting
  • Learn about the future of TYPO3 templates with static data structures and other advanced techniques
  • Add browser testing and conditional logic to simple templates
  • Add internationalization and localization to your websites

In Detail

The template systems in TYPO3 make it one of the most powerful content management systems available today, but they seem too complex for many users. Site developers who are able to learn how to use them efficiently can build more extensible sites quicker and more customized for their users.

This book is a step-by-step guide for building and customizing templates in TYPO3 using the best solutions
available. It takes the readers through one complete example to create a fully functional demonstration site using TypoScript, TemplaVoila, and other core TYPO3 technologies.

This book starts with the basics of creating an example TYPO3 site before showing you how to add your own stylesheets and enhanced JavaScript to the template. You learn about the different types of menus and navigation, and you can try out each one with practical examples in the book. The book shows how to create multiple templates for sections or individual pages in TYPO3 and how you can make a new template completely from scratch for a newsletter. Just as importantly, you learn how to update the editing experience and impress your clients with a custom back-end. Finally, you will learn how to specialize for browsers and internationalize your TYPO3 site with simple template updates.

A step-by-step guide to creating and modifying templates with TypoScript and TemplaVoila


This book uses a clear, conversational style to teach everything from the simple to the complex in an easy-to-read narrative. The entire book goes through one complete example project to build a company website, and each chapter adds functionality to the final product as the readers learns about the concepts. Every concept and technique is reinforced with working example code, and illustrations and screenshots are used to explain even further when necessary.

Who this book is for

If you are a developer, designer, or a site builder who wants to get the most out of TYPO3 whether you are building multiple websites for clients or optimizing their company’s site then this book is for you.
It is written for new or experienced users at all levels, but some basic experience with TYPO3 editing and
installation is expected.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software