History

Anleitung zur Nutzung eigener Seitentemplates

Es gab viele Anfragen, wie man eigene Seitentemplates nutzen kann, anstelle des standard fe_page templates. Heute möchte ich zeigen, wie sich ein template von OSWD (open source web design integrieren lässt. Wenn du verstehst, wie das funktioniert, kannst du ebenso YAML templates integrieren oder eigene entwerfen.

Wirf einen Blick auf dieses aussagekräftige Screencast Tutorial

Herunterladen der Template Dateien

Ich wähle das Blue Freedom Template, um zu zeigen wie das geht. Zuallererst, lade bitte das Template herunter und entpacke das Archiv in deinen TYPOlight Ordner. Dann kopiere die Datei templates/bluefreedom2/index.html in das templates Verzeichnis und benenne es um in fe_bluefreedom2.tpl.

Du solltest nun folgende Dateien und Ordner haben, die du folgendermaßen hochlädst:

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

Anpassen des Templates Kopfes

Als nächstes werden wir die Template Datei anpassen, das heisst, wir müssen einige Platzhalter einfügen, welche durch den TYPOlight Inhalt ersetzt werden. Wir machen das Schritt für Schritt, beginnend mit dem Kopf.

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="../tl_files/bluefreedom2/style.css" media="screen" />
8 </head>

Hier sind ein paar Dinge, die wir ändern.

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>

Grundsätzlich, handelt es sich um drei wichtige Änderungen. Zuerst fügen wir den Base-Tag hinzu, der von TYPOlight benötigt wird.

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

Innerhalb des Base-Tags nutzen wir wieder einen Platzhalter, der später vom aktuellen Wert ersetzt wird. Falls deine PHP Konfiguration kurze TAGS unterstützt, kannst du es auch so schreiben:

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

Als nächstes ersetzen wir den original Titel wie gewohnt mit Platzhaltern, falls wir möchten, dass TYPOlight den Seitennamen und die aktuelle Seite anstelle des Standard Titels ausgibt.

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

Hinzufügen von TYPOlight spezifischen Code

Wenn du alle TYPOlight Funktionen (z.B. Lightbox und sortierbare Tabellen) nutzen möchtest, musst du ein paar weitere Tags hinzufügen, die im Grunde genommen vom standard Template (fe_page) via copy & paste übertragen werden können. Der vollständige Seitenkopf sieht etwa so aus:

 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 
 4 <head>
 5 <base href="<?php echo $this->base; ?>"></base>
 6 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
 7 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
 8 <meta name="description" content="<?php echo $this->description; ?>" />
 9 <meta name="keywords" content="<?php echo $this->keywords; ?>" />
10 <?php echo $this->robots; ?>
11 <script type="text/javascript" src="plugins/tablesort/js/tablesort.js"></script>
12 <script type="text/javascript" src="plugins/mootools/mootools.js"></script>
13 <script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
14 <script type="text/javascript" src="plugins/ufo/ufo.js"></script>
15 <link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" />
16 <link rel="stylesheet" href="plugins/tablesort/css/tablesort.css" type="text/css" media="screen" />
17 <link rel="stylesheet" type="text/css" href="tl_files/bluefreedom2/style.css" media="screen" />
18 <?php echo $this->head; ?>
19 </head>

Anpassen des Haupttemplates (body template)

Zuerst wird der <body> - Tag ersetzt, um in TYPOlight auch alle Features nutzen zu können (wie jeder Seite eine eigene Klasse geben etc.):

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

Der nächste Schritt ist nun, verschiedene Platzhalter dem Hauptbereich zuzuordnen, damit TYPOlight erkennt, wo der Inhalt dargestellt werden soll. Das nutzt vier Layout Bereiche (header, middle, right und footer), welche wir nun ersetzen:

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>

Wir ersetzen ihn ganz einfach mit:

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; ?>

Nach diesem Prinzip ersetzen wir

 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>

mit

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

Und schlussendlich ersetzen wir

 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>

mit

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

Damit man jetzt noch mootools und die Goolge-ID richtig Nutzen kann muss noch vor den schließenden </body> dies hier mit rein:

<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
<?php echo $this->mootools; ?>

<?php if ($this->urchinId): ?>

<script type="text/javascript" src="<?php echo $this->urchinUrl; ?>"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
try {
var pageTracker = _gat._getTracker("<?php echo $this->urchinId; ?>");
pageTracker._trackPageview();
} catch(err) {}
//--><!]]>
</script>
<?php endif; ?>

So dass der vollständige Body so aussieht:

 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 //--><!]]>
50 </script>
51 
52 <?php endif; ?>
53 
54 </body>
55 </html>

Einrichten des Templates als Seitenlayout

Nun müssen wir das neu erstellte Template nur noch in TYPOlight einlesen. Ich werde das bestehende standard Layout überschreiben, statt ein Neues zu erstellen. Bitte logge dich dazu in der Administration (Backend) ein und öffne das Modul "Seitenlayout". Editiere das Standard Layout und wähle unter Layout Vorlage fe_bluefreedom2. Danach verändere das Layout in ein zwei Spalten Layout mit der Hauptspalte auf der linken Seite und füge diese drei Module hinzu:

Breadcrumb navigation header
Articles main
Navigation right

Verändern des Stylesheets

Im letzten Schritt müssen die Style Selektoren angepasst werden, da die blue freedom Templates ein Wenig unterschiedliche Klasse und ID Attribute nutzt, als TYPOlight. Bitte öffne das Stylesheet bluefreedom2/style.css in einem Texteditor.

Ersetze Selektor

1 .breadcrumbs {

mit

1 .mod_breadcrumb {

und ersetze

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

mit

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

Als letzten Schritt füge noch diese zwei Zeilen hinzu:

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

Betrachte das Ergebnis

Nun öffne die Frontend Voransicht und wechsle auf die Seite index.php/academy.html (bei nicht aktivem URL Rewrite). Das Ergebnis sollte etwa so aussehen:

OSWD template

Ich hoffe, das Tutorial hat dir gefallen und du hast nun eine Vorstellung von der Umsetzung eigener Templates. Wenn du Fragen hast, stelle sie bitte im Forum.

--- Originaltutorial und Screencast wurden erstellt von Leo, übersetzt von Carino

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

Also available in: HTML TXT