J3.x

Erste Schritte mit Templates

From Joomla! Documentation

This page is a translated version of the page J3.x:Getting Started with Templates and the translation is 100% complete.

Other languages:
български • ‎Deutsch • ‎English • ‎español • ‎français • ‎hrvatski • ‎Bahasa Indonesia • ‎Nederlands • ‎português do Brasil • ‎русский • ‎українська

Einleitung

Joomla! 
≥ 3.0
Serie

Diese einführende Anleitung gibt dir einen Einblick in das Joomla! Templatesystem und was du damit machen kannst. Ebenfalls soll sie dir zeigen wie du jene Templates auf deine Bedürfnisse individualisieren kannst.

Sinn und Zweck von Templates

J3x-template-example-screenshot-de.png

Ein Template bestimmt das Design und Layout einer Seite. Es stellt den Style und das Framework bereit, welches Elemente, Module und Komponenten einfügt. Sowohl Front- als Backend Seiten haben ein Template.

Bei der Installation von Joomla! werden einige Templates mit installiert. Auf anderen Websites können noch viele andere Templates gefunden werden. Viele sind kostenlos unter verschiedenen Lizenzen verfügbar, andere müssen gekauft werden. Zusätzlich gibt es viele Entwickler, welche kundenspezifische Templates entwickeln. Natürlich kannst du auch dein eigenes Template erstellen.

Templates werden mit dem Template Manager verwaltet. Dieser befindet sich im Menüpunkt Erweiterungen im Backend der Website

Warum nutz Joomla! Templates? [Absolut Einsteigerfreundlich!]

Durch die grundlegende Struktur von Joomla! werden wichtige Aufgaben getrennt um eine effiziente Wartung der Software zu erreichen. Eine dieser Aufgaben ist es, das Erscheinungsbild der Website zu beeinflussen. Dies beinhaltet Entscheidungen, wie z.B. die Position von Elementen (Komponenten, Module, Plugins) auf der Website.

Beim Erstellen einer Website bleibt die Position vieler Elemente immer gleich (Menüs, Banner, Sidebars, etc.). Zusätzlich soll jede Seite weitgehend gleich aussehen (Schriftart, Überschriften, Farben, etc.). Eventuell sollen einzelne Teile der Seite anders Aussehen um sie hervorzuheben (Blogs, Foren, etc.). Ein gewisses Maß an Planung wird benötigt, wenn du dich jedoch auf ein allgemeines Layout für deine Seiten festgelegt hast du nur noch die Aufgabe den Inhalt der einzelnen Seiten zu erstellen.

An dieser Stelle greift das Template. Du kannst entweder den Code für jede Seite einzeln schreiben oder für jeden Bereich deiner Website ein Template erstellen und auf einzelnen Seiten nur "die Lücken füllen". Okay, ganz so einfach ist es leider nicht, aber dieses Tutorial wird dich Schritt für Schritt an die effiziente Templatenutzung heranführen. Beginnend bei der Nutzung und endend bei der Erstellung von Templates.

  1. Nutze eines der vorinstallierten Joomla! Templates
  2. Lade dir ein kostenloses Template aus dem Internet.
  3. Bezahle einen Entwickler um dir ein Template anzupassen oder zu erstellen, falls deine Bedürfnisse sonst nicht erfüllt werden.

Zusammenfassung – Ein Template bestimmt das Design deiner Website und erlaubt es dir als Administrator mehr Zeit für den Inhalt aufzubringen.


Was macht ein Template

Ein Template verändert die Darstellung von Inhalten in einem Internetbrowser. Nachfolgend einige Beispiele wie dies in einer Joomla! Website verwendet werden kann.

Layout

Im Template wird das Design für das Hauptlayout deiner Seite gesetzt. Das beinhaltet die Position verschiedener Elemente (modules). Zum Beispiel kann die Position von Menüs, Loginformularen, Werbebannern oder Umfragen definiert werden.

J3x-template-example-module-changes-screenshot.png

Beispiel für Veränderungen im Layout

Der Hauptinhalt(article) der Seite kann, abhängig vom Layout des Templates, zwischen verschiedenen Styles variiert werden(z.B. Standart Blog, News, etc.).*Siehe Beispielbild. Das Layout wurde verändert aber das Aussehen der Website ist gleich geblieben. Die Seitenleiste wurde lediglich von links nach rechts verschoben ohne die Reihenfolge des Inhalts zu verändern.

