Joomla! Templates

Templates entwickeln und anpassen

Wer sich mit Joomla!-basierten Websites von der Masse abheben will, entwickelt eigene Templates oder passt vorhandene individuellen Bedürfnissen an. Hier setzt Daniel Koch an und zeigt praxisnah, wie Sie mit Joomla-Templates modernes Webdesign zeitsparend, individuell und suchmaschinenoptimiert verwirklichen.

Ihr(e) Trainer: Daniel Koch

ISBN-Nummer: 978-3-8273-6197-4

Erscheinungsdatum: 07.04.2009

EUR 39,95

Laufzeit: 7 Stunden

Video-Training auf DVD mit Bonusmagazin

Was ist ein Online-Training bzw. ein DVD-Training?

DVD oder Online-Training: Was ist der Unterschied?

Inhaltlich sind beide Trainings absolut gleich. Der Unterschied liegt bei den Nutzungsmöglichkeiten und im Vertriebsweg.

Beim Training auf DVD erhalten Sie eine Box mit allen Inhalten und einem gedruckten Bonusmagazin.

Die Bezahlung erfolgt bequem per Rechnung.

Das Online-Training ist sofort nach dem Kauf verfügbar, jederzeit und an jedem Ort. Sie brauchen nur eine Online-Verbindung und einen gängigen Webbrowser. Wenn Sie das Training herunterladen, steht es Ihnen auf Ihrem Computer auch offline zur Verfügung.

Die Bezahlung erfolgt per Kreditkarte, Paypal oder sofortüberweisung.de (nicht in allen Ländern verfügbar).

Wir wünschen Ihnen viel Freude mit dem Video-Training Ihrer Wahl – ob Online oder auf DVD.

In den Warenkorb Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

Trailer: Joomla! Templates Video-Training

Dieses Kapitel zeigt, wie das Zusammenspiel zwischen Joomla! und den Templates funktioniert.

Grundlagen
- Unerwartete Vielfalt: Anhand eines Joomla!-Showcase sehen Sie, wie unterschiedlich Joomla!-basierte Webseiten aussehen können.
  
  Einleitung
  
  02:12
- Die Ausgabe von Joomla!-Seiten wird über Templates, das sind Vorlagen, gesteuert. Die folgenden Videos zeigen, wie solche Templates funktionieren und wie Sie diese einsetzen.
  
  Joomla!-Templates
  - Ein und dieselbe Seite lässt sich ganz einfach in unterschiedlichen Designs anzeigen: Dazu sind nur ein paar Mausklicks im Backend nötig.
    
    Templates einsetzen
    
    03:31
  - Dreh- und Angelpunkt der Template-Verwaltung ist der Template-Manager, den Sie über Erweiterungen/Templates im Backend aufrufen.
    
    Template-Verwaltung
    
    03:53
  - Joomla! erlaubt, mehrere Templates parallel zu verwenden. So präsentieren Sie beispielsweise den Besuchern, die sich in die Seite eingeloggt haben, ein völlig anderes Layout.
    
    Mehrere Templates
    
    03:57
  - Dieses Video nennt einige Quellen, von denen Sie kostenlose und kommerzielle Templates herunterladen können. Außerdem kärt es die Frage, ob und wann es sinnvoll ist, kostenlos verfügbare Templates einzusetzen.
    
    Template-Quellen
    
    05:03
  - Template-Clubs sind die interessante Alternative zum Kauf einzelner Templates. Denn für einen vergleichsweise geringen Beitrag können Sie dort auf sehr viele Templates zugreifen.
    
    Template-Clubs
    
    05:27
  - Wo Sie Templates herbekommen, haben Sie bereits erfahren - Jetzt geht es darum, wie Sie diese Templates in Ihrem Joomla!-Backend installieren können.
    
    Templates installieren
    
    02:19
  - Dieses Video zeigt, wie Sie nicht mehr benötigte Templates wieder loswerden. Dabei erfahren Sie auch, warum sich manche Templates nicht ohne weiteres deinstallieren lassen.
    
    Templates deinstallieren
    
    01:29
- Wer effektiv mit Templates arbeiten will, muss genau wissen, welche Elemente er später ansprechen und einbinden will. Dieses Kapitel liefert den Überblick über die wichtigsten Frontpage-Komponenten.
  
  Frontpage-Komponenten
  - Menüs werden als Module in die Seite eingebunden. Deswegen sprechen Sie später in Ihrem Template nicht die Menüs, sondern die entsprechenden Module an.
    
    Menüs
    
    01:47
  - Beiträge gehören für gewöhnlich zu den wichtigsten Elementen einer Webseite. Daher sollte Ihnen bereits während der Entwicklungsphase des Templates entsprechender Platz eingeräumt werden.
    
    Beiträge
    
    02:13
  - Planen Sie bereits im Vorfeld ein, ob Sie Ihre Webseite über Banner und/oder Text-Links finanzieren wollen. Denn abhängig davon ist die Aufteilung des im Template verfügbaren Platzes.
    
    Werbung
    
    01:42
  - In diesem Video lernen Sie weitere Module kennen - unter anderem die Suchfunktion und die Umfragen. Und: Machen Sie sich bereits jetzt Gedanken darüber, welche Module Sie letztlich einblenden wollen.
    
    Weitere Module
    
    04:33
Man muss nicht immer wieder das Rad aufs neue erfinden. Dieses Kapitel zeigt, wie Sie mit wenigen Handgriffen das Aussehen vordefinierter Templates anpassen.

