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

21. Januar 2011

Netbeans – immer für eine Überraschung gut

21. Januar 2011 - Geschrieben von Martin - 7 Kommentare


Netbeans überrascht mich doch immer wieder, eben habe ich ein Template entworfen, welches ich in selben Zug auch gleich mit Classes gefüllt habe und zack zeigt mir Netbeans diese im CSS Editor. Sogar mit Hervorhebung, wenn sie bereits niedergeschrieben wurden.

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.

20. Februar 2010

CSS Formular (form) Ecken abrunden

20. Februar 2010 - Geschrieben von Martin - Keine Kommentare

Überall im Internet tauchen nun Websites auf die ihre Ecken mittels CSS 3 abrunden. Doch viele davon verzweifeln an Formularen, wie

<input type='text' />
<input type='submit' />

Ich habe schon einige entdeckt, die eine extra class für solche Elemente erstellt haben, nur hat das den Nachteil, das man allen Eingabe Elementen auf der Webseite ein class=’input‘ mitgeben muss, deshalb hier nun der elegante Weg:

input[type=text], input[type=password], input[type=submit], textarea
{
  -moz-border-radius: 5px;
}

die 5px geben an, wie weit von der Ecke aus nach innen ein Bogen gemacht werden soll, je größer die Zahl, desto runder die Ecke.