Our goal is to have a website for people to visit, and as such that website needs a frontend template where content will be displayed (TYPO3 can be used for other applications as well).
We will create a very basic template, which will allow us to see the results of the work in TYPO3 on the page. On a real project, you will probably be given a template by a designer.
Make sure to create a template directory under fileadmin, and create a file mainTemplate.html with the following contents:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Site template</title> </head> <body> <!-- ###DOCUMENT_BODY### begin --> <div id="container"> <div id="leftContent"> <!-- ###LEFT_COLUMN### --> Left Column Content <!-- ###LEFT_COLUMN### --> </div> <div id="centerContent"> <!-- ###CENTER_COLUMN### --> Center Column Content <!-- ###CENTER_COLUMN### --> </div> <div id="rightContent"> <!-- ###RIGHT_COLUMN### --> Right Column Content <!-- ###RIGHT_COLUMN### --> </div> <div id="borderContent"> <!-- ###BORDER_COLUMN### --> Border Column Content <!-- ###BORDER_COLUMN### --> </div> </div> <!-- ###DOCUMENT_BODY### end --> </body> </html>
Also, create a new CSS file in the same directory, called mainStyle.css with the following content:
#container {
width: 100%;
height: 100%;
}
#leftContent {
float: left;
width: 200px;
display: inline;
}
#centerContent {
float: left;
width: 500px;
display: inline;
}
#rightContent {
float: right;
width: 200px;
}
#borderContent {
float: right;
width: 200px;
}
Note
Case Sensitivity
Make sure you follow case sensitivity, as TypoScript code is case sensitive, and it doesn't see mainStyle.css as the same as mainstyle.css.
Come up with a convention for yourself. If you know all your names, follow camelCase, you will save yourself a lot of double checking and headaches when something doesn't work.
1. In the Template module, browse to the page you would like to be the root of the site. Create a new root template.
2. In the Includes tab, include the
styles.content(default) static template.3. In the
setupfield, add the following code:page = PAGE page.typeNum = 0 page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/templates/mainTemplate.html workOnSubpart = DOCUMENT_BODY subparts.LEFT_COLUMN < styles.content.getLeft subparts.RIGHT_COLUMN < styles.content.getRight subparts.BORDER_COLUMN < styles.content.getBorder subparts.CENTER_COLUMN < styles.content.get } page.includeCSS.mainStyle = fileadmin/templates/mainStyle.css
There is a lot that happens in just a few lines. Let's refresh your TypoScript knowledge.
page=PAGE creates a new top-level page object, and page.typeNum=0 assigns a page type of 0 that is the default. So, when you go to the page with no type argument, this page object will be used.
Note
Other type numbers can be used to display content in a different form. For example, different type value can render a page for mobile device, for print, or even as XML for external applications, such as RSS feeds.
In the earlier code, page.10=TEMPLATE defines a content object at position 10 in the content object array. When the page is rendered, the content objects are each rendered in numerical order. Page.10 is defined as a TEMPLATE content object, so it will take an HTML template file, and process it. Lines template=FILE and template.file=fileadmin/templates/mainTemplate.html define the location of the template file that will be loaded. workOnSubpart=DOCUMENT_BODY tells the page object to use the DOCUMENT_BODY subpart section of the template.
At this time, the template file will be loaded and output as it is. However, the following lines replace the respective subparts with output from each column:
page.10 { subparts.LEFT_COLUMN < styles.content.getLeft subparts.RIGHT_COLUMN < styles.content.getRight subparts.BORDER_COLUMN < styles.content.getBorder subparts.CENTER_COLUMN < styles.content.get }
This is possible because we included the styles.content static template.
What will happen now is TYPO3 will get a list of all content elements in each column, and render them, that is, it will convert content into HTML. It will then place the resulting HTML code in place of the subparts.
The design in mainTemplate.html is very simple—just HTML. We want to apply some styling to that structure. Line page.includeCSS.mainStyle=fileadmin/templates/mainStyle.css includes our CSS file, which does just that.
For more information about templates, you should read a detailed guide to templating in TYPO3: http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/current/ (Modern Template Building). We will briefly go through a few more features.
In the mainTemplate.html file, we have used four subparts. This lets us preview the file, and see exactly where the content will go once it is rendered. Subparts are defined by a unique marker, enclosed in HTML comment tags, and surrounding some text, as in:
<div><!-- ###TEMPLATE_SUBPART### --> Code that will be replaced <!-- ###TEMPLATE_SUBPART### --></div>
Sometimes, you just want content to be inserted into a specific point, in such a case, you can use a marker. A marker is similar to a subpart, but exists by itself and doesn't reside in an HTML comment:
<div>###TEMPLATE_MARKER###</div>
Subparts are also used by extensions, where the subparts contain markers. This may not be clear at this point, but after working with a few templates you will grasp the difference.
To include JavaScript files, add the following lines to TypoScript:
page.includeJS.someCode = fileadmin/templates/someCode.js
See TypoScript Reference (TSref) for more options: http://typo3.org/documentation/document-library/references/doc_core_tsref/current/