Templates anpassen
- Über Template-Parameter passen Sie das Design der Seite denkbar schnell an. Das ist schon einmal ein erster Schritt in Richtung Individualität.
  
  Templates anpassen
  
  02:30
- Im Template sind standardmäßig bestimmte Positionen definiert, in denen verschiedene Module angezeigt werden. Diese Standardanzeige lässt sich ändern.
  
  Seitenbereiche
  - Dieses Video zeigt das Zusammenspiel zwischen angegebenen Modulpositionen und den im Quelltext der Seite stehenden Befehlen.
    
    Positionen
    
    04:20
  - Erfahren Sie hier, wie Sie Module an einer anderen Position anzeigen oder die Reihenfolge der Module innerhalb einer definierten Position ändern.
    
    Reihenfolge
    
    04:08
  - In diesem - und den nächsten Videos dieses Abschnitts - geht es darum, wie Sie für ein Modul eine neue Position definieren und es dort anzeigen.
    
    Positionen definieren
    
    02:13
  - Um das Suchen-Modul einer neuen Position zuweisen zu können, muss diese definiert sein. Wie das geht zeigt dieses Video exemplarisch anhand der neuen Position "suche".
    
    templateDetails.xml
    
    02:59
  - Joomla! Lässt Sie CSS-Dateien direkt bearbeiten. In diesem Video passt der Trainer die CSS-Datei für die Anzeige des Suchen-Moduls an.
    
    CSS bearbeiten
    
    04:29
  - Im letzten Schritt passen Sie die HTML-Syntax an. Denn nur, wenn dort auch tatsächlich die Syntax für das Einbinden von Modulen auftaucht, können Sie das Modul dort anzeigen.
    
    HTML bearbeiten
    
    04:20
- Wem Kleinigkeiten seiner Templates nicht gefallen, der kann diese ganz einfach ändern. In diesem Kapitel sehen Sie, wie einfach das funktioniert. Oft genügen bereits geringe Anpassungen der CSS-Syntax.
  
  Optische Anpassungen
  - Über die CSS-Datei ändern Sie Schriftfarbe und -größe im Handumdrehen. Dieses Video zeigt, wie das funktioniert.
    
    Schriftfarbe
    
    03:46
  - Geringe Anpassungen im Quellcode ändern die Darstellung der Hyperlinks. Wie das Ganze funktioniert, veranschaulicht der Film anhand des Standard-Templates bzw. der dortigen Hyperlink-Definitionen.
    
    Hyperlinks
    
    04:06
- Mit den Standard-Kopf- und -fußbereichen vieler Templates lässt sich oft nicht viel anfangen. Dieser Abschnitt zeigt, wie Sie diese Elemente anpassen.
  
  Header und Footer
  - Anpassen der Kopf- und Fußbereiche: Das Video führt in das Thema ein. Sie erfahren, warum es eigentlich so wichtig ist, zu wissen, wie man beide Bereiche anpasst.
    
    Kopf- und Fußbereich
    
    01:58
  - Anstelle des standardmäßig angezeigten Joomla!-Logos können Sie auch das eigene Firmenlogo oder ein Werbe-Banner einblenden.
    
    Kopfbereich
    
    05:54
  - Das Video zeigt, wie Sie den Fußbereich eines Templates anpassen. Ersetzen Sie das standardmäßig eingeblendete Feed-Logo durch PHP-Code, der das aktuelle Datum anzeigt.
    
    Fußbereich
    
    05:18
- Menüs sind entscheidend für die Webseite. Denn nur eine gut durchdachte Menüstruktur wird auf Dauer Besucher an die Seite binden. In diesem Kapitel erfahren Sie, wie Sie bestehende Menüs anpassen und Menü-Module einsetzen.
  
  Menüs
  - Hier sehen Sie, wie Sie Menütitel anpassen und bei Bedarf ausblenden. So einfach geht's!
    
    Menüs anpassen
    
    02:06
  - In Joomla! können Sie sehr einfach Menüeinträge anpassen, deaktivieren oder löschen. Wie das funktioniert, sehen Sie in diesem Video.
    
    Menüeinträge
    
    03:28
  - Die normalen Menüs in Joomla! Machen nicht allzu viel her. Wer sich nicht groß mit der Programmierung eigener Menüs befassen will, der kann auf fertige Komponenten zurückgreifen.
    
    swMenuPro
    
    01:42
  - Jetzt installieren Sie swMenuPro und konfigurieren es gleich - richtig! Denn nur, wenn man an den richtigen Hebeln anpackt, wird sich im Frontend auch tatsächlich etwas tun.
    
    swMenuPro konfigurieren
    
    06:24
Die Grundlage von Joomla!-Templates bildet eine Kombination aus CSS und HTML. In diesem Kapitel werden die wichtigsten CSS-Elemente vorgestellt, die Sie für die Definition eigener Templates brauchen.

Grundlayout fürs Template
- Dieses Video zeigt zunächst einmal, welche Kenntnisse Sie besitzen sollten, um Templates zu entwickeln. Außerdem werfen Sie einen Blick auf das fertige Template, das Sie im Verlauf dieses Video-Trainings entwickeln werden.
  
  Voraussetzungen
  
  02:15
- Damit das Template später richtig funktioniert, müssen zunächst die Hausaufgaben erledigt werden. Und die erstrecken sich bei Joomla!-Templates auf Definition der HTML-Grundstruktur und Einsatz der passenden CSS-Eigenschaften.
  
  HTML-Grundstruktur
  - In diesem Video legen Sie die Datei an, auf der später das ganze Template basieren wird. Der Einfachheit halber nutzen Sie dafür eine HTML-Datei, die Sie dann einfach in index.php umbenennen.
    
    HTML-Datei
    
    02:01
  - Um überhaupt zu einem Template zu kommen, muss zunächst das Grundgerüst des Templates definiert werden. Dieses Video zeigt, wie man das mit möglichst schlankem Code hinbekommt.
    
    Das Grundgerüst
    
    05:27
  - Hier gilt es, das Template-Verzeichnis anzulegen. Parallel dazu erstellen Sie eine CSS-Datei, die Sie mit der Index-Datei verknüpfen.
    
    CSS einbinden
    
    02:34
  - Zunächst kommen allgemeine Angaben in die CSS-Datei, die dateiweit gelten. Dazu gehören u.a. Schriftgröße und Schriftart.
    
    Allgemeine CSS-Angaben
    
    02:55
- Die meisten Layouts basieren heutzutage auf Spalten - so auch in diesem Video-Training. Das Grundlayout setzt dabei auf einen Dreispalter.
  
  Spaltenlayouts
  - Mittlerweile sollten Layouttabellen der Vergangenheit angehören. Die Realität sieht anders aus: In der Tat werden sie immer noch eingesetzt. In diesem Video-Training allerdings nicht ?
    
    Layouttabellen
    
    04:45
  - Die CSS-Datei muss für den Container angepasst werden. Bei diesem Container handelt es sich sozusagen um den Rahmen Ihres Templates.
    
    Der Container
    
    04:23
  - Auch der Kopfbereich muss natürlich innerhalb der CSS-Datei angepasst werden.
    
    Kopfbereich
    
    02:58
  - Der Content-Bereich nimmt später einen Sonderstatus ein, denn die Breite dieses Bereichs wird variabel gehalten. Das ändert aber nichts daran, dass auch hier zunächst CSS-Angaben erforderlich sind.
    
    Mittlerer Bereich
    
    02:20
  - Der Fußbereich ist zwar nicht bei jedem Template nötig, in diesem Video-Training wird allerdings einer verwendet. Dort könnte man später z.B. ein Feed-Logo einbinden.
    
    Fußbereich
    
    02:23
  - Die linke Spalte ist normalerweise für Menüs vorgesehen. Hier weisen Sie dieser Spalte die nötigen CSS-Eigenschaften zu.
    
    Linke Spalte
    
    02:43
  - Jetzt geht es um die Definition des mittleren Bereichs. Kleine Vorschau: Später erfahren Sie, wie sich dieser Bereich dynamisch den Gegebenheiten des Templates anpasst.
    
    Mittlere Spalte
    
    02:28
  - Zum Schluss passen Sie auch noch die CSS-Eigenschaften der rechten Spalte an. Das ist der vorerst letzte Schritt auf dem Weg zum Spaltenlayout.
    
    Rechte Spalte
    
    02:00
In Joomla! Ist exakt vorgegeben, welche Verzeichnisse und Dateien in jedem Fall vorhanden sein müssen. Genau darum dreht es sich in diesem Kapitel.

Die Template-Dateien
- Nachdem das Grundlayout steht, geht es nun an die eigentliche Template-Arbeit. Denn schließlich muss das Grundlayout nun noch so angepasst werden, dass es tatsächlich ein Joomla!-Template wird.
  
  Einführung
  
  00:54
- Es ist exakt festgelegt, wie ein Joomla!-Template aufgebaut sein muss. Joomla! verlangt ganz bestimmte Dateien und Verzeichnisse. Nur wenn diese vorhanden sind, funktioniert das Template.
  
  Dateien und Verzeichnisse
  - Anders als bei einem normalen Web-Projekt ist bei Joomla! exakt festgelegt, welche Verzeichnisse in jedem Fall vorhanden sein müssen. Dieses Video zeigt, welche Verzeichnisse das im Einzelnen sind.
    
    Verzeichnisstruktur
    
    02:48
  - Nicht nur die Verzeichnisstruktur ist vorgegeben, auch ganz bestimmte Dateien müssen vorhanden sein. Fehlen diese, kann das Template nicht verwendet werden.
    
    Dateien
    
    04:15
  - Verhindern Sie nach Möglichkeit, dass Besucher die index.php direkt aufrufen können! Dazu muss nur eine einzige Zeile PHP eingefügt werden.
    
    Direktzugriff
    
    02:42
- In der templateDetails.xml werden sämtliche Eigenschaften des Templates bestimmt. Dazu gehören Meta-Daten, Modulpositionen und die im Template verwendeten Dateien.
  
  templateDetails.xml
  - In diesem Video beginnt der Aufbau der templateDetails.xml. Los geht's mit der XML-Deklaration und der Dokumenttypdefinition.
    
    Kopfbereich der templateDetails.xml
    
    04:53
  - Metadaten geben dem Installer Informationen über das Template. Diese Daten werden außerdem in der Template-Übersicht im Backend angezeigt.
    
    Metadaten
    
    05:07
  - Im <files>-Bereich der templateDetails.xml müssen alle zum Template gehörenden Dateien angegeben werden. Das ist übrigens eine häufige Fehlerquelle - also Vorsicht!
    
    Dateien
    
    03:14
  - Sie müssen auch die im Template verwendeten Positionen angeben. Nachdem das erledigt ist, können Sie das Template bereits im Backend einstellen.
    
    Positionen
    
    03:40