Wenn das Template mit Auswahlmöglichkeiten programmiert wurde ist es auch möglich das Layout "dynamisch" zu verändern, eventuell ist es sogar möglich das Hauptmenü in der linken oder rechten Seitenleiste zu platzieren.

Farbschema

Mithilfe von CSS im Design des Templates kannst du die Farben aller Elemente ändern. Fast wie in ordinärem HTML Code. Viele Templates bieten die Möglichkeit Farben im Template Manager zu verändern, bei anderen muss dazu der Code in einer .css Datei verändert werden.

Bilder und Effekte

Du kannst auch die Darstellung von Bildern auf der Website festlegen. Auch das Erstellen von Flash-Artigen Effekten oder, mit AJAX, Dropdown Menüs erstellen.

Schriftarten

Das Selbe gilt auch für Schriftarten. Diese werden ebenfalls in den .css Dateine des Templates gesetzt, um ein einheitliches Bild zu erschaffen. Dadurch ist es besonders einfach das Aussehen der gesamten Website zu verändern.

Browser-Spezifische Lösungen

Ein Template kann auch auf einzelne Webbrowser angepasst werden, um den aktuellsten Stand der Entwicklung zu nutzen, jedoch ohne die Seite für andere Webbrowser zu sperren.


Standard Templates

Die folgenden Templates sind mit der Standardinstallation von Joomla! 3.x mitgeliefert:

Seiten Templates

  • Protostar (Standardvorlage)
  • Beez 3

Administrator Templates

  • ISIS (Standardvorlage)
  • Hathor


Templates wechseln

Um das Standard-Template für die Website (Frontend) oder Administrator (Backend) zu ändern, so vorgehen:

Aufruf der Templates

  • Anmeldung als Adminstrator in das Backend. Weitere Informationen:

An- oder Abmelden im Administrator-Backend

  • Auf Erweiterungen  Templates klicken

Extension-manager-template-manager-3x-de.png

Die Seite "Templates: Stile (Seite)" wird angezeigt.

Hinweis: Wenn im Menü "Erweiterungen" der Menüeintrag "Templates" nicht angezeigt wird, ist man nicht Super Benutzer angemeldet. Nur Super Benutzer wird der Menüeintrag gezeigt.


Verwaltung des Standard-Templates

Von hier werden die Templates für das Frontend (öffentliche Website) und Backend (Administration) verwaltet. Die Standard-Ansicht zeigt die installierten Frontend-Templates und Stile. Das Standard-Template für das Frontend ist mit einem Stern gekennzeichnet; im Bild unten ist es "protostar - Standard".

Den Standardstil auf beez3 ändern:

  • auf das Kontrollkästchen links vom Stilnamen klicken,
  • auf den "Standard"-Button der Werkzeugleiste klicken;

der Stern wechselt von "protostar - Standard" zu "beez3 - Standard". Mit einem Klick auf das Stern-Symbol der Spalte "Standard" kann ebenfalls das Template gewechselt werden.

Um die Zahl der anzeigten Templatestile zu verändern, Filter oder die Suchwerkzeuge verwenden. Andere Optionen sind:

  • Bearbeiten - Optionen und Menüzugehörigkeit des Stils einstellen. (Siehe unten)
  • Kopieren - eine Stilkopie erstellen
  • Löschen - einen Stil löschen (darf kein Standardstil sein).

30-Switching-templates-1-de.png


Mehrere Stile im Frontend zuweisen

In Joomla! können mehrere Stile dem Frontend zugewiesen werden. Einstellungen dafür im Stil "Menüzugehörigkeit" für ein Menü oder einen Menüeintrag. Damit sind spezielle "Seiten" möglich, die über den Menülink und Stil definiert sind. Stile können auf unterschiedlichen Templates basieren.

Template Methode

Auf Erweiterungen  Templates klicken

  • Die installierten Stile werden angezeigt. Ein gelber Stern zeigt einen Stil als Standard an.
30-Template-manager-select-edit-de.png
  • Auf einen Stilnamen klicken, der kein Standard ist oder das Kontrollkästchen links des Stilnamens anklicken und auf den "Bearbeiten"-Button der Werkzeugleiste klicken.
  • Die Seite "Templates: Stil bearbeiten" wird geöffnet. Im Tab "Menüzugehörigkeit" die Menüeinträge für den Stil wählen.

30-Switching-templates-assign-menus-de.png

  • Auf den "Speichern"-Button der Werkzeugleiste klicken. Die Menüeinträge zeigen den gewählten Stil.
  • Das Frontend der Website neu laden, um die Änderungen zu kontrollieren.

