Martin Lantzsch
Software Entwickler
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.

9. November 2011

Joomla eigenes Basis Template – Teil 1

9. November 2011 - Geschrieben von Martin - Ein Kommentar

In der folgenden Serie werde ich euch anhand eines Praxisbeispiels zeigen wie man sich sein eigenes „Basis“ Template für Joomla schmiedet. Dieses Template kann dann später als Grundlage für eigene Entwicklungen verwendet werden. Meine verwendete Joomla Version ist übrigens 1.5, in wie fern man das auf andere Versionen abwälzen kann, weiß ich nicht.

Die Joomla Template Struktur
Die Templates werden bei Joomla – wie sollte es auch anders sein – im Unterordner „templates“ des root Verzeichnisses abgelegt. Jedes Template bekommt seinen eigenen Ordner in den später alle Stylesheets, JavaScript Dateien, Bilder und natürlich die Views kommen. Als Ausgangspunkt legen wir uns folgende Ordner an:

- templates
-- basis_template
--- css
--- images

Natürlich nützen uns die Ordner allein noch nichts, deshalb kommen hierzu noch folgende Dateien:

- templates
-- basis_template
--- css
---- template.css
--- images
-- index.php
-- templateDetails.xml

In den CSS Ordner kommt das Stylesheet namens „template.css“, in das Root Verzeichnis packen wir die „index.php“, welche später das HTML Gerüst beinhält und die „templateDetails.xml“, die Joomla benötigt um mit dem Template arbeiten zu können. Der images Ordner bleibt erst mal leer.

Das HTML Grundgerüst
Ich gehe jetzt einfach mal davon aus, das meine Leser ein Grundverständnis von HTML mitbringen, wenn nicht, solltet ihr euch erst mal in dessen Thematik einarbeiten.

Wir füllen nun die „index.php“ mit folgendem Inhalt:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
        <jdoc:include type="head" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1><?php $conf =& JFactory::getConfig(); echo $conf->getValue('config.sitename'); ?></h1>
            </div>
            <div id="sidebar">
                <jdoc:include type="modules" name="sidebar" />
            </div>
            <div id="content">
                <jdoc:include type="component" />
            </div>
            <div id="footer">
                <jdoc:include type="modules" name="footer" />
            </div>
        </div>
    </body>
</html>

Ist euch das zu schnell gegangen? Gut, dann noch mal langsam.

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

Dieses PHP Konstrukt verbietet den direkten Zugriff auf das „pure“ Template, indem es die Ausführung abbricht, wenn die Konstante „_JSEXEC“ nicht definiert ist.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Hier definieren wir den HTML Tag und geben ihm die Systemsprache mit, bzw. die Sprache, die der User im Joomla gerade eingestellt hat.

<jdoc:include type="head" />

Dieser Pseudo HTML Tag der Joomla Template Engine bindet alle Geschichten wie title Tag, JS Files, etc. automatisch ein.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />

Hier binden wir das System Stylesheet ein. Besonders ist der PHP Teil „$this->baseurl“, hier wird die URL zum aktuellen Joomla ausgegeben, gut zu wissen wenn man später selbst noch etwas einbinden möchte.

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Hier wird das Herzstück unseres Templates geladen. Das Stylesheet. Eigentlich wie oben, nur wird hier noch der Name des Templates verwendet um den richtigen Ordner zu finden „echo $this->template“

<jdoc:include type="modules" name="header" />

Der altbekannte Pseudo Tag mit anderen Attributen. Hier Laden wir den typ modules mit dem Name header. Das heißt, wir laden alle Module die im System an der Position „header“ Registriert sind.

<jdoc:include type="component" />

Hier rufen wir die Inhaltskomponente der aktuellen Seite auf. Also z.B. „com_content“, „com_contacts“, etc..

Was wir bisher haben
Jetzt haben wir ein eigentlich bereits Funktionsfähiges Template. Doch es fehlt noch die „tempalteDetails.xml“, die mit einer manifest.xml zu vergleichen ist. Hier werden alle verwendeten Dateien aufgeführt, im Template verwendete Positionen registriert, Authorangaben gespeichert und noch ein paar Schmankerl mehr. Doch das machen wir im nächsten Teil, der im Anschluss erscheint.

Joomla eigenes Basis Template – Teil 2

26. September 2010

WordPress Sidebar temporär ausblenden

26. September 2010 - Geschrieben von Martin - Keine Kommentare

WordPress, die meist genutzte Blogsoftware ist oft sehr eigenwillig und widerspenstig. Aber wenn man weiß wo man anpacken muss, ich das alles kein Problem.

Das Problem ist oft, das die Sidebar z.B. auf einer Formularseite oder neben einer Galerie sehr viel Platz einnimmt, welchen man mit dem Inhalt viel besser nutzen könnte.

Nun wollen wir die Sidebar z.B. für das Foto Album Modul ausblenden, hierzu öffnen wir mit dem Plugin Editor das Plugin Template (das ist das mit dem HTML Code) und fügen ganz oben folgenden Code ein:

<style type="text/css">
#sidebar { display: none; }
#content { width: 850px; }
</style>

Dieses Snippet müssen wir natürlich noch anpassen, aber nun erst mal die Erklärung was passiert. Sobald das Template nun von WordPress geladen wird, erkennt der Browser, das der Container mit der ID sidebar nicht dargestellt werden soll (display:none). Nun verschwindet zwar die Sidebar aber der Platz ist noch immer ungenutzt, dies ändern wir mittels der 2. Anweisung, der Content Container soll eine Breite von 850 Pixeln bekommen (das Entspricht beim Linux Doku Template Content- + Sidebar- Container). Diese Breite kann man über diverse Browser Erweiterungen (Stichwort Lineal) auslesen oder man nimmt sich die CSS Datei vor und rechnet selbst.

Allerdings funktioniert diese Lösung nicht bei allen Templates. Mit den gängigsten bei denen Inhalt und Sidebar nebeneinander stehen und kein fixed Hintergrundbild haben, dürfte es keine Probleme geben.