Hornford Associates: Typo3 Template

Typo3 Template

The Typo3 template record contains the instruction for rendering the website, which features it has, how it is configured, etc. A template record is always needed to start any new website in TYPO3 (using the default frontend engine).
Typo3 templates can be created entirely in Typoscript, or following this approach will use an HTML & CSS based shell to control the display of the site.

Precursor

Extension

Before proceeding with this section of the Howto the Auto-Template Parser Extension must be installed.
Directions to Install Extension (Auto-template Parser)

HTML-based template

Create an HTML/CSS-based template that structures your page the way you would like.
Upload it using the Back-end Module Filelist to a directory /fileadmin/template. Place any associated CSS and graphics in that directory or subdirectories under /fileadmin/template/.
We always create a /media directory for graphic images associated with the template.
It is a good idea to use the /div structure for creating separate blocks that you want Typo3 to be able to address.
NVU is a good open-source / cross platform (Macintosh / Linux / Windows) tool for creating your HTML-based template. We aren't fond of the CSS-editor as embedded in NVU - Nvu review

Template Creation

Initial Steps

Create a 'home-page' for your site with the Back-end Page module
With the 'home page' selected change to the Template module
Create a template
See the red-underlined below
Once created change to from Contant Editor to Info
See red underlined in top left below

Template Basics

You now have a template! Won't display what you want (Just Hello World!), but the big Typo3 error is gone from your site.
Alas, our work isn't done.
First basic editing

Pick a Template title. This is just an identifier for your template it isn't displayed anywhere.
Enter "Qillaq'
Create your website tite. This is the prefix of the page title. Look at your browser window you will see "Hornford Associates: Typo3-Template", 'Hornford Associates is the SiteTitle
Enter "Qillaq - Black & White Photography'
Description is used somewhere - don't know where
Enter "Fine Art Black & White Photography"
Resources are not used in this How-to
Skip
Constants
Skip
Setup is where you enter the instructions that make the frontend engine react in a certain way.
We'll be spending the bulk ofthis section here
Click on the Pencil Icon.

You will see

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

This block of TypoScript tells the Typo3 front-end to display 'HELLO WORLD!'

TypoScript Template Basics

First the basics

Enable the Auto-Parser
Tell the Auto-Parser where to find your template
Identify the parts youwant it to work on

Body
Header

Identify the Divs you want it to work on

DIV nav-toplevel
We will leave this fixed
DIV nav-main
Top navigation - skip right now
DIV content
Main content
DIV nav-bottom
Bottom navigation, match Top - skip right now
DIV nav-section
DIV nav-supp
DIV nav-announcement
News & notes - we'll link this to the right
DIV nav-testimonial
Testimonials - we'll link this to left
DIV nav-newsletter
News items - we'll link this to border

Show Typo3 where to find things like the CSS & Graphics
Show Typo3 where your favicon.ico file is
Enable Typo3's built-in spam protection
Tell the Auto-parser to generate content

DIV content
We'll skip the rest right now to make sure you have a minimally functioning template

# Configuring the Auto-Parser for main template:
#Note 1
plugin.tx_automaketemplate_pi1 {

#Note 2
# Read the template file:
content = FILE
content.file = fileadmin/template/index.html

#Note 3
# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {

BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = Title

TD.all = 1

#Note 4
#Note: Map these to the Divs you want manged by Typo3
DIV.id.nav-main = 1
DIV.id.content = 1
DIV.id.nav-supp = 1
DIV.id.nav-announcement = 1
DIV.id.nav-testimonial = 1
DIV.id.nav-newsletter = 1

}

#Note 5
# Prefix all relative paths with this value:
# Allows Typo3 to find things like the CSS & Graphics
relPathPrefix = fileadmin/template/

}

#Note 6
# Note: Locate your favicon
page.shortcutIcon = fileadmin/templates/favicon.ico

# Note 7
# Note: Spam Protection
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)

#Note: Auto-generated menus will be here
# Menu 1 cObject

#Note 8
#Note: Auto-generated content will be here
# Main TEMPLATE cObject for the BODY

temp.mainTemplate = TEMPLATE
temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1

# Select only the content between the -tags
workOnSubpart = DOCUMENT_BODY

#Note 8.1
# Substitute the ###content## subpart with some example content:
subparts.content < styles.content.get

}

# Main TEMPLATE cObject for the HEAD

temp.headTemplate = TEMPLATE
temp.headTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1

# Select only the content between the -tags
workOnSubpart = DOCUMENT_HEADER

}

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Copying the content from TEMPLATE for -section:
page.10 < temp.mainTemplate

# Copying the content from TEMPLATE for -section:
page.headerData.10 < temp.headTemplate

Congratulations, you have written your first Typoscript. If you can work with HTML, Typoscript is pretty straightforward.

: Initial Success

Typoscript Template Next Bit

: Page module in Back End - Click to Enlarge

In this section we will enable auto-generated menus and provide the ability to attach additional content to selected parts of the page.
Typo3's back-end is built around a columnar web-page model.

Menus

In the section above we added the DIVs nav-main & nav-bottom to the Typoscript template. These will be limited to top-level navigation. The DIV nav-supp will be used for second level navigation.

Front End Editing

To enable Front End editing add this line to the Setup field of your page template:

