Template-Entwicklung für Joomla! 1.6

Des Kaisers neue Kleider
Kommentare

CSS-Dateien anlegen
Joomla! arbeitet mit dem Konzept der reservierten CSS-Klassen. Jedem Element, das von Joomla! automatisch generiert wird, werden standardmäßig bestimmte Klassennamen zugewiesen. Will

CSS-Dateien anlegen

Joomla! arbeitet mit dem Konzept der reservierten CSS-Klassen. Jedem Element, das von Joomla! automatisch generiert wird, werden standardmäßig bestimmte Klassennamen zugewiesen. Will man das Aussehen der Standardelemente verändern, müssen die Eigenschaften dieser CSS-Klassen angepasst werden. Dazu definiert man die neuen Eigenschaften in seinen eigenen CSS-Dateien, also beispielsweise in der template.css (Hier greift das Prinzip der CSS-Kaskade. Die in Ihren CSS-Dateien definierten CSS-Eigenschaften überschreiben dabei die Joomla!-Standardeigenschaften, da Ihre Dateien automatisch nach den Joomla!-eigenen CSS-Dateien geladen werden). Leider ist das Joomla! API sehr ungenau, was die vom System verwendeten Klassennamen betrifft. Um die Klassen zu ermitteln, hilft daher meistens nur ein Blick in den im Frontend generierten Quellcode.

Das Problem bei dem CSS-Konzept von Joomla! ist die automatische Zuweisung der Klassen. So weist Joomla! beispielsweise allen Menüs standardmäßig die Klasse module zu. Passt man die CSS-Definition für diese Klasse an, werden alle Menüs in der geänderten Form angezeigt, was so natürlich nicht immer gewünscht ist. Dieses Verhalten lässt sich anhand der Suffixe ändern, die im Backend den Modulen (hier also dem Menü) zugewiesen werden können (Abb. 1). Trägt man für ein Menü beispielsweise das Suffix –anmeldung ein, kann die CSS-Datei entsprechend ergänzt werden:

Abb. 1: Hier lassen sich die Suffixe zuweisenAbb. 1: Hier lassen sich die Suffixe zuweisen (Vergrößern)

div.moduletable-anmeldung {
   ...
}

Die CSS-Definition gilt dann ausschließlich für dieses Modul. Im vorliegenden Beispiel blieben also die anderen Menüs von dieser Definition unberührt.

Der Aufbau der templateDetails.xml

In der templateDetails.xml wird die Template-Logik festgelegt. Die Datei enthält die im Template verwendeten Positionen und Dateien. Eingeleitet wird die Datei mit einigen Metainformationen, über die das Template detaillierter beschrieben wird (Listing 1). Zusätzlich müssen sämtliche im Template verwendeten Dateien angegeben werden. Die Dateien müssen dabei jeweils in einem filename-Element stehen. Alle filename- und folder-Elemente sind von einem globalen files-Element umschlossen:

csshtmlindex.php template.css
Listing 1
PHP Magazin1.05.0Dezember 2010PHP Magazininfo@phpmagazin.dehttp://www.http://it-republik.de/php/Copyright (C) 2010 it-republik.de/php/

Ein Template des PHP Magazins

Die verwendeten Positionen: banner, breadcrumbs, bottom, left, right, search, footer, user1, user2, top

...

Hier gibt man die im Template verwendeten Verzeichnisse und Dateien an. Bei den folder-Elementen notiert man die Verzeichnisse. Die Dateien, die in diesen Verzeichnissen liegen, müssen hingegen nicht explizit angegeben werden. Alle Dateien, die nicht innerhalb der Verzeichnisse, sondern auf der obersten Template-Ebene liegen, müssen jeweils in einem einzelnen filename-Element stehen. Da es in diesem Zusammenhang erfahrungsgemäß immer wieder zu Missverständnissen kommt: Wirklich relevant ist der files-Bereich erst, wenn das Template über den Joomla! Installer installiert wird. Wenn Sie das Template hingegen manuell per FTP auf den Server kopieren, spielt es keine Rolle, wenn im files-Bereich nicht alle Dateien und Verzeichnisse aufgeführt sind. Dennoch sollte der files-Bereich im Allgemeinen aktuell gehalten werden, schließlich weiß man zumeist nicht, ob das Template in Zukunft nicht vielleicht doch per Installer installiert werden soll. Zwei weitere Bereiche der templateDetails.xml betreffen die im Template verwendeten Modulpositionen und gegebenenfalls die Parameter.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -