| Joomla-Templates selbst bauen |
|
|
|
| Freitag, 10. August 2007 | |
 Früher oder später kommt so mancher Betreiber einer Joomla-gestützten Website auf den Wunsch, seinen Seiten ein eigenes, maßgeschneidertes Aussehen zu verleihen.Um dieses Vorhaben auch in die Tat umsetzen zu können, erfordert es die Kenntnis einiger theoretischer Grundlagen, wie z.B. dem Aufbau einer Template-Struktur oder der Verwendung der Joomla-typischen Funktionen für Layout und css-Formatierung. Hier hilft Ihnen die Suche nach den passenden Informationen im Internet, oder dieser Artikel... ►Voraussetzungen
Ein Joomla-Template setzt sich im Wesentlichen aus den Dateien "index.php" (Layout), "template_css.css" (Stylesheet mit Formatierungsanweisungen, Layout), "templateDetails.xml" (Installationsanweisungen, Templatename, Copyright, etc), "template_thumbnail.png" (Screenshot des fertigen Layouts) zusammen. Die Ordnerstruktur sieht dabei so aus: Ihre Joomla-Installation - templates -- Name des Templates --- index.php --- templateDetails.xml --- template_thumbnail.png -- includes --- footer.php -- css --- template_css.css --images --- Ihre Grafiken hier ►Template erstellen Machen Sie sich zunächst Gedanken um Ihr Layout: - Wie viele Spalten? - Was sitzt wo? - Farben? Es hat sich als günstig erwiesen, das Layout zunächst grob auf einem Blatt Papier zu skizzieren. Wenn Sie wissen, wie Ihr fertiges Layout aussehen soll, erstellen Sie zunächst lokal die Ordnerstruktur (s.o.) und die Dateien "template_css.css" und "templateDetails.xml" am vorgesehen Platz in der Ordnerhierarchie. ♦Tipp: Sie können diese Dateien erstmal aus einem bestehenden Template in Ihre Ordnerhierarchie kopieren, um sie dann später entsprechend anzupassen! Legen Sie nun die Datei "index.php" an und hauchen ihr Leben ein: Legen Sie den Seitenaufbau anhand von Tabellen oder DIVs gemäß Ihren Vorstellungen an, und platzieren Sie die Joomla-Anweisungen für Kopf- und Fußbereich, Menüs etc. entsprechend. Benutzer von ®Macromedia/Adobe ™Dreamweaver haben es hier einfach: Mit der Erweiterung Dreamweaver Extension geht das ziemlich zügig mittels der "Mambo Extension"-Leiste! Einen grundlegenden Workshop (in englischer Sprache) zur Arbeit mit der Dreamweaver Extension finden Sie hier. Erstellen Sie die Grafiken, welche Sie in Ihrem Template verwenden möchten (Logo, Hintergründe, Plathalter, usw.), im Pfad unter /images. Bearbeiten Sie nun die Datei "template_css.css" gemäß Ihren Vorstellungen. Gute Workshops zum Thema CSS finden Sie hier und hier. Wenn Sie glauben, dass Ihr Layout nun gut aussieht, wird es Zeit für einen ersten Test. Öffnen Sie hierfür zunächst die Datei "templateDetails.xml" im Editor und verändern Sie nach Ihren Wünschen. Vergeben Sie einen eindeutigen Namen für Ihr Template, und - ganz wichtig - fügen Sie unter "files" die Pfade Ihrer Grafiken hinzu, nachdem Sie nicht Verwendete gelöscht haben. Fügen Sie gegebenenfalls auch noch den Pfad zu Ihrer "footer.php" ein. Speichern Sie die Datei und erstellen jetzt ein erstes Installationsarchiv. Unter Linux mache ich das so: cd /Pfad_zum_Template zip -r meinTemplate.zip * Falls Sie noch Windows verwenden, können Sie auch Winzip oder besser das freie 7zip verwenden. Bei letzterem müssen Sie die Art des Archives noch auf "zip" umstellen! So, jetzt muß das Template noch auf Ihrem Testserver installiert werden: Gehen Sie dazu ins Backend Ihrer Joomla-Installtion, öffnen Sie die Installationsroutine für Seitenlayouts im Admin-Bereich, und laden Sie ihr gezipptes Template hoch. Danach setzen Sie es auf "default" und schauen es sich erstmal in einem 2. Browserfenster an. Spielen Sie die Seite durch: Ist alles wunschgemäß? Wenn ja, gehen Sie zurück auf die Startseite Ihrer Website und machen Sie ein Bildschirmfoto (Screenshot), am Besten im Format ".png" oder ".gif". Diese Datei skalieren Sie in Ihrer Grafikbearbeitung auf ca. 100 x 150 Pixel, und speichern sie innerhalb Ihrer Ordnerhierarchie an den vorgesehenen Platz. Nicht vergessen: In "templateDetails.xml" in den Installationspfad eintragen! Falls Sie mit dem Ergebnis noch nicht zufrieden sind, bearbeiten Sie die entsprechenden Dateien weiter, bis es passt... Deinstallieren Sie Ihr Template im Backend von Joomla, erstellen ein neues Installationsarchiv, wiederholen Sie die Installationsprozedur. Ein gutes Template entsteht selten über Nacht, es will wachsen... ♦Tipp: Testen sie ihr fertiges Template unter verschiedenen Browsern und Betriebssystemen. Gerade die Formatanweisungen in CSS können u.U. browserabhängig unerwünschte Seiteneffekte provozieren! ►weitere Weblinks zum Thema Joomla CSS Guide | mosLoadModules | Templates selbst erstellen | Joomla Forum | Joomla Buch ...und wenn Ihnen das Ganze zu mühsam erscheint, biete ich Ihnen gerne kostengünstig meine Dienste bei der Umsetzung an! |
|
| Letzte Aktualisierung ( Sonntag, 19. August 2007 ) |
| < Zurück | Weiter > |
|---|