- Die index.php ist das Kernstück der Joomla!-Templates. Diese Datei steuert das Grundlayout der Seite.
  
  index.php
  - Erfahren Sie in diesem Video, wie Sie Namensraum und Dokumentsprache angeben können. Sie sehen auch, wie die im Backend eingestellte Sprache automatisch in das Frontend übernommen werden kann.
    
    Namensraum
    
    05:47
  - Mit einem einzigen Befehl lässt sich ein vollständiger <head>-Bereich laden. Der besteht aus Meta-Angaben, Skripten und dem Seitentitel.
    
    Kopfbereich
    
    02:46
  - Obwohl Joomla! die korrekte Sprachkodierung ausliefert, kann es passieren, dass im Frontend Sonderzeichen und Umlaute nicht richtig umgewandelt werden. Dieses Video zeigt die häufigsten Fehlerquellen. Meistens ist das Problem nämlich der Editor.
    
    Sonderzeichen
    
    02:14
  - Wenn Sie über den <jdoc>-Befehl den Kopfbereich der Seite laden, werden automatisch JavaScript-Frameworks mitgeladen. Wer diese Frameworks nicht nutzt, sollte sie nicht einbinden.
    
    Mootools
    
    04:06
  - Normalerweise möchte man sowohl in Frontend als auch Backend denselben Editor für die Bearbeitung nutzen. Allerdings soll der Editor nur dann geladen werden, wenn die Benutzer die entsprechenden Rechte dafür besitzen. Hier erfahren Sie, wie Sie die passende Abfrage integrieren.
    
    Editor
    
    04:52
- Bislang ist lediglich das Grundlayout aufgebaut. Ohne CSS geht es aber natürlich nicht, denn schließlich soll das Template auf eine saubere Kombination aus HTML und CSS setzen.
  
  CSS einbinden
  - Die CSS-Dateien sollen geladen werden: Das erfolgt nun nicht mehr statisch, sondern über einen PHP-Aufruf.
    
    CSS laden
    
    03:13
  - Durch Conditional Comments können u.a. spezielle Stylesheets für den Internet Explorer geladen werden. Andere Browser ignorieren diese Conditional Comments.
    
    Conditional Comments
    
    06:20
  - Wenn im Backend eine Sprache eingestellt ist, die nicht von links nach rechts läuft, sollte auch eine angepasste CSS-Datei geladen werden.
    
    Laufrichtung
    
    04:26
  - Im oberen Fensterbereich der Seite soll eine große Grafik angezeigt werden. Wie Sie eine solche Grafik mittels CSS einbinden, erfahren Sie hier.
    
    Banner
    
    02:43
  - Die beiden Spalten links und rechts sollen nun etwas dezenter wirken. Zu diesem Zweck bekommen sie jeweils eine eigene Hintergrundgrafik.
    
    Spalten
    
    02:52
  - Der Hauptteil der Seite ist der Bereich, in den später die eigentlichen Inhalte (Artikel usw.) eingebunden werden. Dieser Bereich muss natürlich ebenfalls definiert sein.
    
    Content-Bereich
    
    02:27
  - Die Seite braucht eine Hintergrundgrafik: Wichtig ist dabei, exakt festzulegen, in welcher Richtung sich die Grafik wiederholt.
    
    Hintergrundbild
    
    02:21
Das Grundlayout steht - jetzt geht es daran, die eigentlichen Inhalte aus dem Backend ins Frontend zu holen. In diesem Kapitel greifen Sie auf Module zu und zeigen diese im Frontend an.

Inhalte ausgeben
- Bislang ist im Frontend noch nicht allzu viel zu sehen. Das gilt es nun zu ändern. Wie die Zusammenhänge zwischen Front- und Backend aussehen, zeigt dieses Video.
  
  Einleitung
  
  01:17
- Um Inhalte im Frontend ausgeben zu können, benötigen Sie Kenntnis der Syntax für das Einbinden von Modulen und Komponenten.
  
  Module einbinden
  - Module werden stets an bestimmten Positionen eingefügt: Hier erfahren Sie, wie Sie eigene Positionen definieren und diese dann im Backend den Modulen zuweisen.
    
    Positionen
    
    01:58
  - Hier dreht sich alles um das Einbinden von Modulen. Erfahren Sie, wie und mit welchem Befehl Sie Module laden.
    
    Module laden
    
    03:43
  - Über den optionalen style-Parameter geben Sie vor, auf welcher Code-Basis die Module im Frontend dargestellt werden. Soll die Ausgabe in Tabellen gekleidet sein oder in sauberem Code daherkommen?
    
    style-Parameter
    
    04:21
  - Dieses Video zeigt, wie der Hauptinhalt ins Frontend eingebunden wird. Damit sind die Beiträge bzw. Artikel gemeint, die im Backend angelegt sind.
    
    Seiteninhalt
    
    01:41
  - Die allgemeine Syntax für das Einbinden von Modulen kennen Sie: Damit können Sie jetzt alle gewünschten Module ins Frontend einbinden.
    
    Weitere Module laden
    
    04:38
