Templates

During this lengthy document you might have wondered time and again- how can I change that green background color? Or how can I put in myown logo. And the fonts - I want Times, not Arial and Verdana.
Beforewe look at these issues you must understand something fundamental abouthow most CMSs work: they separate content from presentation. This meansthe pages and content are stored in the database without any colors orfonts or background images attached to them. That information isinstead located in the template and stylesheets which normally apply tothe whole website when pages are shown. Thus a single change in thetemplate will affect the overall appearance of the website for allpages. This is a great and very important feature of a CMS! Just askpeople who made an html-file based website with 100+ pages and wantedto make a redesign...
Static and dynamic content
Consider the "FC Bigfeet" website:

Dynamicparts: On this website the menu (#1), the page headers (#2) and the"Last update" section (#4) are indirectly dynamic parts of the page.This means they change from page to page automatically. We cannotdirectly affect these items per page. They are dynamically programmedparts of the template.
However the content area (#3) is adirectly dynamic part of the page since this is where the page specificcontent is inserted. We can affect this by adding, removing andrearranging page content elements! This area is not at all a part ofthe template (excepts its formatting in colors and fonts) since wedirectly control it by the content elements.
Static parts: Apartfrom the dynamic parts the template consists always of the same logo(#5), the same background image (#6) and the same background color(#7). These parts are also a part of the template (like the indirectlydynamic parts) but they never change by any action. Always the same oneach page.
Template records?
So how does TYPO3 implement this principle? Well, you can read in-depth information about therecommended approach for professionally made website in the tutorial Modern Template Building.However this is written for people who are professionally working withweb design in teams with developers, designers etc. So the level is abit higher than this tutorial claims to be.
But the main pointis - the template record. This is a control element that instructsTYPO3 how to handle a certain branch of the page tree. If this seemslike an awkward approach to you at first then so be it - it‘s in facthighly consistent with what you have learned already and further itmakes perfect sense when you later wants to make many sites in the samepage tree including multiple templates etc.
If you look at thesimple FC Bigfeet website in our case notice that the root page of thewebsite contains such a template record:

Making changes to the template
Let’s try to change a few things in the template record, "NEW SITE, based on standard". Simply edit it:

Forstandard templates the "Constants" field is often the place to changevalues. Constants are later inserted in the Setup field and can beinserted many places. So one change to a constant may mean many changesdifferent places in the final TypoScript configuration code of thetemplate.
In our case, let’s add a red background color in the menu frame (see above).
After saving the template record, click "Clear all cache" in the "Admin Functions" menu:

Always do that if you edit template records directly (not needed when you use the Template module though).
The result is:

You can play with other values as well!
The constant editor
The better way to handle these changes is to use the Template module in the "Constant Editor" view:

Youcan access a lot of options here, there are visual explanations formost of them and you can select from various categories. You can alsofind the menu background colors listed here ("Basic" category):

Notice how this is really just a wizard that edits the constant from before called "menu.bgCol"!
Likewise you can easily change and upload images for use as logos or background images:

Herewe change the current background image to be the logo instead (#1) andwith the "Browse" button you can pick up a local image on your harddrive to use as a new logo - soon you will have a website for yourcompany and not a football club!
Now, there is no reasonfor telling you more about these features since they are pretty obviousand the only way for you to get acquainted with them is to use them,play with them, see what happens. So do that!
Configuring the front end user folder?
Rememberthe notice about the required change in the template before thefrontend user logins would work? This is the place to discuss that.
See,when the login form is rendered it needs to know in which page(sysFolder) to look for the users that are allowed to log in. This isdone by setting a constant - "styles.content.loginform.pid" - to theuid value of the sysFolder "Users".
In this example, the uid of the storage sysFolder is "14":

So all we need to do is set the number "14" in this field:

Thisfield is found among the 64 values listed under the CONTENT category ofthe Constant Editor. You can set the value manually in the "Constants"field as well of course.
The Setup field
Thebest way to edit a templates Setup or Constants field really is to usethe "Info/Modify" view. Here you get direct access to the fields fromthe template record. This is done as a help for developers who will beusing this a lot:

(Noticehow  there is a link (#1) below the menu block which directly pointsyou to editing of the full template record if you need it).
In the setup field you find a few lines:

Theseare clearly strange codes to you and they do require a manual and somebackground knowledge to get done right! So don‘t worry.
Thefirst line (#1) inserts an alternative sitemap to the default (which isquite boring), then a stylesheet is configured for the page (#2). Thisis used by the "mininews" plugin which has all it‘s formatting done byCSS (contrary to other parts of this standard template which is fromthe time where -tags were mainly used). Finally we findconfiguration for the newsletter plugin (#3). This was needed to makesure people didn‘t need to first receive an email with a link beforethey could subscribe. Then the danish language was configured (#4) andthe Login User Tracking feature enabled (#5).
This was just ashort description. Remember that these options does not speak forthemselves. You will need more knowledge from various source (like TSref)before you understand them fully. For now you can just conclude thatthe Setup field is apparently the place to add such stuff! And thisstuff is called TypoScript!
The Object Browser
As a final note to the Setup field (for now) I will introduce the Object Browser:

Thistool shows visually the object tree of the TypoScript from the Setupfield. If you noticed the TypoScript line for the danish languageconfiguration ("page.config.language = dk") you can clearly see thelogic of this tree view.
Notice that TypoScript is really not ascripting language with control structures but rather a declarationalconfiguration language which creates an information hierarchy usedinternally to instruct the template engine what to do and in whichorder - much like the Registration Database in Windows. If TYPO3 hasany scripting language it is PHP itself! Therefore TypoScript is not anew, proprietary technology that should have been XSLT instead or so -rather TypoScript is an unavoidable - and in that case brilliant -configuration language to bind external parts together (such ascontent, templates, PHP and XML or whatever). But well, you will haveto learn it of course. But there really is no alternative and thedegree to which you want to use TypoScript is partly up to you. But youwill know more from other tutorials about this.
Back to work: If you "Enable Object Links" (bottom of page) you can even change the values from this great visual overview:

Click the property you want to edit:

Change the value and save:

It‘s that easy!
Now,how could you know what this option means? Well, you will still need alittle more background knowledge but the TS wizard helps you with thesyntax when you know what to look for:
For the "page.config" object there are properties which can be displayed with the TSreference Wizard:

Inthe window that pops up you can now search for the object that you needthe property reference for. This is the part where you have to knowwhat applies to your specific object page (in our case "page.config"):

And the next screen will conveniently show you the properties.

In fact this information is drawn directly from the online manuals and could also have been found on typo3.org. Just look atthe CONFIG object in TSref.
TSref
TheTypoScript reference (TSref)is a very well known document in the collection of documents thatbelongs to TYPO3. It contains the description of all the TypoScriptobjects you can use to create templates in TYPO3. It‘s the manual onwhat content you can put into the Setup field of template records.
Beforeyou dive into TSref please notice that it only makes sense if you knowwhat  you are looking for already! It‘s a reference listing allproperties. So if you know which property to search for it‘s veryuseful - even indispensable!
TypoScript by Example
The better way to go if you want play around on your own isTypoScript by Example. This document contains a lot of examples arranged as mini-tutorials on TypoScript related topics.
Change template?
Wellin our case the FC Bigfeet template is based on the standard templatecalled "BUSINESS". This is where all the other configuration seen inthe object browser comes from!
You can see this structure with the "Template Analyzer" view in the Template module:

Allthe "elements" in this upside-down tree represent pre-made TypoScriptcontent for the template! So when you look at the Setup or Constantfield of the main template record "NEW SITE, based on standard" (#1)and think where all the real stuff comes from - that is the answer. Ithas been pre-included from static templates by the parser.
If you want to see the content for each element, just click its title.
Static templates
Thestatic template "styles.sitemap.gs" was included in order to get thenice tree-style sitemap on the web site. The static template file"Ext:da_newsletter_subscript..." was included to get the configurationright for the newsletter subscription (see the video previously).Finally the static template "template; BUSINESS" (standard template) isthe key element to our websites look.
All this is editable within the template record. Go to the list module and edit it:

Clearlythe "Include static" field contains the static templates as I told you(#1 and #2) and the "Include static (from extensions)" holds thereference to the static template file from the Newsletter extensions(#3). The checkboxes "Clear" and "Rootlevel" should normally just beset (#4) for main templates.
Generally static templatesare not used so much in professional websites made with TYPO3. Thereason is that such websites are normally custom work requiring customTypoScript code. Static templates contain general TypoScript and thatis very useful but also limited to some degree.
However in almostany template - even custom designs - a static template for renderingthe page content elements is included. This is done since creatingtemplates and rendering code for the total number of combinations ofcontent element is a very large job and therefore it make a lot ofsense to reuse code there!
Change template
Let’s tryanother standard template than the one called "BUSINESS". In the"Include static" field remove the BUSINESS template and add theCANDIDATE template instead:

Save the result, click "Clear All Cache" and check out the website:

Asyou can see the content elements are the same, the background color thesame, the stylesheet used for the news teasers is the same - but thetemplate is different! This is what templates do! They change theoverall structure of the website! This is how easy it would be to makea re-design of a 10, 100 or 1000 page website in TYPO3 - a singlechange in a template affects all pages!
Now in this new template there seems to be a feature we didn‘t have before. That is the border column.  We can put content here.
Content in multiple columns
Page TSconfig
Thefirst thing we have to do is to change the "Page TSconfig" option thatkeeps TYPO3 from displaying more than just the "Normal" content columnin the Page module. Edit the page header of the root page "FC Bigfeet":

Add ",3" to the list as shown here:

Thiswill instruct the Page module to display both the Normal (0) and Border(3) content column. If you want to know about possible options to set,click the "TS" button to the right. In the window that pops up, find"mod.SHARED":

Thiswill show you the property "colPos_list" including a description ofwhat it does. It even also allows you to click the property and it willbe transferred back to the TSconfig field.

Save the page header and go the Page module - you will now see an additional content column shown:

Now, try to add a content element here. Just click the "New" icon:

Then select an ordinary "Text" element type and enter some content:

Noticethe content of the field "Columns" from the secondary options of the"Type" field - it has the value "Border". This is precisely the settingthat will make this content element appear in the Border column and notthe Normal column! This field was preset before creation of this form.
Press"Save document and close" button. Back in the Page module you will seethe new content nicely presented in the right column as expected:

But it should also be displayed on the website at the right position! So check the frontend as well:

And that was the case right away!
Understanding "Page TSconfig"
Now,the little change we did in the "TSconfig" field of the root page wasquite interesting. This was a piece of configuration code which hadsome effect on how the backend works - in that particular branch of thepage tree! "Page TSconfig" is thus a powerful concept that allows youto fine tune the behavior of modules, Rich Text Editor and otherelements. The syntax of the codes you enter is TypoScript syntax - thesame as used for the template records. But it has nothing to do withtemplates in the frontend - only the configuration internally offeatures. Like you just saw - enabling another column for content inthe Page module!
If you want to know about theproperties of TSconfig you can find the reference for it on typo3.org. This particular option wasdocumented on this page (look  for the header "Shared options for modules (mod.SHARED)").
Verifying Page TSconfig
To view the page TSconfig settings for any point in the page tree use the Info module with the "Page TSconfig" view:

As you can see - same kind of tree structure shown as in the Object Browser.
Undo the template change
Beforewe continue let us reset the template to the BUSINESS type again. Ifyou didn‘t make any changes to the template record in the mean time wecan easily do this by just clicking the Undo button - that will restorethe previous state of the record in the database. Select "Edit" for thetemplate record:

After the screen has refreshed check the result. The previous setting of the static template box should be shown again:

(If this is not the case for you just make the change now manually).
You might also change the background color of the menu constant (menu.bgCol) back to #007000.
More info on theUndo/History feature in TYPO3 is available here.
Creating another website in the database?
TYPO3has the ability to create not just one website but any number ofwebsites in the same database! This is a powerful capability called"multi site". The principle is that a new website can start from anypage in the page tree and the way to indicate the starting page (rootpage) of a new site to TYPO3 is by inserting a template record!
Ifyou thought that template records are a strange approach to creatingtemplates then you should now see why they are a very efficientsolution to this problem - because the template record becomes thecontrol element you insert on a page to start new sites. Thus as soonas you need more than just one website in the page tree you need aconcept like this to make it happen!
Now, let’s try it in practice:
Creating a new branch
Firstyou create a new page under the current one, then add a few sub pagesto it. This is going to be the start of a fan club website:

The "Fan club" is your new root page for this site. Try to view it:

Not looking good:

Why?Well the answer is in the principle I told you about before - we havenot yet created a template record on the root page so TYPO3 knows thatthis is the root page! The easiest way to come about this is to fire upthe Template module, select the "Info/Modify" view and use the wizardthere:

Find a standard template you want as a basis of your new website:

Confirm the creation of the new template and go to the List module to verify the existence of the new template record:

Now the interesting moment comes - did this solve the problem? Hit the frontend again:

Andyes it did! Of course the pages are empty since no content exists yet.And the template must be configured with the "Constant Editor" withother colors etc. That is the next step now.
It is probably not asurprise to you that the page id sent to the browser was "34" - the idof the page from the site. But which one of the two websites in thedatabase will be displayed now if we do not send any id? The answer isthe first one - the "FC Bigfeet" site.
Well, if that is the case how do people every get to visit our new site? Read on...
Controlling multiple domains
Whenyou want to manage multiple websites inside your TYPO3 database yousimply make sure they have a separate domain each. For instance the "FCBigfeet" websites could have the domain "www.fc-bigfeet.com" and thefan club website could be "fanclub.fc-bigfeet.com" and also"www.fanclub.fc-bigfeet.com". The challenge now is to make sure thatpeople get to see the right thing when going to the right domain!
This is a three step process:
Make sure that the DNS of all domains point to your webserver (trivial, non-TYPO3 related issue)
Configure your web server to direct all requests for the three domains to the directory with the TYPO3-website (.../quickstart/) - now a visit to any of the three domains will end on the "FC Bigfeet" main site.
Finally create a domain record for each domain you want to end up on the "Fan Club" website.
This is done by adding a new element to the root page "Fan Club":

Then enter the main domain name:

Save the record.
Createanother one. This time for the alternative domain"www.fanclub.fc-bigfeet.com". Since this is basically a domain we usefor "safety" we want it to redirect to the "fanclub.fc-bigfeet.com"domain. This is done like this:

Save it and view the page in the list module:

Nicelythe two records are found in the List module display of the "Fan club"page elements. If you configured everything correctly a hit to"http://fanclub.fc-bigfeet.com" will show the new website and the"http://www.fc-bigfeet.com" URL will show the old one (default). Ofcourse it didn‘t work - unless you hurried to register these domainslately!
Behind the scenes this is what happens: TYPO3 detects thedomain name. Then it tries to look for a domain record. If such a oneis found (like "fanclub.fc-bigfeet.com") then TYPO3 locks itself tothat page as root page! This means that any request for page ids mustbe within the branch where the domain record was found! If a page idfrom the "FC Bigfeet" is requested on the domain"fanclub.fc-bigfeet.com" then TYPO3 will just show the front page ofthe "Fan Club" website!
Starting up new websites
Using the New template wizard
The feature "Create template for a new site" of the "Info/Modify" view is very practical for starting up new websites.

Ifyou just click it without selecting a standard template you will stillget a new template record - but without any standard template and witha few lines of dummy TypoScript content to get started. This is the waythe pros are normally starting up new custom made sites and then theywork from there with their knowledge of the TypoScript etc. This isprecisely the process suggested in the tutorial "Modern TemplateBuilding, Part 1".
Framework for new projects?
When youwant to start your own new websites you normally do it with a cleandatabase. If you want that - a totally clean database with no pages, nocontent and only one "admin" user - then download the"Dummy" package from typo3.org. This is designed as start-up framework for new projects.
Sinceyou are still a newbee with TYPO3 - or if you are just very lazy - youmight also start up new projects with the  "QuickStart" package - theone we are using here! The reason is that it already contains a bunchof users, a template, some content already in place etc. You would justhave to remove the template, make a new one, rearrange pages and addnew content while removing the parts you don‘t need. This is probably agood idea if you need to get started quickly.
Template disclaimer!
Sincethe "template" is the crucial point of your implementationpossibilities with a CMS it‘s very important to stress that thistutorial does not to any degree display the depth of possibilities withtemplates in TYPO3. On purpose I have used a very boring standardtemplate which has a touch of amateur look over it. That is fully onpurpose so we don‘t get lost in these issues. Remember, the point ofthis tutorial was to teach you principles of TYPO3. Those principlesalso apply for professional use of the product. But the implementationof templates will be much different.
So please notice: Thistutorial was based on a fully functional website with a templatealready in place! You have not (in details at least) learned how toimplement your own custom design. That is what all of the remainingtutorials is about (almost)  - so the "FC Bigfeet" site is only meantas an hands-on introduction - customizing templates is the big sciencenot covered here!
Facts about templates and possibilities
Just to nail it to your mind for sure, this are some facts about templates in TYPO3:
You can implement any design you like, the way you like.
You can have any number of menu levels.
You can have multiple sites, multiple templates.
You can have pages in any number of languages.
You can have multiple content areas (columns) on a page.
You can integrate all kinds of external data sources through PHP written plugins.
You can add any number of web applications to run on various pages in TYPO3.
You can extend everything with PHP (with full backwards compatibility!).
You can do anything - some things are just more straightforward (most typical things), other things are more tricky (less typical things).
If you need a look at thefeature list of TYPO3 you can find it here on typo3.com.
Develop professional websites with TYPO3?
The tutorial "Modern Template Building, Part 1"is the document to read if you want to get into the template buildingas it is recommended for newbees on a professional level. That documentis a sequel to this one so after finishing this tutorial, just go on tothat one!