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.

Installing Zen Wireframe

1) TYPO3 Pre Flight
Checklist Tutorial


2) Zen Wireframe
Extension Installation


3) Zen Wireframe
Template Installation


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.

Customizing Zen Wireframe for Derivative Templates

New to design? Need of a crash course in CSS? This tutorial is essential for customizing templates! Use the Firefox Web Developer Extension to locate CSS information. Note: Zen Wireframe v2.1 no longer uses the background masthead image.

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.




Configuring RealURL with CB RealURL

The Cannonbose RealURL Extension offers a fast turnkey solution for configuring Real URL and extension in minutes! CB RealURL uses its own realurl.php file for many popular TYPO3 extensions like tt_news, ab_downloads, and cal.

Step 1) Read the README.txt file for additional options and configurations.
http://typo3.org/extensions/repository/view/cbrealurl/current/info/README.txt/

Step 2) Install CB RealURL and Include CB RealURL in static (from extensions):



Step 3 ) Uncomment and configure your base config.baseURL in Zen Wireframe.

# uncomment if using RealURL
######################################
# config.baseURL = your-domain.com


TYPO3 Tutorials