History

How to use a custom page template

There have been many requests how to use a custom page template instead of the default fe_page template. Today I am going to show you how to integrate a template from OSWD (open source web design). Once you know how it works, you can also integrate YAML templates or create your own ones.

Watch this tutorial as a narrated screencast

Download a template file

I am going to use the Blue Freedom template to show you how it is done. First of all, please download the template and unpack the archive in your TYPOlight folder. Then, copy file templates/bluefreedom2/index.html to the templates directory and rename it to fe_bluefreedom2.tpl.

You should now have the following files and folders:

  • templates/fe_bluefreedom2.tpl
  • bluefreedom2/style.css
  • bluefreedom2/images

Customizing the template header

Next, we have to customize the template file meaning we have to add some wildcards that will be replaced with the TYPOlight content. We will do this step by step starting with the header.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Blue Freedom by minimalistic-design.net</title>
5 <meta http-equiv="Content-Language" content="English" />
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
8 </head>

There are a few things we have to change.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3 <head>
4 <base href="<?php echo $this->base; ?>"></base>
5 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
7 <link rel="stylesheet" type="text/css" href="bluefreedom2/style.css" media="screen" />
8 </head>

Basically, there have been three important changes. First of all, we have added the base tag that is required by TYPOlight.

<base href="<?php echo $this->base; ?>"></base>

Inside the base tag we are using a wildcard that will be replaced by the actual value later. If your PHP configuration supports short tags, you can also write:

<base href="<?=$this->base;?>"></base>

Second of all, we have replaced the original title with a wildcard as well, since we want TYPOlight to show the current Title of the Side and the page title instead of the default title.

<title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>

Third of all, we have set the correct path to the CSS file which is now at bluefreedom2/style.css.

Adding TYPOlight specific markup

If you want to use all TYPOlight functions (e.g. lightbox and table sort) you have to add some more tags which you can basically copy and paste from the default page template fe_page. The complete page head looks like this:

(The copyright of TYPOlight is now not needed anymore, because it will be created by the System.)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
 3 <head>
 4 <base href="<?php echo $this->base; ?>"></base>
 5 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
 6 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
 7 <meta name="description" content="<?php echo $this->description; ?>" />
 8 <meta name="keywords" content="<?php echo $this->keywords; ?>" />
 9 <?php echo $this->robots; ?>
10 <script type="text/javascript" src="plugins/tablesort/js/tablesort.js"></script>
11 <script type="text/javascript" src="plugins/mootools/mootools.js"></script>
12 <script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
13 <script type="text/javascript" src="plugins/ufo/ufo.js"></script>
14 <link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
15 <link rel="stylesheet" href="plugins/tablesort/css/tablesort.css" type="text/css" media="screen" />
16 <link rel="stylesheet" type="text/css" href="tl_files/bluefreedom2/style.css" media="screen" />
17 <?php echo $this->head; ?>
18 </head>

Customizing the template body

First of all replace the body Tag with this:

<body <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>

Now you can give every single Page in TYPOlight an own class, so you can handle diffrent Page-Looks in one Template ore everypage can have an other packground etc.

The next step is to add some wildcards to the body so TYPOlight knows where to put the content. The template uses four layout sections (header, middle, right and footer) which we are going to replace now.

1 <div class="header">
2 <h1><a href="#">Blue Freedom</a></h1>
3 <h2>Free xhtml/css Template</h2>
4 </div>
5 
6 <div class="breadcrumbs">
7 <a href="#">Home</a> &middot; You are here
8 </div>

We simply replace this code with

1 <div class="header">
2 <h1><a href="#">Blue Freedom</a></h1>
3 <h2>Free xhtml/css Template</h2>
4 </div>
5 
6 <?php echo $this->header; ?>

Following this principle, we then replace

 1 <div class="middle">
 2 
 3 <h2>Template dummy text</h2>
 4 
 5 Just to fill out empty space in the template I decided to write this and to add one of my previous templates here. There are direct links to view one of my previous templates live and live link to download it also ;) Anyway hope you like both this one and previous one. You can see all of my templates at 
 6 <a href="http://www.minimalistic-design.net">Minimalistic design</a> live.
 7 <br /><br />
 8 <img src="bluefreedom2/images/minimal.jpg" alt="Preview of Minimalistic Template" />
 9 
