TYPO3 Templates -- Table of Contents -- TYPO3 Templates -- Credits -- About the Author -- Acknowledgment -- About the Reviewers -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Errata -- Piracy -- Questions -- 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 -- 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 -- 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 -- 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 -- 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 -- 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 -- 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 -- 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 -- 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 -- 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 -- 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 -- Index.