15th of December, 2000
Copyright 2000-2002, Kasper Skårhøj, <kasper@typo3.com>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to Typo3
- a GNU/GPL CMS/Framework available from www.typo3.com
Welcome to this tutorial on setting up ordinary templates with Typo3. Originally Typo3 was designed to create templates with TypoScript which lets you wrap the content from the system in HTML-codes. This is not very easy to get a grip on, although TypoScript is very powerfull and still the backbone of Typo3 CMS.
This tutorial takes a simple page made with GoLive. It ships in a zip-file with this tutorial or can be downloaded from somewhere near...
- The first thing you should do is to install the standard Typo3 testsite and make that work.
- Then you copy the files and folders of this tutorial to the root of this testsite, except from "tmplpage.html" and "main.css" which you put into the "fileadmin/" folder. This file is the basic template for your website and must reside in this folder as Typo3 is supposed to access to that file.
Now you should login into Typo3 of the testsite (as admin) and create a new "Template" record on the page "Startpage". It looks like this:
Enter the title of the template. This is not shown anywhere, just a title. You may use the description field at the bottom for documenting your template. Enter a "Website title". This is shown before the page-title in the <title>-field of every page, so choose wisely (if you enter anything... optional)
Set the "Clear"-flags (ensures the TypoScript to clear any preceeding templates in the page-tree) and the "Rootlevel"-flag (to indicate that you want to let this template initiate a new root of a website).
In the "Setup"-field, enter this:
page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/tmplpage.html
This is TypoScript and it starts a new template by declaring a PAGE-object (page) and assigns the default type-number "0" to it. Then the template file is loaded as the input for a TEMPLATE content object placed in the cObject-array of the pageobject "page". Greek to you? Don't worry, you don't need to understand all details (which is why you read this tutorial, eh?)
The template should look like this now:
... and if you save the template and hit the frontend of the website you should see this:
Now this is exactly how the GoLive template looks, so that's perfect so far.
If you take a look at the HTML-code of the page, you'll see that the header-code of TypoScript is still inserted. There are two body tags and therefore we must conclude, that we're not finished yet.
I would definitely recommend that you keep the header code of Typo (although you may disable the header-output from TypoScript). I've already prepared the Golive template for this. Take a look at the position right after the body tag of the GoLive template. I've inserted a HTML-comment!:
.. and the same code is found in the very bottom of the document also. This is called a "subpart".
Modify the template-record inside of Typo3 to this :
page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {template = FILE
template.file = fileadmin/tmplpage.html
workOnSubpart = DOCUMENT_BODY
}
The new thing here is the addition of DOCUMENT_BODY. The rest is just a smarter way to write the TypoScript code...
Save the template and remember to "Clear all cache" (because you updated a template, you always need to do this!)
Reload the page and you'll see this:
Looks awful, you think. Me too, but there's a good explanation: By the addition of
workOnSubpart = DOCUMENT_BODY
... only the part of the template between comments is inserted on the page. This leaves the header code with eg the stylesheet definition behind.
Looking at the header code of the template-file from GoLive we find that these parts are the only ones of interest to us:
We compensate by adding this TypoScript to the template-record in Typo3:
page.stylesheet = fileadmin/main.css
page.bodyTag = <body background="Images/tile_bkgrnd.gif">
Save, clear all cache, view the page.
Much better.
