Joomla Tutorials

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


Joomla-Template für Web Design!

Ahadesign Tutorials

webdevelopmentAnhand einer modernen und responsiven Joomla-Vorlage für Webdesign von unserem Partner TemplateMonster, zeigen wir, wie die Installation funktioniert, wie Probleme umschifft werden können und was das Template zu bieten hat. Die nachfolgenden Ausführungen sind auch auf viele der anderen verfügbaren Templates für Joomla anwendbar.

Web Development Joomla Template!

megamenue

Seit Jahren zeichnen sich die vielfältigen Themes und Templates von Templatemonster durch ein sehr gutes Preis-/Leistungsverhältnis aus. Für alle wichtigen Contentmanagement-Systeme, Shopsysteme usw., gibt es fast nichts, was es nicht gibt.

Auf der Website von Templatemonster, aber auch hier unter der Template-Auswahl, hat man die Qual der Wahl. Zu allen Vorlagen gibt es einen Überblick, Bewertungen, Details und es können Fragen gestellt werden. Außerdem gibt es zu jeder Vorlage eine Live-Demo, womit alle Features im Browser schon vor einem Kauf ausprobiert werden können. Oft können hier auch Farben umgeschaltet werden, sofern das Template diese Möglichkeit bietet.

Neben einer einmaligen Nutzungslizenz kann auch eine Entwicklerlizenz und eine Buyout-Kauflizenz erworben werden. Je nach Lizenz darf ein Template dann für mehr oder weniger Domains verwendet werden. Bei einer Buyout-Lizenz wird die Vorlage außerdem nicht mehr an andere weiterverkauft.

Außerdem werden nützliche Dienstleistungen angeboten, welche direkt mit dem Kauf einer Vorlage verknüpft werden können. So kann man sich auch gleich die gewünschten Inhalte einpflegen lassen und die Installation kann übernommen werden. Oder man lässt sich ein mehrsprachiges Paket integrieren. Auch Stockbilder und Webhosting können dazu gebucht werden.

Aus den vielen Vorlagen haben wir ein besonders für Webdesigner geeignetes Template für Joomla gewählt, um daran die Installation zu zeigen und die auch in vielen anderen Templates verfügbaren Features kurz vorzustellen. Es handelt sich hier um das Template "Web Development", eine responsive Joomla-Vorlage für Web Design mit der Artikelnummer 60077.

Inhalt des gekauften Pakets

ajax-contactform

Nach dem Kauf erhält man einen Download-Link zu einer gezippten Datei. Diese Datei enthält mehrere Ordner und einen Bestell- sowie Infotext. Dort sind nützliche Hinweise zur Bestellung und zum gepackten sowie mit einem Passwort versehenen Ordner "sources" vermerkt. Das Passwort ist beim Kauf natürlich mit dabei und man erhält dann Zugriff auf zusätzliche Inhalte wie Bilder und auch PSD-Dateien z.B. für das Logo, zum Anpassen im Bildbearbeitungsprogramm.

Neben dem Ordner "sources" gibt es einen Ordner "screenshots", welcher Abbildungen zum Template enthält. Sehr viel wichtiger ist der Ordner "documentation". Darin ist eine HTML-Datei zu finden, welche via Doppelklick den Browser öffnet und auf eine Anleitungs-Seite bei Templatemonster führt. Leider ist diese Seite nur in englischer Sprache verfügbar. Allerdings werden alle nötigen Schritte nun auch hier gezeigt.

Installation

So kommen wir zum wichtigsten Ordner "joomla". Dieser enthält in diesem Fall das Template als Zip-Datei und eine Fullpackage.zip. Ist bereits ein Joomla installiert, kann erstere Datei über das Joomla-Backend installiert werden. Ansonsten kann auch das volle Paket auf den Server geladen und Joomla mitsamt dem neuen Template und auf Wunsch mit Beispieldateien installiert werden. Auch das nachträgliche Installieren der Beispieldateien ist möglich.

