In Teil 3 der Tutorial-Serie gehe ich auf das Thema Templateerstellung ein. Dieses Tutorial basiert auf der neuen Version 2.7. Für das Beispiel habe ich mir “BlueBusiness01” von Christian Pansch bei openwebdesign.org runter geladen.
Aber schauen wir uns erst einmal kurz das Templatesystem von TYPOlight an.
Das Templatesystem
TYPOlight hat einige Basis- bzw. Systemtemplates. Sofern kein eigenes Template definiert wurde, wird das entsprechende Systemtemplate – sofern vorhanden – verwendet. Unsere eigenen Templates liegen im gleichnamigen Verzeichnis der Installation.
Sofern nicht ein spezielles Template überschrieben werden soll, ist die Benennung im Grunde frei. Jedoch sollten Frontend-Templates mit einem fe_ beginnen, z.B. fe_startpage.tpl. In der Regel gibt es ein Frontend-Template, welches die Struktur der Seite beinhaltet. Soll die Startseite einen anderen Aufbau als die Folgeseiten haben, werden hierfür getrennte Templates erstellt.
Unter Umständen können spezielle Templates überschrieben werden. Beispielsweise das Template fe_news.tpl für einen Artikel aus einem Newsarchiv. Solche Templates beinhalten nicht die gesamte Seitenstruktur, sondern nur die Struktur des entsprechenden Elements und werden in das Basistemplate integriert.
Das Template
Beginnen wir mit dem Erstellen des Templates. Zunächst schauen wir uns das Layout an. Es besteht im wesentlichen aus dem Header, einer Hauptspalte auf der linken Seite, eine Seitenspalte rechts und dem Footer. Genau diese Bereiche – Header, Main, Right und Footer – stehen uns bereits zur Verfügung.
Wir erstellen nun eine Kopie der index.html und speichern diese im Verzeichnis /templates unter dem Namen fe_standard.tpl ab. Im Verzeichnis tl_files erstellen wir ein neues Verzeichnis bluebusiness. Hierein kopieren wir die Grafiken und Stylesheets des Layouts. Das Verzeichnis tl_files ist im Backend über die Dateiverwaltung pflegbar, weshalb es Sinn ergibt hier die im Template verwendeten Dateien unterzubringen. So kann später bequem eine Datei, z.B. die Headergrafik, ausgetauscht werden.
Nun bearbeiten wir die fe_standard.tpl und passen zunächst den head-Bereich an. Hier erstmal der Original Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BlueBusiness by christian-pansch.de</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Christian Pansch (www.christian-pansch.de)" />
<meta name="description" content="Design by christian-pansch.de" />
<meta name="keywords" content="xhtml,css,template,webdesign" />
<meta name="Robots" content="index,follow" />
<link href="bluebusiness.css" rel="stylesheet" type="text/css" />
</head>
Folgendens werden wir anpassen:
- Hinzufügen des base-Tags, da dieser von TYPOlight benötigt wird,
- den Titel der Seite mit Platzhaltern ersetzen,
- den Pfad zur CSS-Datei korrigieren und
- Platzhalter für Sprache und Zeichensatz einfügen.
Nachfolgend der angepasste Quelltext.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>" xml:lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->mainTitle; ?> | <?php echo $this->pageTitle; ?></title>
<meta http-equiv="content-type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="author" content="Christian Pansch (www.christian-pansch.de)" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<meta name="Robots" content="index,follow" />
<link href="tl_files/bluebusiness/bluebusiness.css" rel="stylesheet" type="text/css" />
</head>
Folgende Platzhalter wurden benutzt:
- $this->language
Dies wird durch die Sprache einer Seite ersetzt, z.B. de für Deutsch oder en für Englisch. - $this->base
Dieser Platzhalter wird mit der BASE-URL ersetzt, in unserem Beispiel http://example.org/ - $this->mainTitle
Dieser Platzhalter steht für den allgemeinen Seitentitel, der bei dem Startpunkt für unsere Website vergeben wurde. - $this->pageTitle
Titel der aktuellen Seite, z.B. Startseite. - $this->charset
Fügt den zu verwendenden Zeichensatz in das Template ein. - $this->description und $this->keywords
Diese beiden Platzhalter sind für die Meta-Beschreibung und Keywords. Sie dienen vor allem der Suchmaschinenoptimierung.
Wer den vollen Umfang von TYPOlight wie Lightbox oder Tablesort nutzen will, fügt noch die folgenden Zeilen in den head-Bereich ein:
<?php echo $this->robots; ?> <script type="text/javascript" src="plugins/tablesort/js/tablesort.js"></script> <script type="text/javascript" src="plugins/mootools/mootools.js"></script> <script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script> <script type="text/javascript" src="plugins/ufo/ufo.js"></script> <link rel="stylesheet" href="plugins/slimbox/css/slimbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="plugins/tablesort/css/tablesort.css" type="text/css" media="screen" /> <?php echo $this->head; ?>
Als nächstes kommt der body-Bereich. Als erstes ersetzen wird den body-Tag mit dieser Zeile:
<body <?php echo ($this->class ? ' class="' . $this->class . '"' : '') . ($this->onload ? ' onload="' . $this->onload . '"' : ''); ?>>
Nun können wir dem Body eine eigene CSS-Klasse zuweisen und zwar für jede einzelne Seite. Nun werden wir wieder ein paar Platzhalter im Template platzieren. Im div-Tag mit der ID container-header tragen wir unseren Slogan ein und ersetzen den Seitennamen mit $this->mainTitle. Das ganse sieht dann so aus:
<div id="container-header">
<div id="container-name"><?php echo $this->mainTitle; ?></div>
<div id="container-slogan"><span>"</span>Mein Slogan<span>"<div>
</div>
Beim nächsten div wird, mit Ausnahme der Grafik, der gesamte Inhalt ersetzt. Der folgende Quelltext-Part
<div id="container-eyecatcher">
<div id="container-navigation">
<ul id="navigation">
<li><a href="#">home<></li>
<li><a href="#">products</a></li>
<li><a href="#">services<></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">sitemap</a></li>
</ul>
</div>
<img src="images/business_eyecatcher.jpg" alt="Business picture" />
</div>
wird wie folgt abgeändert:
<div id=“container-eyecatcher“>
<?php echo $this->header; ?>
<img src="tl_files/bluebusiness/images/business_eyecatcher.jpg" alt="Business picture" />
</div>
Auf gleiche Weise verfahren wir beim Inhaltsbereich. Im div mit der ID content-content gibt zwei divs – content und border. Der Inhalt von content wird mit $this->main, der von border mit $this->right ersetzt. Zum Schluss der Footer. Hier ersteze wir den Inhalt von footer-copyright mit $this->footer. Das gesamte Template sieht nun so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang=“<?php echo $this->language; ?>“ xml:lang="<?php echo $this->language; ?>">
<head>
<base href="<?php echo $this->base; ?>"></base>
<title><?php echo $this->mainTitle; ?> | <?php echo $this->pageTitle; ?></title>
<meta http-equiv="content-type" content="text/html; charset=<?php echo $this->charset; ?>" />
<meta name="author" content="Christian Pansch (www.christian-pansch.de)" />
<meta name="description" content="<?php echo $this->description; ?>" />
<meta name="keywords" content="<?php echo $this->keywords; ?>" />
<meta name="Robots" content="index,follow" />
<link href="tl_files/bluebusiness/bluebusiness.css" rel="stylesheet" type="text/css" />
</head>
<body <?php echo ($this->class ? ' class="' . $this->class . '"' : '') . ($this->onload ? ' onload="' . $this->onload . '"' : ''); ?>>
<div id="container">
<div id="container-header">
<div id="container-name"><?php echo $this->mainTitle; ?></div>
<div id="container-slogan"><span>"</span>Mein Slogan<span>"</span></div>
</div>
<div id="container-eyecatcher">
<?php echo $this->header; ?>
</div>
<div id="container-content">
<div id="content">
<?php echo $this->main; ?>
</div><!-- CONTENT END -->
<div id="border">
<?php echo $this->right; ?>
</div>
</div>
<div id="container-footer">
<div id="footer">
<div id="footer-copyright">
© 2007 yourbusiness.com - all rights reserved. <a href="#">Terms of use</a><br />
<!--This theme is free for distriubtion, so long as link to openwebdesing.org and dubaiapartments.biz stay on the theme-->
Courtesy <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a>
<a href="http://www.dubaiapartments.biz" target="_blank"><img src="tl_files/bluebusiness/spacer.gif" width="5" height="5" border="0"/></a>
Thanks to <a href="http://www.dubaiapartments.biz/" target="_blank">Dubai Hotels</a>
</div>
<div id="footer-meta">
<a href="http://validator.w3.org/check?uri=referer">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
<a href="http://www.christian-pansch.de" title="Webdesign Bremen">Design by christian-pansch.de</a>
</div>
</div>
</div>
</div><!-- ENDE container -->
</body>
</html>
Damit hätten wir das Template an sich erstellt. Fertig sind wir jedoch noch nicht. Es müssen nun noch im Backend Module und das Seitenlayout erstellt bzw. festgelegt werden.
Module
Insgesamt müssen 2 Module angelegt werden – Hauptnavigation und Adressblock. Das Modul für Artikel, also dem eigentlichen Content, steht bereits standardmäßig zu Verfügung. Nach aufrufen des Moduls “Module” klicken wir auf “Neues Modul”. Hier geben wir als Titel “Hauptnavigation” ein. Das Feld für die Überschrift bleibt leer und als Modultyp wählen wir “Navigationsmenü”. Unter dem Formular-Bereich “Experten-Einstellungen” geben wir noch die ID “container-navigation” ein. Klick auf “Speichern und neu” und wir können das zweite Modul anlegen. Als Titel tragen wir den Wert Adressblock ein und wählen unter Modultyp “Eigener HTML-Code” aus. Nach dem speichern bekommen wir ein Textfeld, in dem wir unseren HTML-Code einfügen können – hier als Beispiel:
<h4>Unsere Adresse</h4> <address> Example<br/> Musterweg 2<br/> 12345 Musterstadt </address> <address> Telefon: +49 123 456789<br/> Fax: +49 123 456790 <br/><br/> E-Mail: <a href="mailto:info@example.com">info@example.com</a> </address>
Mit diesem Modul steht nun auf jeder Seite die Kontaktadresse. Nur noch speichern und wir haben erstmal unsere Module.
Seitenlayout
Als nächstes legen wir ein Seitenlayout an. Dazu klicken wir – wie gewohnt – unter “Seitenlayouts” auf “Neues Layout”. Als Titel geben wir “Standard” ein und markieren die darunter liegende Checkbox an. Durch diese Checkbox wird immer dieses Layout gewählt, wenn nicht ein anderes explizit beim Anlegen einer Seite ausgewählt wird.
Unter dem Abschnitt “Spaltenkonfiguration” wählen wir die dritte Option (Hauptspalte und rechte Spalte). Das Feld “Breite der rechten Spalte” belassen wir leer. Dies wird über die Stylesheet-Datei des Templates gesteuert.
Im Bereich “Frontend-Module” weisen wir nun die notwendigen Module dem Layout und ihrer Position im Layout zu. Als erstes wählen wir das Modul “Artikel” sowie die Spalte “Hauptspalte” und klicken auf das Plus-Icon. Diesen Schritt wiederholen wir mit den Modulen “Hauptnavigation” in der “Kopfzeile” und “Adressblock” in “Rechte Spalte”. Beim letzten Modul, das wir dem Layout zuweisen, brauchen wir nicht mehr auf das Plus-Icon klicken.
Unter “Experten-Einstellungen” versichern wir uns, das als Seitentemplate “fe_standard.tpl” ausgewählt ist. Hier können bei Bedarf noch die ID für Google Analytics, onload-Handler und zusätzliche Tags, die im head-Bereich des Templates stehen sollen, eingegeben werden. Mit “Speichern und schließen” schließen wir die Erstellung des Layouts ab.
Wer sich jetzt das Frontend ansieht, sollte schon das Template sehen. Wenn nicht sollte man prüfen ob die Rechte für das Template-File korrekt gesetzt sind. Weiter Hinweise erhält man, wenn in den Systemeinstellungen die Anzeige von Fehlermeldungen aktiviert wird.
Stylesheet-Datei
Als letzter Schritt müssen noch Anpassungen an den Styles vorgenommen werden. Zunächst ändern wir die Zeile
ul#navigation
in
#container-navigation ul
und alle Zeilen die mit #navigation beginnen in #container-navigation.
Ein erneuter Blick auf das Frontend lässt erkennen, dass das Template dem gewünschten Ergebnis zwar schon näher kommt, aber ein paar Kleinigkeiten angepasst werden müssen. Der aktive Navigationspunkt stimmt noch nicht ganz. Die Zeile #container-navigation li a wir wie folgt erweitert:
#container-navigation li a, #container-navigation li span
Dadurch reiht sich der aktive Menüpunkt optisch zu den anderen ein. Jetzt wird noch
#border p
in
#border p, #border address
geändert und folgende Angabe hinzugefügt:
font-style: normal;
Damit wird dann auch die Adresse in der rechten Spalte nicht mehr kursiv dargestellt.
Schlusswort
Unsere TYPOlight-Installation hat nun ein Template. Natürlich sieht die Seite noch sehr leer aus. Das wird sich mit dem Anlegen von Artikeln jedoch ändern 
. Damit beschäftigen wir uns allerdings erst im nächsten Teil.
Hi schönes Tutorial gefällt mir gut
noch ne frage ab tl 2.7 gibs doch kein p mehr das macht doch jetzt mit span und block oder is das bei border anders?
Auf was genau beziehst du dich? Also eine Änderung gibt es bei der Navigation, bei der aktive Menü-Elemente nicht mehr durch p- sonder span-Tags dargestellt werden.
Textabsätze werden jedoch weiterhin durch das p-Tag dargestellt.
Ah, gerade gefunden … genau so was habe ich gesucht. Vielen Dank dafür …
Hi!
Danke erstmal für dein Tutorial! Habe alles genauestens befolgt, allerdings zeigt er mir wenn ich fertig bin die Bilder der Seite (bluebusiness template) nicht an… hast du eine Idee an was das liegen könnte? Das Stylesheet wird übernommen…
Hallo,
spontan würde mir nur ein fehlerhafter Pfad zu den Dateien einfallen. Falls die Pfade zu den Grafiken stimmen, könnte es u.U. helfen wenn man absolute Pfade ins CSS schreibt.
Hallo Daniel.
Bin auf der Suche nach “Template erstellen für typolight” auf Dein Tutorial gestoßen.
Vielen Dank für Deine Mühe, es hat mir sehr geholfen mein ersten Design in Typolight umzusetzen.
Sehr gute Arbeit, mach weiter so!
Hallo Daniel,
vielen Dank für dieses wirklich informative Tutorial. War für mich das Tüpfelchen auf dem i, das noch für das Verständnis gefehlt hat.
Gruß,
Marcus
<address>ist nicht für die Auszeichung von physischen Adressen gedacht, vielmehr für die Kennzeichnung von URIs und E-Mails, also (Web)-Kontaktinformationen des Autors einer bestimmten Seite. Dazu die W3C-Specs: http://www.w3.org/TR/html4/struct/global.html#h-7.5.6
Trotzdem schönes Tutorial. Zeigt, wie simpel TYPOLight eigentlich ist. Arbeite gerne damit.
Danke für den Hinweis. Semantisch ergibt meiner Meinung nach die Verwendung von
.
<address>für Adressen jeder Art dennoch SinnSuper Tutorial.
Habe jetzt aber noch ein Problem, weil bei mir in der Hauptnavigation jetzt ein Link “Navigation überspringen” angezeigt wird, aber die Titel aus der Seitenstruktur nicht; die Links auf die Seiten gehen aber.
In dem Code für das gesamte Template fehlt überhaupt noch die Ersetzung in footer_copyright und in container_eyecatcher fehlt der Link auf das Bild.
Ich habe mal meine Testinstalltion aktualisiert. Der Link “Navigation überspringen” wurde anscheinend mit einem Update eingeführt. Um den Link auszublenden einfach das CSS-File um
.invinsible { display:none; }erweitern. Damit bleibt auch der Sinn des Links erhalten: das Überspringen der Navigation in Screenreadern. Alternativ könnte man sein eigenes Navigations-Template erstellen.Der Inhalt von footer_copyright wurde bewusst nicht ersetzt, da das Design nicht von mir stammt
Schönes Tutorial zur Erstellung eines eigenen Templates, aber vielleicht solltest du noch erwähnen, dass es oft nicht nötig ist, ein eigenes Template zu erstellen, da die vorhandene Seitenvorlage fe_page.tpl für die meisten Zwecke völlig ausreicht. Erleichtert den Einstieg
Siehe auch Forumsbeitrag in der Tl-Community:
Wichtig für Beginner: Kein eigenes Template
Pingback: Typolight Template Howto