Zen Wireframe TYPO3 Template Tutorials
The Zen Wireframe TYPO3 template tutorials are essential if you are new to TYPO3 and using Zen Wireframes to get your projects up and running fast with minimal issues.
Before getting started, please be sure to view the pre flight checklist to insure your installation of TYPO3 is working properly. This includes checking for proper folder permissions, a database check and other criteria. The Flash tutorials are recommended if you are new to TYPO3. If you are not new to TYPO3 or in a hurry, use the shorter PDF tutorials.
Note: The tutorial section uses examples of TYPO3 4.1.x Backend and Zen Wireframe v.2.01. The general principals still apply to the newer TYPO3 4.2.x Backend. Tutorials will be updated as time and funds permit. Please be sure to read README.txt and ChangeLog.
Installing Zen Wireframe
TYPO3 for Dummies: TypoScript, putting it all together
This tutorial is an essential crash course in the TypoScript Templates / snippets used in Zen Wireframe. The tutorial provides an overview of how TypoScript templates are used to configure extensions, XHTML templates, menus, global settings and more.
960 Grid System CSS Framework
Zen Wireframe v3.x introduces the 960 Grid System CSS framework for creating new templates. Grids streamline and standardize web development workflow by providing commonly used dimensions.
For more information about the 960 Grid System, demos and templates, please visit these links.
Activating RealURL
- Install RealURL
- Copy zwire.3.0/realurl_conf.php to typo3conf/realurl_conf.php
- Uncomment (remove #) the RealURL TypoScript in Root TS Template Setup code.
Header Graphic, Footer and TypoScript Subparts Markers
Note: As of Zen Wireframe v3.0, the Border Column is currently being used to store content elements used for subpart markers ###HEADERGRAPHIC### and ###COPYRIGHT-LINKS### to render content in our HTML templates. You can alternatively use a separate page for this and new subpart markers.
# Header Graphic
#######################################
page.1 {
subparts.HEADER-GRAPHIC = RECORDS
subparts.HEADER-GRAPHIC {
source = 91
tables = tt_content
}
}
# Copyright Links
#######################################
page.1 {
subparts.COPYRIGHT-LINKS = RECORDS
subparts.COPYRIGHT-LINKS {
source = 90
tables = tt_content
}
}
Alternatively, if you want to change the Header Graphic for each of the parent page branches, you could add a new TypoScript template to "over ride" the root template + Template TS Markers like this using the HTML cObject (TEXT works too) to insert the image path to your new Masthead Graphic.
# Masthead Graphic
#######################################
page.1 {
subparts.HEADER-GRAPHIC = HTML
subparts.HEADER-GRAPHIC.value (
<img src="fileadmin/templates/zwire/images/new-masthead.jpg" width="940" height="140" alt="" />
)
}
We'll use the Directories page for this example to show how it effect all of its parent page branches. We'll begin by adding a new TypoScript Template in Web > List. First Create new record.
Next click Template.
Create a Title for the TS Template and add the following TypoScript in Setup:
Now save your TypoScript template and Clear cache and you're done!
Web Developer Firefox Add-on
The easiest way to find out which CSS classes and IDs are responsible for controlling templates 1column.html, 2column-style1.html, 2column-style2.html, 2column-style3.html and 3column.html, is to use the Web Developer Firefox Add-on.
Once the Add-on is installed, use CSS > View Style Information Ctrl + Shift + Y to hover over the area of the template you need CSS information about and click on it. This will pull up all relavent stylesheet information.
