Blog-Kategorien

Webdesign

Der Autor

lackner-joachim
Joachim Lackner
Webdesigner, Online Marketing
Spezialist, Coach und Familienvater

Mehr Infos zum Autor

Joomla! Tutorials

Webdesign Tutorials

Photoshop Tutorials

Tag Cloud

Social Media

         

Joomla! 1.5 Template selbst erstellen

joomla-templateFür Joomla 1.5 ein Standard-Template zu erstellen ist eigentlich relativ einfach.

Wie bei jeder anderen Homepage überlegt man sich vorerst den Aufbau, die Struktur und das Design der Homepage. Jedoch sollte man sich für ein Joomla!-Template auch gleich mit überlegen wohin denn was soll. D.h. man unterteilt seine Homepage in Bereiche und sagt dann Joomla! welches Modul oder welche Funktion in welchem Bereich erscheinen soll.

Hier mal ein Beispiel eines ganz einfachen Joomla-Templates:

 

 

Erstellung der Datei index.php

 

<html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" type="text/css" href="/templates/mein-template/css/template.css" />
</head>
<body>
<div id="banner">
<jdoc:include type="modules" style="xhtml" name="top" />
</div>
<div id="spalte-links">
<jdoc:include type="modules" style="xhtml" name="left" />
</div>
<div id="inhalt">
<jdoc:include type="component"  />
</div>
<div id="fusszeile">
<jdoc:include type="modules" style="xhtml" name="footer" />
</div>
</body>
</html>

Im großen und ganzen eine einfache html-Datei - bis auf die jdoc: Tags. Diese benötigt Joomla! um zu wissen wo sich denn welcher Bereich im Template befindet.

Das heißt jetzt in diesem Fall wir haben vier Modul-Positionen:
  • top: ganz oben im Banner (<jdoc:include type="modules" style="xhtml" name="top" />)
  • left: linke Spalte der Seite (<jdoc:include type="modules" style="xhtml" name="left" />)
  • footer: ganz unten in der Seite (<jdoc:include type="modules" style="xhtml" name="footer" />)

{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}
Die Modulpositionen kann man natürlich selbst bestimmen - Standardmodulposition sind: top, left, right, footer, user1, user2, user3, user4, user5, usw. Die verwendeten Positionen müssen natürlich in der templateDetails.xml angeführt werden. 

Das Attribut style ist optional und kann für einzelne Modultypen verwenden werden. Die Attribut-Werte werden als "chrome" - Styles bezeichnet. Steht kein Style-Attribut zur Verfügung so lautet der Default none. Dieses Attribut betrifft die Art des aus dem Modul gelieferten HTML-Codes.

  • table Ausgabe des Moduls in Tabellenspalten
  • horz Horizontale Ausgabe des Moduls in einer Zelle einer umgebenden Tabelle
  • xhtml Ausgabe in div-Element (XHTML-konform)
  • rounded Ebenfalls Ausgabe in div-Element mit der Möglichkeit Runde Ecken zu verwenden. Die Klasse des Elements ändert sich von moduletable zu module
  • none Ausgabe ohne Formatierung

 

Das <jdoc:include type="head" /> fügt im <head> Tag die notwendigen Tags wie title und meta ein.

Und <jdoc:include type="component" /> definiert wo sich der Bereich für Inhalt oder Komponenten befindet.

Erstellung des Stylesheets: template.css

Das Stylesheet des Templates kann natürlich beliebig erstellt werden sollte aber folgende Klassen standardmäßig enthalten:

  • .contentpaneopen (Inhaltsbereich)
  • .contentheading (Überschrift des Inhaltes)
  • .componentheading (Überschrift von Komponenten)
  • a:link.mainlevel, a:visited.mainlevel, a:hover.mainlevel (Links des Hauptmenüs)

Bilder des Templates

Die Bilder des Templates werden einfach in den Ordner images gespeichtert.

Die Datei templateDetails.xml

Diese Datei ist notwendig damit Joomla! die Template-Dateien als template erkennt und dieses dann verwendet werden kann. Der Aufbau einer einfachen templateDetails.xml schaut folgendermaßen aus:
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>MeinTemplate</name>
<creationDate>10 Mai 2010</creationDate>
<author>Joachim Lackner</author>
<authorEmail> Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann. </authorEmail>
<authorUrl>http://www.meine-homepage.at</authorUrl>
<copyright>Mein Name</copyright>
<license>privat</license>
<version>1.0.0</version>
<description>Template für mein eigenes Joomla! Template</description>
<files>
<filename>index.php</filename>
<filename>css/template.css</filename>
<filename>template_thumbnail.png</filename>
<filename>images/bild1.jpg</filename>
<filename>images/bild2.jpg</filename>
<filename>images/bild3.jpg</filename>
</files>
<positions>
<position>top</position>
<position>left</position>
<position>footer</position>
</positions>
</install>

Diese muss natürlich an die eigenen Bedürfnisse angepasst werden (sollte selbsterklärend sein) und in das selbe Verzeichnis wie die index.php gespeichert werden.

Erstellung des Vorschaubildes des Templates: template_thumbnail.png

Dieses Vorschaubild muss nicht kann aber erstellt werden, was bei einer Weitergabe von Templates natürlich dazu gehört, da es anderen hilft sich zwischen den installierten Templates zurecht zu finden. Die Größe sollte ca. 188 x 150 px betragen und die Datei sollte als png in das selbe Verzeichnis wie die index.php gespeichert werden.

Erstellung des Installationspaketes

Damit man dieses Template in Joomla! installieren zu können (über die Installationsfunktion von Joomla!) müssen einfach alle Dateien (index.php, templateDetails.xml, template_thumbnail.png, Ordner css, Ordner images) in ein ZIP-File gepackt werden.