10 </div>

with

1 <div class="middle">
2 <?php echo $this->main; ?>
3 </div>

And last but not least we replace

 1 <div class="right">
 2 
 3 <h2>Navigation</h2>
 4 
 5 <ul>
 6 <li><a href="http://www.minimalistic-design.net">Minimalistic Design</a></li>
 7 <li><a href="http://www.oswd.org">Open Source Web Design</a></li>
 8 <li><a href="http://www.opendesigns.org">Open Designs</a></li>
 9 <li><a href="http://www.openwebdesign.org">Open Web Design</a></li>
10 <li><a href="http://www.iollo.com">Iollo's review highway</a></li>
11 <li><a href="http://www.historyexplorer.net">History Timelines</a></li>
12 <li><a href="http://www.quakerparrot.info">Quaker Parrot</a></li>
13 <li><a href="http://www.moneybookersclub.com">Moneybookers Club</a></li>
14 </ul>
15 
16 </div>

with

1 <div class="right">
2 <?php echo $this->right; ?> 
3 </div>

The complete body now looks like this:

 1 <body <?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
 2 <div id="wrap">
 3 
 4 <div id="top"></div>
 5 
 6 <div id="content">
 7 
 8 <div class="header">
 9 <h1><a href="#">Blue Freedom</a></h1>
10 <h2>Free xhtml/css Template</h2>
11 </div>
12 
13 <?php echo $this->header; ?>
14 
15 <div class="middle">
16 <?php echo $this->main; ?>
17 </div>
18 
19 <div class="right">
20 <?php echo $this->right; ?> 
21 </div>
22 
23 <div id="clear"></div>
24 
25 </div>
26 
27 <div id="bottom"></div>
28 
29 </div>
30 
31 <div id="footer">
32 Design by <a href="http://www.minimalistic-design.net">Minimalistic Design</a>
33 </div>
34 
35 <!-- indexer::stop -->
36 <img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
37 <!-- indexer::continue -->
38 <?php echo $this->mootools; ?>
39 
40 <?php if ($this->urchinId): ?>
41 
42 <script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
43 <script type="text/javascript">
44 <!--//--><![CDATA[//><!--
45 try {
46 var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
47 pageTracker._trackPageview();
48 } catch(err) {}
49 //--><!":http://dev.typolight.org/ticket/405])]>
50 </script>
51 
52 <?php endif; ?>
53 
54 </body>
55 </html>

Using the template as page layout

Now, we have to include the template into TYPOlight. I am going to modify the existing default layout instead of creating a new one. Please log in to the back end and open module page layout. Choose fe_bluefreedom from the Layout Template drop down list. Then, change the layout to a two column layout with the main column on the left side and add three modules:

Module Column
Breadcrumb navigation header
Articles main
Navigation right

Adjusting the style sheet

The last step is to adjust the style selectors since the blue freedom templates uses slightly different class and id attributes than TYPOlight. Please open the style sheet bluefreedom2/style.css in a text editor.

Replace selector

.breadcrumbs {

with

.mod_breadcrumb {

and replace

.middle h2 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h2 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}

with

.middle h1 { color: #3B6EBF; font-size: 16px; margin-bottom: 10px; margin-top: 10px;}
.right h1 { color: #3B6EBF; font-size: 14px; margin-top: 15px;}

and finally add those two lines:

.mod_navigation .submenu { display:inline; }
.mod_navigation .level_2 { margin-top:-18px; margin-bottom:-9px; }

View the result

Now open the front end preview and go to page index.php/academy.html. It should look like this:

OSWD template

I hope that you have enjoyed this tutorial and that it has given you an idea of how to create your own templates. If you have any questions, please post them in the forum.

--- Tutorial and screencast created by Leo

oswd_template.jpg - OSWD template (47.2 KB) leo, 08/15/2008 05:33 pm

Also available in: HTML TXT