Home Page Icon
Home Page
Table of Contents for
TYPO3 Templates
Close
TYPO3 Templates
by Jeremy Greenawalt
TYPO3 Templates
TYPO3 Templates
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
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
TYPO3 Templates
TYPO3 Templates
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset