Joomla Template bearbeiten
Das Joomla Tutorial “Template bearbeiten” ist an die Anwender des Content Management Systems Joomla gerichtet, die ein bestehendes Joomla Template bearbeiten und damit etwas persönlicher gestalten wollen.
Wir vermitteln Ihnen hier eine Art spezielles Grundwissen in HTML und CSS, das Sie für die Bearbeitung eines Templates unbedingt benötigen. Sind Sie im Umgang mit Joomla und den genannten Programmiersprachen schon etwas sicherer und wollen vielleicht selbst mal ein Template erstellen, dann empfehlen wir Ihnen unser Tutorial „Joomla Template erstellen“. Dieses kann ebenfalls auf unserer Internetseite www.mambomamgo.com kostenlos heruntergeladen werden.
Wie bereits erwähnt, wir erstellen hier keine komplett neue, sondern passen eine beliebige Vorlage unseren Wünschen entsprechend an. Das bedeutet, dass wir Farben, Schriftarten, Schriftgrößen, Einstellungen für Hyperlinks, Überschriften o.ä. modifizieren.
Lassen Sie uns also zuerst mit der einfachen Bearbeitung des Aufbaus einer Seite beginnen. Wir verändern dazu den HTML Code der Datei index.php des gewünschten Templates.
Um Ihnen bestimmte Sachverhalte möglichst einfach erklären zu können, arbeiten wir mit einem unserer Templates.
| Tutorial Template bearbeiten – Bearbeitung des Aufbaus |
| Aufbau des Templates | |
| Um ein bestehendes Template erfolgreich zu verändern, sollten wir uns zuerst mit dessen Aufbau beschäftigen. In unserem Fall haben wir hier nur einen kleinen Auszug aus den Bereichen des zuvor genannten Templates. Der Bereich 1. ist kein eigenständiger Bereich, sondern nur ein Bild (top_left.gif) in dem Bereich mit dem Namen „top“, der sich aus 1., 2., und 3. zusammensetzt. Der Bereich, der mit der 3. gekennzeichnet ist, bildet jedoch einen Unterbereich zu „top“. Dieser trägt den Namen „date“. Der nächste eigenständige Bereich, ist der Bereich „path“, der die Kennziffer 10. trägt. Dieser hat ebenfalls einen Unterbereich, welcher „bottom_text“ heisst. Das Bild, das mit der 7. versehen ist, ist ein Hintergrundbild des Bereiches „path“. Weiter geht es mit einem Bereich, der sich aus drei anderen Bereichen zusammen setzt. Dieser Bereich hat den Namen „content_table“ und besteht aus den Bereichen „extra1“ (4.), „extra2“ (5.) und content (6.). Es folgt der Bereich mit der Kennziffer 8. und dem Namen „right“. Dann wäre da auf dem oberen Bild noch der Bereich mit der Kenziffer 9., dieser Bereich ist der „body“ der Datei.Zuletzt haben wir da noch den Bereich mit der Kennziffer 11. und dem Namen „bottom“. Dieser Bereich hat einen Unterbereich (12.), der den Namen „bottom_text“ trägt.Dann gibt es da noch einen Hauptbereich, dieser heisst „container“ und umfasst alle Bereiche. Um zu erfahren wie die Bereiche heissen und wie der eigentliche Aufbau eines Templates aussieht, schaut man sich einfach den Code zwischen den „body Tags“ (<body></body>) der jeweiligen index.php an.
|
 Bild 1
Bild 2 |
| Den Aufbau bearbeiten | |
| Machen wir die Bearbeitung des Aufbaus an einem Beispiel deutlich. Nehmen wir nun mal an, die Bereiche „extra1“ und „extra2“ sind für uns nicht relevant, und wir möchten, dass diese nicht angezeigt werden. Dazu gibt es zwei Möglichkeiten.Zuerst können wir die Module, die sich in den Bereichen befinden im Backend einfach ausschalten. Sehen Sie dazu die Bilder rechts. In Bild 3 ist zu sehen, wie wir – nachdem wir uns ins Backend eingeloggt haben – den Menüpunkt „Site Modules“ der Rubrik „Modules“ wählen. (Tipp: Im Quelltext der index.php kann man erkennen, welchem Bereich eine Modulposition zugewiesen wurde. An dieser Stelle steht dann etwas wie: <?php mosLoadModules ( “user1″ ); ?>) Danach ist dann unter anderem der Inhalt des 4. Bildes zu sehen. Hier wählen wir in unserem Fall das Modul aus, das im Bereich „extra1“ angezeigt wird. Das Modul trägt den Namen „Latest News“. Wir klicken also mit der Maus auf dessen Namen. Mit dem Modul „Popular“ verfahren wir entsprechend. |
 Bild 3
Bild 4 |
| Es öffnet sich dann die Seite, die auf Bild 5 zu sehen ist. Hier können wir unter anderem einstellen, ob das gewählte Modul im Frontend angezeigt werden soll oder nicht. Diese Möglichkeit heisst im Backend „Published“ (1). Wenn wir wollen, dass das Modul nicht angezeigt wir, wählen wir die Option „No“. Danach speichern wir die neuen Einstellungen, indem wir „Save“ drücken (2.). Das Vorgehen ist auch auf das andere Modul zu übertragen. |  Bild 5 |
| Auf Bild 6 sehen wir, wie sich die Veränderung der Einstellungen auf die Anzeige im Frontend ausgewirkt hat. Das Modul „Latest News“ an der Modulposition „user1“ im Bereich „extra1“ wird nun nicht mehr angezeigt. Dies trifft auch auf das Modul an der Modulposition „user2“ („extra2“) zu. Diese freien Plätze könnten jetzt von anderen Modulen genutzt werden.Nun kommen wir zu der zweiten Möglichkeit. In diesem Fall verändern wir den Quelltext der Datei index.php unseres Templates.Dazu öffnen wir zuerst die genannte Datei im Backend unserer Joomla Installation. |  Bild 6
Bild 7
Bild 8 |
| An dieser Stelle markieren wir das Kästchen vor dem Namen des Templates. In unserem Fall markieren wir das Kästchen vor dem Template „subway“ (1.). Danach klicken wir dann auf „Edit HTML“ (2.). Es öffnet sich dann das Fenster das teilweise auf Bild 9 zu sehen ist.Der markierte Code stellt den Bereich „extra1“ (das Modul „Latest News“) dar (1.). Wollen wir diesen Bereich entfernet markieren wir zuerst den HTML Code des Bereich und löschen diesen dann. Danach klicken wir auf „Save“ (2.). Der Code der an der in 1. markierten Stelle steht lautet: <div id=”extra1″> Der Code für den Bereich „extra2“ lautet: <div id=”extra2″> Dieser Code ist im Bereich „content_table“ zu finden.
|
 Bild 9 |
| Nachdem wir diesen Teil des HTML Codes gelöscht haben, sieht der Aufbau unserer Seite wie auf dem Bild 10 gezeigt aus. Auch hier fehlen die Module, die eigentlich an dieser Position zu finden waren. Im Gegensatz zur einfachen Ausblendung (wie zuvor beschrieben), kann dieser Platz aber für kein Modul mehr verwendet werden.Im ersten Fall können wir den Modulpositionen „user1“ und „user2“ also auch andere Module zuweisen.Sollten Sie nur eines der Module ausblenden oder nur einen Bereich löschen, kann es – ohne gleichzeitige Veränderung der CSS Datei des Templates – zu Layoutstörungen kommen. Damit wäre der Teil, der sich mit der Bearbeitung des Aufbaus befasst beendet. Wir stellen also fest, dass man den Aufbau eines Templates ganz bequem über das Backend der Joomla Installation bearbeiten kann. Änderungen sollten jedoch wohl überlegt sein. Sind Sie sich nicht sicher, ob Sie bestimmte Codezeilen einfach so löschen dürfen, benutzen Sie die Möglichkeit der Kommentare in HTML. Kommentare umschließt man mit den Zeichenfolgen „<!–“ und „–>“. Beispiel: <html> … |
 Bild 10 |
| Ändern wir nun mal den Hintergrund des Bereiches „body“. Wir weisen mal kein Bild zu, sondern legen schwarz (#000000) als Farbe fest.Der neue Code:
body{ Im Frontend sieht unsere Seite dann wie rechts (Bild 19) abgebildet aus. |
 Bild 19
|
| Verändern wir nun mal die Textfarbe des Textes im Bereich „path_text“. Bis jetzt sieht der Code dort wie folgt aus:#path_text{ padding-top:12px; padding-left:5px; } Der Befehl „padding-top:12px;“ sorgt für einen Abstand von „12px“ zum oberen Rand. Die Anweisung „padding-left:5px;“ weist dem Text einen Abstand von „5px“ Wir ändern jetzt einmal die Schriftfarbe in rot: #path_text{ |
 Bild 20
Bild 21 |
| Zuletzt ändern wir mal die Breite unserer Seite:#container { width:80%; background:#FCFCFC; border-left:4px solid #E6E6E6; border-right:4px solid #E6E6E6; } Der Befehl „width:80%;“ sorgt dafür, dass die Seite 80% des Browserfensters breit ist. Den folgenden Befehl kennen wir bereits. Die anderen beiden weisen dem Bereich Ränder (links und rechts) zu („4px“ breit in der Farbe „#E6E6E6“). Wir machen die Seite mal ein wenig schmaler: #container { Das waren jetzt mal einige wenige Beispiele wie Sie ein bestehendes Template ihren Vorstellungen entsprechend umgestalten können. Allgemein gilt, schauen Sie sich zuerst den Aufbau einer Seite an, wie heissen Tabellen, Tabellenzellen oder <div> Layer, wie sind diese aufgebaut und so weiter. |
 Bild 22
Bild 23
|
| Tutorial Template bearbeiten – Abschluss |
Wir hoffen dieses Tutorial konnte Ihnen dabei helfen ein bestehendes Joomla Template Ihren Vorstellungen entsprechend umzugestalten.
Sie habe gelernt, wie man den HTML Code der in Datei index.php ansehen kann und wie man den Aufbau der Seite durch Modifizierung dieses Codes verändern kann. Darüber hinaus haben Sie gelernt, wie man durch die Möglichkeit der Veränderung der Moduleigenschaften die Darstellung der Seite ein wenig verändern kann. Zum Schluss haben wir noch gelernt, wie man durch die Bearbeitung der CSS Datei (template_css.css) das Aussehen der Seite überarbeiten kann. Wir haben Ihnen dazu einige Beispiele gezeigt, die Ihnen das Vorgehen hoffentlich verdeutlicht haben. Sollte es Ihnen dennoch schwer fallen, die CSS Datei zu bearbeiten da Sie kaum oder gar keine CSS Befehle kennen, besuchen Sie doch einfach mal die Internetseite www.css4you.de . Sollten Sie Probleme mit den Farbangaben haben, holen Sie sich weitere Informationen auf www.webmart.de .