Natürlich könnte man die fullpackage.zip auf dem lokalen Rechner zuerst entpacken und dann via FTP die Inhalte hochladen. Viel schneller geht es aber, wenn die Zip-Datei mit der ebenfalls in diesem Ordner befindlichen Datei "unzip.php" hochgeladen wird. Wurde das gemacht, muss nur die Domain und die Datei im Browser aufgerufen werden. Also zum Beispiel test.ahadesign.eu/unzip.php.

Daraufhin erscheint folgender Dialog:

templatemonster-quick-installer

Hier kann jetzt auch nur die hochgeladene Zip-Datei ausgewählt werden. Falsch machen kann man also nichts. Alternativ könnte man noch ein Verzeichnis wählen, wohin entpackt werden soll, sofern man einen anderen oder einen Unterordner verwenden möchte. Soll es beim Rootverzeichnis bleiben, trägt man bei Unzip to einfach nichts ein und klickt auf den Button "Unzip".

In wenigen Sekunden ist das Entpacken erledigt und es erscheint eine Erfolgsmeldung. Auf dem Server sind nun alle Dateien und Ordner vorhanden.

joomla-und-template

Die fullpackage.zip und unzip.php können jetzt gelöscht werden, sie werden nicht mehr gebraucht. Es empfiehlt sich an dieser Stelle, die Rechte zu überprüfen und gegenbenenfalls anzupassen. Bei entsprechendem SSH-Zugang geht das schnell über die Konsole, oder einfach mit einem FTP-Programm wie z.B. dem kostenlosen Filezilla über das Kontextmenü der rechten Maustaste. Ordner bekommen 755 und Dateien 644.

Joomla installieren

Für den nächsten Schritt sollte bereits eine Datenbank eingerichtet sein. Wie das geht, ist beim Webhoster zu erfahren. Wer selber einen Server betreibt, weiß normalerweise wie das geht.

Nun wird im Browser die Domain mit nachfolgendem /installation aufgerufen, also z.B. test.ahadesign.eu/installation. Der Installationsvorgang beginnt.

installation-joomla-konfiguration

Was hier einzutragen ist, erklärt sich von selbst und ist auch noch recht gut beschrieben. Mit der Weiter-Schaltfläche geht es zum nächsten Schritt.

Für den zweiten Schritt werden natürlich die Zugangsdaten für die Datenbank benötigt. Das Tabellenpräfix kann man normalerweise belassen wie es ist.

installation-joomla-datenbank

Zum Schluss wird ein Überblick angezeigt und man sieht sofort, ob alles in Ordnung ist, also z.B. ob die empfohlenen Einstellungen für PHP eingehalten werden. Ganz oben bei der Zusammenfassung kann bei den Beispieldateien jetzt "sample_theme3307" für die Installation vorgesehen werden. Es wurden also auch Beispielinhalte für das gekaufte Template hochgeladen, welche für eine erste Installation auf jeden Fall hilfreich sind und hier auch in jedem Fall mitgenommen werden sollen.

installation-joomla-ueberblick

Schließlich folgt ein Klick auf die Schaltfläche "Installieren". Leider erscheinen hier im Test viele Datenbankfehler und die Installation kann nicht abgeschlossen werden. Wie sich später herausgestellt hat, war die Konfiguration für die Beispielinhalte schuld daran. Ohne die Installation dieser Inhalte klappte es dann.

installation-joomla-fertig

Jetzt könnten gleich noch weitere Sprachen wie Deutsch installiert werden. Hier wird nur auf den wichtigen Button "Verzeichnis löschen" geklickt und damit kann Joomla jetzt über die jeweiligen Buttons für das Frontend oder das Backend genutzt werden. In diesem Beispiel wird jetzt über test.ahadesign.eu/administrator das Backend aufgerufen.

joomla-backend

Beispielinhalte sind jetzt leider nicht zugänglich, weil sie ja nicht installiert werden konnten. Zunächst sollte man sich aber um grundlegende Einstellungen kümmern. Bei dieser ersten Installation möchte Joomla gerne diverse Daten übermittelt bekommen. Das wird hier niemals erlaubt. Der nächste Schritt ist ein Update auf die aktuelle Version. Weil keine weiteren Sprachen installiert wurden, wird das jetzt für die deutsche Sprache unter Extensions -> Languages mit Klick auf den Button "Install Languages" und der Wahl der Sprache noch nachgeholt. Außerdem wird die deutsche Sprache noch auf Default, also auf Standard gesetzt.

