9. November 2011

Joomla eigenes Basis Template – Teil 2

9. November 2011 - Geschrieben von Martin - 2 Kommentare

Im letzten Artikel habe ich die Entwicklung eines Basis Templates für Joomla begonnen, welches als Entwicklungsgrundlage für eigene Templates ganz dienlich ist.

Die tempalteDetails.xml
Wie ich bereits angesprochen habe ist die „templateDetails.xml“ zu vergleichen mit einer „manifest.xml“. Um es kurz zu machen Zeige ich euch einfach mal die fertige „templateDetails.xml“ die ihr nach belieben anpassen könnt.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
	<name>basis_template</name>
	<creationDate>2011-11-09</creationDate>
	<author>Dein Name</author>
	<authorEmail>deine@email.tld</authorEmail>
	<authorUrl>http://deinedomain.tld</authorUrl>
	<copyright>Dein Name 2011</copyright>
	<license>Deine Lizenz</license>
	<version>1.0.0</version>
	<description>Basis Template für eigene Entwicklungen</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
	</files>
	<positions>
		<position>sidebar</position>
		<position>footer</position>
	</positions>
</install>

Ich denke die meisten Knoten sind selbstverständlich, lediglich „files“ und „positions“ würde ich noch ein mal gern explizit ansprechen. Ach genau, „name“ muss exakt den Ordner Name beinhalten, also heißt euer Template Ordner „basis_template“ so muss auch „name“ genau so heißen.

<files>
	<filename>index.php</filename>
	<filename>templateDetails.xml</filename>
	<folder>images</folder>
	<folder>css</folder>
</files>

„filename“ springt direkt eine eine Datei an. „folder“ hingegen schnappt sich den ganzen Ordner mit Inhalt. Oft sieht man wie „verzweifelte“ Entwickler alle CSS und Bild Dateien von Hand mit „filename“ aufführen, aber warum kompliziert wenn’s auch einfach geht ;-)

<positions>
	<position>sidebar</position>
	<position>footer</position>
</positions>

Joomla holt sich von hier die verfügbaren Positionen, d.h. es werden in den Klappboxen nur die hier definierten Positionen angezeigt, das Template selbst wird nicht nach ihnen abgegrast!

Die templte.css – Struktur für unser Template
Bisher würde das Template nach gar nichts aussehen:


Nicht mal eine Struktur hat es, deshalb machen wir das nun mit CSS:

body {
	margin : 0;
	padding: 0;
}
 
#wrapper {
	width: 900px;
	margin: 0 auto;
}
 
#wrapper #header {
	width: 100%;
	height: 80px;
	background-color: #e5e5e5;
}
 
#wrapper #sidebar {
	float: right;
	width: 20%;
}
 
#wrapper #content {
	float: right;
	width: 80%;
}
 
#wrapper #footer {
	clear: both;
	width: 100%;
}


Das nun in die „template.css“ kopieren, abtippen oder wie es sein sollte. Selbst schreiben ;-) Here we go:

Okay nicht so der Brüller aber für ein Basis Template ausreichend, schließlich ist das hier kein Design Tutorial ;-)

Für Joomla publizieren
Packt einfach das Template Verzeichnis „basis_template“ als .zip. Das ist alles, nun könnt ihr das Tempalte in jeder Beliebigen Joomla Installation installieren.
Damit es nicht so leer wie bei mir aussieht, müsst ihr natürlich noch Module an die entsprechenden Positionen packen. Also z.B. eine Navigation an die „Sidebar“ Position, einen Footer Text an die Position „footer“, etc.

Und jetzt?
Jetzt könnt ihr das Template nach belieben anpassen, nur wem das jetzige noch zu unflexibel ist, sprich wer die Joomla Ausgabestruktur ändern möchte, der sollte den nächsten Teil lesen, in dem ich zeige wie man eigene Views erstellt und damit die Standard Views überschreibt.