config.admPanel = 1

Content Sections

Typo3's columnar model provides 4 sections that content can be added to: 'Right', 'Left', 'Border' and 'Content'. We have already aligned 'Content' with the template's DIV Content. In this section we will align the other sections with other divisions. There may be more elegant ways of achieving this - but we don't know them and find this method very helpful. As Typo3 evolves there is a chance that this back-end structure may go away, if it does we will have to update our sites - we are counting on evolutionary conservatism.
In this section we will link 'Right' to DIV nav-announcement; 'Left' to DIV nav-testimonial and 'Border' to DIV nav-newsletter. 'Content' and DIV content are already linked.
Note: It will help confirm things are working as designed if you take a moment to enter some content in each of these sections

Creating Menus

Setting up the menus is fairly easy. We will take advantage of Typoscripts object structure. First, define a temporary menu object and align it with the DIV nav-main defined above. Then repeat this section for the matching DIV nav-bottom. Lastly, create a temporary menu object for the secondary menu items and align with DIV nav-supp.

Typoscript

Lots of problems

Paste

# Menu 1 cObject temp.menu_1 = HMENU # First level menu-object, textual temp.menu_1.1 = TMENU temp.menu_1.1 { # Normal state properties NO.allWrap =

| # Enable active state and set properties: ACT = 1 ACT.allWrap =

| } # Second level menu-object, textual temp.menu_1.2 = TMENU temp.menu_1.2 { # Normal state properties NO.allWrap =

| # Enable active state and set properties: ACT = 1 ACT.allWrap =

| }

Finished Product

If you want to cut-to-the-chase scene here is the finished Typoscript (only works with my template)

# Configuring the Auto-Parser for main template:
plugin.tx_automaketemplate_pi1 {

# Read the template file:
content = FILE
content.file = fileadmin/templates/index.html

# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:

elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = Title

TD.all = 1

DIV.id.left-menu = 1
DIV.id.page-title = 1
DIV.id.main-text = 1
DIV.id.right_quotes = 1
DIV.id.right_notes = 1
DIV.id.right_news = 1

}

# Prefix all relative paths with this value:
relPathPrefix = fileadmin/templates/

}

#New Login User Storage Location
plugin.tx_newloginbox_pi1.storagePid = 48

# favicon
page.shortcutIcon = fileadmin/templates/favicon.ico

# Spam Protection
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)

# RealURL
config.simulateStaticDocuments = 0
config.baseURL = 1
config.baseURL = www.hornfordassociates.com
config.tx_realurl_enable = 1
# config.uniqueLinkVars = 1
# config.linkVars = L

# Pathmenu Setup
temp.PATHMENU = HMENU
temp.PATHMENU {
special = rootline
special.range = 0|-1
1 = TMENU
1 {
wrap = |
NO.linkWrap = | >
CUR < .NO
CUR = 1
CUR {
doNotLinkIt = 1
linkWrap = |
}
}
}

# Menu 1 cObject
temp.menu_1 = HMENU

# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {

# Normal state properties
NO.allWrap =
# Enable active state and set properties:
ACT = 1
ACT.allWrap = }

# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {

# Normal state properties
NO.allWrap =
# Enable active state and set properties:
ACT = 1
ACT.allWrap = }

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1

# Select only the content between the -tags
workOnSubpart = DOCUMENT_BODY

# Substitute the ###left-menu### subpart with some example content:
subparts.left-menu < temp.menu_1

# Substitute the ###page-title## subpart with some example content:
subparts.page-title < temp.PATHMENU

# Substitute the ###main-text## subpart with some example content:
subparts.main-text < styles.content.get

# Substitute the ###right_quotes## subpart with some example content:
subparts.right_quotes < styles.content.getRight

# Substitute the ###right_notes## subpart with some example content:
subparts.right_notes < styles.content.getBorder

# Substitute the ###right_news## subpart with some example content:
subparts.right_news < styles.content.getLeft
}

# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {

# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1

# Select only the content between the -tags
workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Copying the content from TEMPLATE for -section:
page.10 < temp.mainTemplate

# Copying the content from TEMPLATE for -section:
page.headerData.10 < temp.headTemplate

Next: Typo3 Extensions

Installing and configuring extensions enables functionality that is not available within basic out-of-the-box Typo3

Next: Typo3 really cool features

There are a number of functions we use in Typo3 that maintained our interest in Typo3 despite the interface, limited introductory material, a large number of over-all annoyances and a vertical learning curve.

Back to Getting Started

Real Typo3 Help

If you are reading this page you are looking for Typo3 help.

When we have needed under-the-hood Typo3 assistance we have always gone to Cablan. Martin-Pierre Frenette runs a quality shop. We have received custom template development, custom extension development and general 'I'm stuck' assistance (Cablan bears no responsibility for this template design - we did it all ourselves). Deliverables have always been of the highest quality.

As of date of update (February 2009) the link to the contact information at Cablan is: www.cablan.net/contact+M55406beae55.html

Source

Derived from the " Modern Template Building, Part 1" tutorial and "Auto-parse Template" manual distributed with the Auto-parse Template extension. See Open Content licence www.opencontent.org/opl.shtml

Hornford Associates > Resources > How-to Library > Typo3 Startup >