- Joomla! hat ein ausgefeiltes CSS-Konzept mit an Bord. Nur wer versteht, wie die unzähligen Klassen und IDs funktionieren, findet sich in diesem Dschungel zurecht.
  
  CSS-Konzept
  - CSS macht deutliche Unterschiede zwischen Klassen und IDs. Das in diesem Video vermittelte Wissen über deren jeweilige Definiton ist die Basis für die weiteren Arbeiten.
    
    Klassen und IDs
    
    02:31
  - Nachdem Sie bereits den Unterschied zwischen Klassen und IDs verstehen, lernen Sie hier die Klassentypen kennen, die Joomla! von Haus aus mitbringt.
    
    Wichtige Klassen
    
    02:17
  - Zu verstehen, wie Joomla!s CSS-Klassen funktionieren, spart während der Template-Entwicklung Zeit und Ärger.
    
    Reservierte Klassen
    
    02:18
  - Dieses Video beschäftigt sich mit der Frage, wie man eine bestimmte Klasse findet. Das Beispiel: Wie lässt sich eine im Frontend angezeigte Überschrift formatieren?
    
    Klassen suchen
    
    02:54
  - Es ist gar nicht so einfach, zum Beispiel eine Modul-Überschrift zu formatieren. Denn wenn man nicht aufpasst, ist nicht nur die Überschrift, sondern auch andere Elemente formatiert.
    
    Gezielte Klassen
    
    03:24
  - Durch Suffixe gestalten Sie Elemente gleichen Typs unterschiedlich. Das ist auch und gerade für die Gestaltung von Menüpunkten interessant.
    
    Suffixe
    
    03:23
  - Auch die Hyperlinks des Templates wollen gestaltet sein, denn standardmäßig erscheinen diese im Einheitsblau. Das gilt es zu ändern.
    
    Links gestalten
    
    02:16
  - Häufig stellt sich die Frage, wie man den aktuellen Menüpunkt gezielt per CSS ansprechen kann. Dieses Video zeigt wie's funktioniert.
    
    Aktiver Menüpunkt
    
    06:57
  - Ist eine Grafik auch ein Link, hat sie einen Rahmen. Wie Sie den wegbekommen, erfahren Sie in diesem Video.
    
    Grafikrahmen
    
    01:33
  - Um das bisher vermittelte CSS-Wissen zu vertiefen, formatieren Sie jetzt die Beitragsüberschriften.
    
    Überschrift
    
    02:26
  - Sind auf mehrere Klassen die gleichen Eigenschaften angewendet, brauchen Sie diese nicht einzeln zu sortieren, sondern können sie zusammenfassen.
    
    Klassen zusammenfassen
    
    02:33
- Über Parameter gestalten Sie das Aussehen der Seite variabel. So lassen sich beispielsweise unterschiedliche Farbprofile und Breitenvarianten über das Backend einstellen.
  
  Template-Parameter
  - Anhand eines Templates erfahren Sie, welche Möglichkeiten Template-Parameter bieten und was eigentlich deren Sinn und Zweck ist.
    
    Einführung
    
    02:17
  - Den Einstieg in die Template-Welt erleichtert erfahrungsgemäß ein aussagekräftiges Beispiel - so auch hier: Sie legen in diesem Video Ihren ersten Parameter an.
    
    Parameter anlegen
    
    04:11
  - Neben Auswahlfeldern sind für Template-Parameter auch Radio-Boxen verwendbar. Wie das funktioniert, zeigt aufs Neue ein Praxisbeispiel.
    
    Radio-Boxen
    
    03:14
  - Um mit Template-Parametern arbeiten zu können, braucht es eine params.ini. Diese Datei ist übrigens standardmäßig leer, wird aber von Joomla! benötigt.
    
    Parameter-Datei
    
    01:44
  - Wer einen Farbwechsler über die Parameter hinbekommen will, braucht für jede Farbe, die zur Auswahl stehen soll, eine eigene CSS-Datei.
    
    CSS-Dateien
    
    04:31
  - Hier erfahren Sie, wie Sie Farbparameter definieren können. Sie lassen damit ein und dieselbe Seite über das Backend völlig anders aussehen.
    
    Farbparameter
    
    06:27
  - Nachdem die Farbe über einen Parameter gesteuert wird, soll das auch für die Template-Breite möglich werden. Der entsprechende Parameter wird in diesem Video verarbeitet.
    
    Breitenparameter
    
    05:23
- Spalten sollten eigentlich nur dann angezeigt werden, wenn dort Inhalte vorhanden sind. In den folgenden Videos sehen Sie, wie Sie Spalten dynamisch ein- und ausblenden.
  
  Spalten ausblenden
  - Dieses Video zeigt zunächst die Vorteile des Ausblendens von Spalten. Manchmal liegen die ja nicht auf der Hand!
    
    Einführung
    
    02:38
  - Sie lernen hier die allgemeine Syntax kennen, um das Vorhandensein von Spalten zu überprüfen. Das Video zeigt den Vorgang exemplarisch anhand der rechten Spalte.
    
    Bedingungen
    
    04:20
  - Die rechte Spalte des Layouts darf nur angezeigt werden, wenn darin auch tatsächlich Inhalte vorhanden sind. Damit das klappt, muss sich die Breite des Inhaltsbereichs dynamisch anpassen.
    
    Rechte Spalte
    
    05:09
  - Nachdem im vorherigen Video die rechte Spalte ausgeblendet wurde, geht es nun mit der linken weiter.
    
    Linke Spalte
    
    02:28
