Book Image

TYPO3 Templates

By : Jeremy Greenawalt
Book Image

TYPO3 Templates

By: Jeremy Greenawalt

Overview of this book

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

Related Content you might be interested in

Current Title:

Small book image
TYPO3 Templates
Jeremy Greenawalt
Nov, 2010 | 328 pages
No titles found
Table of Contents (18 chapters)
TYPO3 Templates
TYPO3 Templates
Credits
Credits
About the Author
About the Author
Acknowledgment
Acknowledgment
About the Reviewers
About the Reviewers
Preface
Preface
Free Chapter
1
Getting Started
Getting Started
Basic requirements
How templates were created
Introducing TemplaVoila!
Installing TemplaVoila
Creating a basic HTML template
Creating your first template with the TemplaVoila Wizard
The page tree
If something didn't work right
Adding content to our front page
Summary
2
Enhancing your Template with CSS
Enhancing your Template with CSS
Creating a basic stylesheet
Including stylesheets in TYPO3
Using default markup in TYPO3
Summary
3
Adding Custom Template Fields
Adding Custom Template Fields
Modifying the page metadata
Adding a banner
Adding the date to our template
Loading the date and time from the TypoScript template
Adding a dynamic logo
Summary
4
Creating Flexible Menus
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
Adding separators to menu items
Redesigning the text-based menus
Introducing graphic menus
Introducing GIFBUILDER
GMENU properties
Creating our first graphic menu
Creating a graphic menu with boxes
Using external images for menus
Other types of menus
Breadcrumb navigation
Pulling it all together
Summary
5
Creating Multiple Templates
Creating Multiple Templates
Creating new templates with sidebars
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 printable link
Summary
6
Creating a Template from Scratch
Creating a Template from Scratch
Designing the template
Creating the HTML template
Creating the data structure
Creating data structure elements
Mapping the template object
Creating a folder in the page tree
Setting the TypoScript values
Creating an example page
Summary
7
Customizing the Backend Editing
Customizing the Backend Editing
Updating the rich text editor
Customizing the Page module
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
Summary
8
Working with Flexible Content Elements
Working with Flexible Content Elements
Introducing flexible content elements
Creating our first flexible content element
Creating a flexible HTML wrapper
Creating a multi-column layout element
Extending the multi-column layout element
Creating a product display element
Summary
9
Creating a Mobile Website
Creating a Mobile Website
Introducing conditions
Testing browser compatibility
Creating a mobile version of your website
Adding a non-mobile link
Creating a mobile subtemplate
Redirecting to an external mobile site
Summary
10
Going International
Going International
Introduction to internationalization and localization
Adding localization to a website
Adding localization to pages
Translating content
Adding a basic language menu
11
Building Websites with the TemplaVoila Framework
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
Planning with the wireframe skin
Designing the page layouts
Utility FCEs
Creating a custom skin
Editing a skin
Adding special functionality
Adding content
Summary
TYPO3 Templates summary
Index
Index

Creating our first graphic menu

The first change we can accomplish is updating our main menu with a custom font and some rollover functionality. We can do that with minimum fuss, and it'll update our whole look nicely. I chose a freeware font from Larabie Fonts (http://www.larabiefonts.com) called Deftone because it'll show off GIFBUILDER, and my boss loves it. You can use any TrueType font file you would like, though. Some fonts seem to work better with ImageMagick then others, so you may need to experiment. In any case, let's start updating our menu:

  1. We need to change lib.mainMenu.1 = TMENU to lib.mainMenu.1 = GMENU to use the GMENU objects.

  2. We want a consistent height for our entire menu, so we'll enable useLargestItemY in our template:

    lib.mainMenu.1.useLargestItemY = 1

  3. Let's update the normal menu state first. We won't be using the div tags around our menu items, so want to add a class to our images:

    lib.mainMenu.1.NO.ATagParams = class="menu-link"

  4. We can set the background color and...

Previous Section
End of Section 14
Next Section