joomla-sprache

Dies muss allerdings für Administrator und für Site gemacht werden.

joomla-sprache-site-admin

Damit wäre alles wunderbar, aber leider sind weder das neue Template, noch die Beispielinhalte und auch keine sonstigen zusätzlichen Erweiterungen zu finden, obwohl sie auf dem Server liegen, wie das FTP-Programm zeigt.

Nach etwas Überlegen konnte das Problem glücklicherweise identifiziert werden. Es lag am Tabellen-Präfix der Datenbank, welches bei einer Neuinstallation von Joomla ja zufällig vergeben wird. Ersichtlich ist dieses Präfix im Backend unter System -> Konfiguration im Bereich Datenbank.

joomla-datenbank-praefix

Hätte man hier gleich bei der Installation das früher von Joomla standardmäßig verwendete Präfix jos_ vergeben, hätte es wohl keine Probleme gegeben.

Es wurden also keine Inhalte und keine Konfigurationen in die Datenbank geschrieben, weshalb auch das gekaufte Template nicht auffindbar ist. Aber auch nachträglich lässt sich das Problem glücklicherweise lösen.

Hier ist also bereits das Präfix rlz4v_ in Nutzung. Die jetzt benötigten Inhalte liegen im Ordner "sources" des gelieferten Templates. Die Datei nennt sich dump.sql und genau diese Datei muss jetzt mit einem Editor geöffnet werden. Zum Beispiel mit dem kostenlosen Notepad++ oder auch mit Adobe Dreamweaver. Hauptsache es ist eine Suchen und Ersetzen-Funktion vorhanden, weil es sonst mühselig wird. Es wird also in diesem Fall nach jos_ gesucht und mit rlz4v_ ersetzt.

Damit ist die Datenbank-Datei nun bereit für den Import in die vorhandene Joomla-Datenbank. Dazu wird idealerweise phpMyAdmin gestartet, was oft über die Weboberfläche des Hoster gemacht werden kann. Dann wird die Datenbank für Joomla angewählt und die Import-Schaltfläche geklickt. Dort werden die Standardeinstellungen belassen und auf OK geklickt.

joomla-sqldump-import

Nach dem Import taucht die nächste Überraschung auf. Offensichtlich sind jetzt sämtliche Erweiterungen und Beispielinhalte vorhanden. Allerdings ist im Backend alles nur noch in englischer Sprache zu sehen. Die erneute Installation der deutschen Sprache scheint nicht möglich.

joomla-sprache-erneuern

Hier hilft es jetzt, zunächst über den Link "Discover" die Datenbank bzw. nicht richtig installierte Erweiterungen überprüfen zu lassen. Die angezeigten Fehler können dann über eine Schaltfläche oben gefixt werden. Weitere Fehler können über den Link Database behoben werden. Über das Menü Extensions -> Manage -> Install Languages könnten jetzt wieder Sprachen installiert werden. Die deutsche Sprache ist jetzt aber auch wieder sichtbar und muss lediglich nochmals wie oben beschrieben, als Standard für Administrator und Site definiert werden.

theme-details-dateien

Damit ist das Problem behoben und das Template kann mit Beispielinhalten im aktuellen Joomla genutzt und an eigene Bedürfnisse angepasst werden.

Beispielbilder hochladen

Im Ordner "sources" gibt es noch diverse Beispielbilder im Verzeichnis "to_root_folder", welche direkt in das Stammverzeichnis der Joomla-Installation hochgeladen werden können. Das ist aber nur notwendig, wenn das Template in ein vorhandenes Joomla installiert wird und dann natürlich erstmal keine Beispieldaten vorliegen.

Module installieren

Jetzt können noch jede Menge zusätzlicher Module, Plugins und Komponenten nachträglich installiert werden. Auch wieder im Ordner "sources" des Templates, ist eine gepackte Datei mit der Bezeichnung pkg_bundle_v1.12.38 b3.zip und eine com_komento_1.8.3_free_j.zip zu finden. Diese können nun über das Backend über Erweiterungen -> Verwalten -> Installieren aus einem Verzeichnis installiert werden. Dazu könnte die Datei vorab in den temporären Ordner der Joomla-Installation hochgeladen werden. Leider bringt Joomla hier eine Fehlermeldung. Die Installation über den Reiter "Paketdatei hochladen" gelingt oft auch nicht, weil die Dateigröße zu hoch ist. Hier empfiehlt es sich, das Bundle zunächst zu entpacken bis man Zugriff auf die einzelnen Zip-Dateien hat, welche dann klein genug für die Installation sind.

Templatestil bearbeiten

Unter Erweiterungen -> Templates -> Stile kann das neue Template angeklickt und diverse Einstellungen vorgenommen werden. Das Template hat hier einiges zu bieten, was nachfolgend kurz erläutert wird.

templatelayout

So lassen sich die Abmessungen und das Verhalten vieler Bereiche und Features des Templates steuern. Man hat Einfluss auf die Darstellung von Inhalten, Videos und mehr. Ein eigenes Logo kann bequem eingestellt und der dafür verwendete Platz definiert werden. Sehr umfangreiche Möglichkeiten gibt es für den Footer. Etwa ob das Copyright-Zeichen oder das Jahr angezeigt werden sollen, ob sich auch im Footer ein Logo befinden soll, ob diverse Links z.B. zu Nutzungsvereinbarungen angezeigt werden sollen usw. Und auch die Breite der linken und rechten Seitenleiste kann definiert werden. Das kann praktisch bei der Einbindung von Werbegrafiken etc. sein.

Unter dem Reiter "Gestaltung" verbergen sich Formateinstellungen für Seitentitel und Informationstitel verschiedener Formate wie Kategorie, Blog oder Informationsformat. Es lassen sich Überschriften von H1 bis H6 oder auch das p-Tag zuweisen.

Die Eigenschaften erlauben das Anzeigen eines Nach-oben-Buttons und sogar der Text für den Button kann hier eingegeben werden. Auch Buttons für den Desktop und mobile Versionen können genutzt und beschriftet werden. Es folgen Möglichkeiten, jQuery-Effekte wie Black & White oder Hover zu steuern, wobei auch Animationsgeschwindigkeiten eingestellt werden können. Außerdem gibt es noch einen Offline-Countdown.

Inhalte

Die Menüs, Inhalte, Komponenten und Erweiterungen sind dank der Beispielinhalte gut gefüllt. Gerade für Einsteiger ist es so wesentlich einfacher, die Joomlaseite auf eigene Bedürfnisse anzupassen, anstatt alles ganz neu erstellen zu müssen, was ja auch ein wenig KnowHow voraussetzt. Die Komponenten enthalten sehr brauchbare von Templatemonster mitgelieferte Extensions zum Mailen, für Bilder, für Kommentare, für ein Forum, für soziale Netzwerke, für Schlagwörter und mehr.

acymailing-oberflaeche

Funktionen

Oft ist die angegebene Kompatibilität der Templates nicht ganz auf dem neuesten Stand. Es handelt sich eben um Angaben, als die Vorlage eingepflegt wurde. So gibt es auch für das hier verwendete Webdesign-Template die Angabe 3.2.0-3.6.x. Tatsächlich funktioniert die Vorlage aber auch mit dem derzeit aktuellsten Joomla 3.7.3. Eigentlich funktionieren alle Templates ab Joomla 3.0 mindestens bis zur letzten 3er-Version.

Neben DropDown-Menü, Favicon, Google Map, Google-Fonts, Optionen für soziale Medien und mehr, setzt das Template auch auf Animationen mit HTML5 und JavaScript bzw. jQuery. Es enthält semantischen Code, ist responsiv, erlaubt bequem, vielfältige Anpassungen und bietet ein modernes Aussehen.

Bei der Installation könnte Templatemonster durchaus etwas nachlegen und kleine Verbesserungen vornehmen. Ansonsten ist das Template "Web Development" eine sehr schöne und brauchbare Vorlage, welche nicht nur unbedingt für Webdesigner interessant sein dürfte. Letztlich kann man hier gar nicht alles erklären. Deshalb ist es immer eine gute Idee, das Template einfach auszuprobieren.

Kommentar schreiben