Auch wenn das Layout barrierefrei gestaltet ist - ein Problem bleibt: Viele Module verwenden für die Ausgabe nach wie vor Tabellen. Durch Overrides lässt sich die Ausgabe im Frontend überschreiben.

Overrides
- Es gibt immer noch viele Module, die für die Ausgabe auf Tabellen setzen. Das beweist das Beispiel dieses Films.
  
  Einführung
  
  01:43
- Die Frontpage wird standardmäßig mit Layouttabellen ausgestattet. Ändern Sie das, sind auch barrierefreie Templates möglich.
  
  Frontpage anpassen
  - Die Overrides klappen nur, wenn Sie sich an eine genau vorgegebene Verzeichnisstruktur halten. Denn Joomla! prüft, ob diese Verzeichnisse Anweisungen zu den Overrides enthalten.
    
    Verzeichnisstruktur
    
    04:48
  - Webseiten sollten logisch aufgebaut sein. Das bedeutet unter anderem, dass Überschriften als Überschriften gekennzeichnet sind. Damit das funktioniert, müssen Sie die Core-Ausgabe überschreiben.
    
    Überschrift anpassen
    
    01:41
  - In diesem Video werden sämtliche Tabellen aus der Frontpage entfernt. Denn nur so erreichen Sie eine barrierefreie Ausgabe.
    
    Frontpage-Tabellen
    
    04:37
  - Die Artikel auf der Frontpage werden immer noch mit Layouttabellen ausgegeben. Damit sich das ändert, müssen Sie eine weitere Datei anpassen.
    
    Frontpage-Artikel
    
    05:53
  - Denken Sie beim Gestalten der Frontpage an die CSS-Eigenschaften! Mit denen erreichen bzw. ändern Sie nämlich eine ganze Menge!
    
    CSS anpassen
    
    03:49
- Auch die Ausgabe von Modulen lässt sich ändern. Das lässt sich sinnvoll nur anhand von Beispielen demonstrieren. Mehr in diesem Abschnitt!
  
  Module Overrides
  - Dieses Video liefert einen Überblick, was es mit den Module Overrides eigentlich auf sich hat.
    
    Einführung
    
    02:27
  - Das Abstimmungen-Modul ist ein typischer Vertreter der Module, die nach wie vor auf Tabellenlayouts setzen. Schritt für Schritt entfernen Sie hier die Tabellenelemente.
    
    Poll-Modul
    
    03:48
  - Oftmals gilt es nur, die default.php anzupassen, um die Ausgabe zu steuern. Es gibt aber auch Module, bei denen mehrere Dateien vorhanden sind. Hier das Beispiel: Das Newsflash-Modul.
    
    Newsflash-Modul
    
    03:08
  - Bestimmte Anzeigen im Frontend setzen auf Paginierung: Über diese kann der Betrachter zwischen den einzelnen Seiten hin und her wechseln. Diese Paginierung lässt sich anpassen.
    
    Pagination
    
    03:53
- Bei einem Chrome handelt es sich um den Stil, mit dem ein Modul ausgegeben wird. Typische Stile sind xhtml und table. Wem die Standard-Stile nicht reichen, der kann eigene definieren.
  
  Module Chrome
  - Am Anfang steht die Frage, was es eigentlich mit diesem Module Chrome auf sich hat und wie und wofür man diese Sache eigentlich nutzen kann.
    
    Einführung
    
    01:56
  - In diesem Video definieren Sie eine Funktion, durch die später die Überschriftenordnung variabel gestaltet wird. Hier ist einiges an Tipparbeit zu erledigen.
    
    Funktion
    
    06:31
  - Nachdem die Funktion definiert wurde, muss man sie natürlich noch verwenden. Dieses Video zeigt, wie's genau geht.
    
    Chrome verwenden
    
    05:05
Das Template ist jetzt von der Funktion her eigentlich fertig. Was noch fehlt, sind optische Anpassungen. So gibt es beispielsweise immer wieder Probleme - etwa mit dem Formatieren von Menüs. Dieses Kapitel greift gezielt die gängigsten Problemfälle auf.

Feintuning
- Auch wenn das Template jetzt schon funktioniert - abgeschlossen ist die Arbeit daran noch längst nicht. Denn nun geht es mit dem Feinschliff weiter.
  
  Einführung
  
  01:35
- Das Template verdient und erwartet noch etwas Feintuning. Hier eine neue Farbe, dort ein paar Pixel mehr nach links und schon wirkt alles optisch ansprechender.
  
  Optische Anpassungen
  - Das Suchen-Feld steht in dem Beispiel-Template etwas verloren am oberen, linken Bildrand. Das gilt es natürlich zu ändern.
    
    Suchen-Feld
    
    01:54
  - Das Breadcrumb-Menü ist eine gute Orientierungshilfe für die Besucher der Seite. Dieses Modul muss zunächst eingeblendet und dann am besten auch noch gestaltet werden.
    
    Breadcrumb
    
    02:28
  - Durch einen Template-Chooser räumen Sie Ihren Besuchern die Möglichkeit ein, selbst zu entscheiden, in welchem Template-Design eine Seite angezeigt wird. Hier das entsprechende Modul!
    
    Template-Chooser
    
    03:41
  - Jetzt geht es ans Anpassen der Menüs. Denn so richtig schick sehen die beiden Menüs im linken Bereich noch nicht aus.
    
    Menüs anpassen
    
    04:20