Menü Methode

  • Menü aufrufen Menüs  Menüname
  • Einen Menüeintrag mit dem Kontrollkästchen links vom Menünamen auswählen und den "Bearbeiten"-Button der Werkzeugleiste anklicken. Oder den Namen des Menüeintrages anklicken.
  • In "Menüs: Eintrag bearbeiten" in 'Template-Stil' den Stil wählen und den "Speichern"-Button anklicken.

30-Menu-item-template-management-edit-de.png

  • Das Frontend der Website neu laden, um die Änderungen zu kontrollieren.


Siehe auch


Templates installieren

Installation über den Administrationsbereich (gepackte Templatedatei)

Logge dich in das Backend deiner Seite ein. (www.deine-seite.de/administrator/)

Anklicken: Erweiterungen -> Verwalten

30-Installing-template-navigate-de.png

Du siehst die Seite "Erweiterungen: Installieren"

Von hier aus kann man Templates, Plugins, Module, Komponenten und Sprachen installieren. Man hat unterschiedliche Optionen:

  1. Aus dem Webkatalog installieren - eine Erweiterung aus dem Joomla! Erweiterungskatalog wählen
  2. Paketdatei hochladen - ein Paket am PC wählen, hochladen und installieren
  3. Aus Verzeichnis installieren - den Pfad des Pakets am Webserver angeben
  4. Von URL installieren - die URL zum Paket angeben

Option 4 ist die einfachste Methode und macht alles für dich. Voraussetzung dafür ist das deine Umgebung richtig konfiguriert ist. Für Option 2 ist es notwendig das du die Erweiterung vorher auf deinem PC herunterlädst. Bei Option 3 muss der Download vorher entpackt und auf deinem Webserver entsprechend abgelegt werden. Alle Optionen benötigen Schreibrechte auf dem Webspace.

Hier wählen wir die zweite Methode: Paketdatei hochladen

Ziehe das Paket in den Bereich wie vorgeben oder drücke den Button "Oder eine Datei auswählen" um die Datei zu selektieren.

30-Installing-template-upload-package-file-de.png

Wenn das Paket keine Fehler enthält, dann bist du schon fertig und bekommst eine Erfolgsmeldung wie diese anbei.

30-Installing-template-install-success-de.png

Installation überprüfen

Gehe nun vom 'Installieren' zum 'Verwalten' und setze den Suchfilter 'Typ' auf 'Template'. Hier sollte dein installiertes Template mit in der Liste auftauchen. Wenn dies so ist, dann wurde es richtig installiert. Ab sofort kannst du einen dieser Stile auf ein Menüeintrag anwenden oder den Stil als Standard setzen (Erweiterungen -> Templates). Bei Administratorentemplates gehe auf Nummer sicher indem du zwei Fenster oder Tabs der Templateverwaltung öffnest. Sollte beim Aktivieren des Templates im ersten Fenster etwas schief laufen, so kannst du es im anderen wiederherstellen.

Installation über FTP (entpackte Templatedatei)

Templates können auch per FTP, ohne gepackt zu sein, installiert werden. Am einfachsten geht dies, wenn du den Templateordner, mit einem dir favorisierten FTP-Programm auf den Server hoch lädst. Geh dabei sicher das der Templateordner ins richtige Verzeichnis hochgeladen wird: /pfad_zu_joomla/templates/ - Dabei ist /pfad_zu_joomla/ das Verzeichnis auf deinem Server wo Joomla installiert wurde. Diese Methode wird am meisten genutzt, wenn du dein Template selber erstellt hast und du es nicht packen möchtest um es so zu installieren. Auch wenn du mehrere Templates gleichzeitig hochladen möchtest ist diese Methode vorteilhaft. Ist dies nun geschehen gehe nun in den Erweiterungsmanager und drücke die Option 'Überprüfen' im Untermenü. Sollte das Template noch nicht angezeigt werden drücke den 'Überprüfen' Button in der Symbolleiste. Es sollte nun eine Liste von noch nicht installierten Erweiterungen durch den FTP angezeigt werden. Klicke auf die Auswahlboxen links vom Eintrag und drücke nun den 'Installieren' Button aus der Symbolleiste.

Hinweis: Nutze die FTP-Methode nicht zum Installieren von Komponenten, Modulen und Plugins falls du ein Anfänger bist. Diese Erweiterungen benötigen Datenbankeinträge und müssten manuell eingeben werden, sollte man die übliche Paketinstallation umgehen.