- Ein ganz konkretes Problem: Wie erreicht man, dass eingeloggten Benutzern bestimmte Inhalte nicht angezeigt werden? Über das Backend geht das nicht: Hier muss eine PHP-Abfrage her.
  
  Eingeloggt oder nicht?
  - Dieses Video beschreibt die Problematik: Es gibt Fälle, in denen man Inhalte für registrierte Benutzer nicht anzeigen lassen will. Leider kann man das im normalen Backend nicht einstellen.
    
    Einführung
    
    02:49
  - Damit das Ganze wie gewünscht funktioniert, muss man einige Vorarbeit leisten. Denn nur, wenn die Module jeweils eigene Positionen haben, lässt sich die entsprechende PHP-Abfrage setzen.
    
    Positionen
    
    03:30
  - Jetzt definieren Sie die Abfrage, die überprüft, ob ein Benutzer momentan eingeloggt ist oder nicht. Dazu brauchen Sie nur ein paar Zeilen PHP-Code.
    
    Abfrage
    
    03:02
  - Die Arbeit ist getan, das Ziel erreicht: Das Menü wird jetzt ausgeblendet, wenn sich ein Benutzer in die Seite einloggt.
    
    Menü ausblenden
    
    03:44
- Auch wenn die Arbeit am Template jetzt zum größten Teil getan ist - eine Sache fehlt noch: Es muss daraufhin überprüft werden, ob es sich wie ein richtiges Joomla!-Template installieren lässt.
  
  Installation
  - Bislang wurde nur direkt mit dem Template gearbeitet. Eine Installation fand hingegen noch nicht statt.
    
    Vorarbeiten
    
    01:03
  - Ein Template ist nur dann ein echtes Joomla!-Template, wenn es auch einen Screenshot gibt! Hier erfahren Sie, wie Sie einen solchen Screenshot am besten anlegen.
    
    Screenshot
    
    04:08
  - Es ist vollbracht! Das Template ist fertig. Was jetzt noch fehlt, ist der ultimative Test, ob es sich denn auch tatsächlich wie ein echtes Joomla!-Template installieren lässt.
    
    Installation
    
    03:22
Selbst wenn Sie jetzt schon im Besitz eines eigenen Templates sind, so kann doch JYAML interessant sein. Denn dieses Template bzw. Framework hilft Ihnen beim Erstellen und Verwalten von Spaltenlayouts.

JYAML
- Was ist eigentlich JYAML bzw YAML? Und wie kann es Ihnen die Arbeit erleichtern? Eines ist klar: Wer JYAML einsetzt, erspart sich eine Menge Probleme, mit denen man es bei Spaltenlayouts zu tun bekommt.
  
  Einführung
  
  02:15
- Bevor man JYAML nutzen kann, muss man das Framework natürlich installieren. Das geht aber recht zügig von der Hand.
  
  Installation
  - Wo liegen eigentlich die Vorteile von YAML? Warum - und wann - kann es sinnvoll sein, dieses CSS-Framework überhaupt einzusetzen? Antworten auf diese und andere Fragen gibt dieses Video.
    
    YAML-Vorteile
    
    02:03
  - Jetzt geht es los mit der Installation des JYAML-Frameworks. Die funktioniert übrigens reibunglos und läuft fast automatisch.
    
    JYAML installieren
    
    03:13
- Das JYAML ist recht komplex und verlangt etwas Einarbeitungszeit. Denn es gibt sehr viele Optionen und Schalter, die erst gesetzt werden wollen.
  
  Konfiguration
  - Lernen Sie die Oberfläche von JYAML kennen. Die zahlreichen Optionen wirken nur auf den ersten Blick verwirrend.
    
    Oberfläche
    
    01:29
  - Es ist nie sinnvoll, mit dem originalen Template zu arbeiten: Am besten, Sie verwenden eine Kopie! Geht mal etwas schief, holen Sie das Original-Template wieder zurück.
    
    Template kopieren
    
    01:20
  - Das JYAML birgt eine Vielzahl an CSS-Dateien mit merkwürdigen Namen, die man anfangs nur schwer versteht. Dieses Video erklärt, was Sie wissen müssen.
    
    CSS-Dateien
    
    03:00
- Hauptgrund für den Einsatz von JYAML ist die einfache Handhabung von Spaltenlayouts. Denn mittels JYAML blenden Sie ganz einfach Spalten ein- und aus.
  
  Spalten
  - Für die Arbeit mit Template-Spalten steht ein recht komplexer Bereich in der Konfiguration zur Verfügung.
    
    Konfigurationsoberfläche
    
    01:50
  - Alles, was Sie vorher bei Ihrem eigenen Template per Hand in index.php und templateDetails.xml eintragen mussten, nimmt Ihnen JYAML ab. Denn hier stellen Sie Positionen und Stile über Auswahlfelder ein!
    
    Positionen
    
    02:19
  - Nicht nur Positionen, auch Module lassen sich einbinden. Wie das funktioniert, zeigt dieses Video.
    
    Module
    
    01:32
  - Im Handumdrehen weisen Sie Spalten neue Modulpositionen zu. Vorbei die Zeiten, als man dafür noch selbst in der index.php Hand anlegen musste.
    
    Modulpositionen
    
    01:40
  - Anders, als beim eigenen Template "mühsam" per PHP und CSS bewerkstelligt, blendet JYAML Spalten von sich aus bei Bedarf aus.
    
    Ausblenden
    
    01:17

Trailer: Joomla! Templates Video-Training

Früher oder später stößt man mit den Standard-Templates, die mit Joomla! ausgeliefert werden, an seine Grenzen beziehungsweise möchte etwas mehr Individualität. Genau hier setzt dieses Video-Training an. Denn manchmal genügen schon ein paar wenige Anpassungen im Code, um im Frontend ein völlig anderes Ergebnis zu bekommen. Wem das nicht genügt, der muss sich mit diesen einfachen Anpassungen nicht zufrieden geben. Denn der Fokus dieses Video-Trainings liegt auf der Entwicklung eigener Templates. Damit ist es sowohl für diejenigen gedacht, die ein wenig mehr Farbe in ihr Standard-Template bringen wollen, als auch für Entwickler, die Ihre eigenen Templates definieren wollen.

Aus dem Inhalt:

Grundlagen

Dieses Kapitel zeigt, wie das Zusammenspiel zwischen Joomla! und den Templates funktioniert und liefert den Überblick über die wichtigsten Frontpage-Komponenten.

Templates anpassen

Man muss nicht immer wieder das Rad aufs Neue erfinden. Dieses Kapitel zeigt, wie Sie mit wenigen Handgriffen das Aussehen vordefinierter Templates anpassen.

Grundlayout fürs Template

Die Grundlage von Joomla!-Templates bildet eine Kombination aus CSS und HTML. In diesem Kapitel werden die wichtigsten CSS-Elemente vorgestellt, die Sie für die Definition eigener Templates brauchen.

Die Template-Dateien

In Joomla! Ist exakt vorgegeben, welche Verzeichnisse und Dateien in jedem Fall vorhanden sein müssen. Genau darum dreht es sich in diesem Kapitel.

Inhalte ausgeben

Das Grundlayout steht - jetzt geht es daran, die eigentlichen Inhalte aus dem Backend ins Frontend zu holen. In diesem Kapitel greifen Sie auf Module zu und zeigen diese im Frontend an.

Overrides

Auch wenn das Layout barrierefrei gestaltet ist - ein Problem bleibt: Viele Module verwenden für die Ausgabe nach wie vor Tabellen. Durch Overrides lässt sich die Ausgabe im Frontend überschreiben.

Feintuning

Das Template ist jetzt von der Funktion her eigentlich fertig. Was noch fehlt, sind optische Anpassungen. So gibt es beispielsweise immer wieder Probleme - etwa mit dem Formatieren von Menüs. Dieses Kapitel greift gezielt die gängigsten Problemfälle auf.

JYAML

Selbst wenn Sie jetzt schon im Besitz eines eigenen Templates sind, so kann doch JYAML interessant sein. Denn dieses Template bzw. Framework hilft Ihnen beim Erstellen und Verwalten von Spaltenlayouts.

Systemvoraussetzungen

512 MB RAM
DVD-Laufwerk
Soundkarte, Lautsprecher bzw. Kopfhörer
Bildschirmauflösung mind. 1024x768
Windows XP/Vista oder Mac OS X ab 10.1
Pentium 4 ab 2,6 GHz oder G5

"...enstsprechend"

Claudia Itzwerth

An sich ein ganz gutes Video, allerdings benutzt Daniel Koch das Wort \entsprechend\. Dauernd. Ständig. In einer Tour. Über dreissig mal in einem Beitrag und weit über 800 mal (ich hab dann mal aufgehört zu zählen) im ganzen Video. Blöde, dass es mir aufgefallen ist, den jetzt dreh ich natürlich jedesmal durch, wenn ich eine der Lektionen schaue und entsprechend oft das Wort kommt.

Ansonsten habe ich viel gelernt.

Joomla! 1.6

M. J.

hallo,

das training finde ich sehr gut. wird es auch für Joomla 1.6 ein Template-Video geben? ich bin gespannt....

gruss M.J.

Anmerkung von v2b:

In Joomla! 1.6 wird sich in Sachen Templates nichts ändern.

Das Video-Training ist also auch mit Erscheinen der neuen Joomla!-Version noch aktuell.

Menüstruktur & Sprachgewöhnheiten

Robert Maier

An sich gelungenes und vor allem das einzige Template-Video wenn nicht; die unnötig tief verschachtelte Menüstruktur und so manche Wörte (entsprechende :)) etc.) die unreflektiert und zum 1000 mal benutzt werden. Vom Profisprecher dürfte mehr erwartet werden.

entsprechend macht mich fast wahnsinnig

Joachim Haubrich

Bis heute war ich begeistert von der video-tutorial Reihe.
Bin jetzt seit einer halben Stunde an diesem Tutorial und das Wort "entsprechend" wird so häufig benutzt (ca 5x/Minute), dass ich fast nicht mehr weiterarbeiten kann. Es macht mich wahnsinnig.
Ich werde versuchen, das zu überhören, weil ich glaube, dass dieses Tutorial doch sehr nützliche Info gibt.
Aber ich verstehe nicht, dass niemand den Sprecher darauf aufmerksam gemacht hat, dieses Wort nicht immer und ständig zu benutzen.
Ich möchte dem Sprecher auch nicht zu Nahe treten, aber er sollte wirklich daran arbeiten, dieses Wort aus seinem Wortschaft zu löschen.

Kunden, die dieses Training gekauft haben, kauften auch

Joomla! Templates

Templates entwickeln und anpassen

Trailer: Joomla! Templates Video-Training

Aus dem Inhalt:

Systemvoraussetzungen

Filminformationen