Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.
 
Inhaltsverzeichnis
Vorwort
Teil I Grundlagen
1 Einleitung
2 Testumgebung einrichten
3 Live-Umgebung einrichten
4 Website planen
Teil II Joomla! benutzen
5 Website-Frontend kennenlernen
6 Administrations-Backend bedienen
7 Content verwalten
8 Contentpflege konfigurieren
9 Menüs aufbauen
10 Layout und Design anpassen
11 Benutzerverwaltung einrichten
12 Mehrsprachigkeit aktivieren
13 System konfigurieren
Teil III Joomla! erweitern
14 Erweiterungen aktivieren
15 Offizielle Joomla!-Komponenten
16 Empfohlene Erweiterungen
17 Joomla! als Content-Management‐System
18 Joomla! als Community-Plattform
19 Joomla! als Online-Shop
Teil IV Joomla! warten
20 Wartung allgemein
21 Joomla! und Content deployen
22 Sicherheit ausbauen
23 Performance- und Suchmaschinenoptimierung
24 Notfallmaßnahmen
Teil V Joomla!-Erweiterungen entwickeln
25 Grundlagen zur Erweiterungsentwicklung
26 Templates entwickeln
27 Plugins entwickeln
28 Module entwickeln
29 Komponenten entwickeln
30 Erweiterungen veröffentlichen
Stichwortverzeichnis

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Joomla! 3 von von Richard Eisenmenger
Das umfassende Handbuch
Buch: Joomla! 3

Joomla! 3
Pfeil 10 Layout und Design anpassen
Pfeil 10.1 Homepage anpassen
Pfeil 10.1.1 Homepage-Spaltenlayout anpassen
Pfeil 10.1.2 Beitrags-Metadaten zurechtstutzen
Pfeil 10.1.3 Reihenfolge der Haupteinträge ändern
Pfeil 10.1.4 Andere Seite als Homepage festlegen
Pfeil 10.2 Module einrichten
Pfeil 10.2.1 Neues Modul erstellen
Pfeil 10.2.2 Modul positionieren
Pfeil 10.2.3 Moduldarstellung einschränken
Pfeil 10.2.4 Weitere Darstellungseinstellungen zu Modulen
Pfeil 10.2.5 Alle Modultypen vorgestellt
Pfeil 10.3 Templates verwalten
Pfeil 10.3.1 Templates pro Webseite festlegen
Pfeil 10.3.2 Template konfigurieren
Pfeil 10.3.3 Mehrere Templatestile verwenden
Pfeil 10.4 Neue Templates im Internet finden und installieren
Pfeil 10.4.1 Template-Frameworks
Pfeil 10.4.2 Template herunterladen
Pfeil 10.4.3 Template installieren
Pfeil 10.4.4 Nach der Templateinstallation
Pfeil 10.4.5 Templates deinstallieren
Pfeil 10.5 Template anpassen
Pfeil 10.5.1 HTML-Code ergänzen
Pfeil 10.5.2 Personalisierte CSS-Dateien verwenden
Pfeil 10.5.3 CSS-Overrides anlegen
Pfeil 10.5.4 Template-Overrides einsetzen
Pfeil 10.6 Schriften einbetten
 
Zum Seitenanfang

10.3    Templates verwalten Zur vorigen ÜberschriftZur nächsten Überschrift

Als grundsätzliches Merkmal für ein Content-Management-System gehören Templates zu den Features, die Joomla! besonders attraktiv für Webprojekte macht. Denn mit einem Template ist es im Handumdrehen möglich, das komplette Aussehen der Website vollständig zu verändern.

Templates im Sinne von Content-Management-Systemen stellen das Layout und Design für eine Website, in die die Inhalte, Texte und Bilder, injiziert werden. Joomla! erfüllt damit ein wichtiges Paradigma, Inhalte von Design strikt zu trennen, damit beide Bestandteile unabhängig voneinander bearbeitet und aktualisiert werden.

In der Joomla!-Lingo ist ein Stil eine Ausprägung eines Templates. Über den Templatemanager kopieren Sie beispielsweise ein installiertes Template, um in der Kopie, dem neuen Stil, andere vom Originalstil abweichende Einstellungen vorzunehmen.

Nach der Installation bietet Joomla! vier sehr rudimentäre Templates, deren Einstellungen man über das Menü ErweiterungenTemplates erreicht ( siehe Abbildung 10.14). Tatsächlich befinden Sie sich jetzt auf der Stileseite (blau hinterlegt); die Templateansicht darunter beherbergt Informationen über die Templates (Vorschaubilder, letztes Aktualisierungsdatum, Autorenadressen etc.) und erlaubt Zugriff auf die einzelnen Dateien, die zum Template gehören. Dazu später mehr.

Die Joomla!-Standardinstallation kommt mit vier Templates daher – zwei fürs Back- und zwei fürs Frontend; über die Spalte »Standard« markieren Sie das jeweils aktive Template.

Abbildung 10.14    Die Joomla!-Standardinstallation kommt mit vier Templates daher – zwei fürs Back- und zwei fürs Frontend; über die Spalte »Standard« markieren Sie das jeweils aktive Template.

Praktisch: Für Back- und Frontend sind verschiedene Templates und Templatestile wählbar. So findet die Contentpflege in einem möglichst übersichtlichen Layout statt, während die eigentliche Website für Besucher den strengen Corporate-Identity-Designrichtlinien folgt.

 
Zum Seitenanfang

10.3.1    Templates pro Webseite festlegen Zur vorigen ÜberschriftZur nächsten Überschrift

Joomla! geht aber noch einen Schritt weiter. Ein paar Mausklicks entfernt befindet sich die Option, Template und Templatestile pro Webseite festzulegen. Das hört sich zunächst wie ein fürchterliches Designchaos an, immerhin sollten alle Webseiten einem einheitlichen Stil folgen. Aber vielleicht erfordert ein Folgeauftrag die Erstellung einer kleinen Microsite – die auf dem gleichen System unter gleicher Domain zu hosten ist, z. B. ein Formular, auf das Besucher durch eine Werbeflyer-Aktion gelangen. Dann erhält diese besondere Seite ihr eigenes, aber ähnliches Design über eine Templatestil-Einstellung:

  1. Klicken Sie im Templatemanager auf den Namen des Templates, das auf die besonderen Seiten angewendet wird. Das ist also nicht das mit dem Stern markierte Standardtemplate, im Screenshot-Beispiel Beez3.

  2. Wählen Sie den Punkt Menüzugehörigkeit unter dem Textfeld Name des Stils.

  3. Markieren Sie nun wie in Abbildung 10.15 die Menüeinträge/Webseiten, auf die das alternative Template angewendet wird. Das Beispiel im Screenshot beschränkt sich auf alle Seiten aus dem Footer Menu, dem Impressum und der Datenschutzerklärung.

  4. Speichern & Schliessen Sie das Formular, und testen Sie die neue Seitendarstellung im Frontend.

Über die »Menüzugehörigkeit« ordnen Sie beliebigen Seiten alternative, nicht als Standard markierte Templates zu.

Abbildung 10.15    Über die »Menüzugehörigkeit« ordnen Sie beliebigen Seiten alternative, nicht als Standard markierte Templates zu.

Info: Templatestil über die Menükonfiguration festlegen

Die Komponenten von Joomla! sind so eng miteinander verdrahtet, dass Sie Einstellungen über verschiedene Wege erreichen. Im Falle der Zuweisung eines Templatestils zu einer Seite bzw. einem Menüeintrag geschieht das z. B. nicht nur über den Templatemanager, sondern auch über die Eigenschaften des Menüeintrags.

Die Zuweisung eines beliebigen Templatestils zu einer Webseite ist auch über die Einstellungen des entsprechenden Menüeintrags möglich.

Abbildung 10.16    Die Zuweisung eines beliebigen Templatestils zu einer Webseite ist auch über die Einstellungen des entsprechenden Menüeintrags möglich.

 
Zum Seitenanfang

10.3.2    Template konfigurieren Zur vorigen ÜberschriftZur nächsten Überschrift

Abhängig von der Flexibilität des eingesetzten Templates modifizieren Sie im Administrations-Backend Darstellung und Aussehen anhand seiner Einstellungen (Jargon: customizen). Die Auswahl und Anzahl der Konfigurationsmöglichkeiten unterscheidet sich dabei extrem von Template zu Template. Klicken Sie dazu im Templatemanager auf den Templatenamen, und wählen Sie den Reiter Erweitert direkt unter Name des Stils.

Im Falle des mit Joomla! installierten Frontend-Templates Protostar sind die Einstellungsmöglichkeiten rudimentär, siehe Abbildung 10.17.

Im Reiter »Erweitert« passen Sie die Templatedarstellung an – welche Optionen zur Verfügung stehen, unterscheidet sich von Template zu Template.

Abbildung 10.17    Im Reiter »Erweitert« passen Sie die Templatedarstellung an – welche Optionen zur Verfügung stehen, unterscheidet sich von Template zu Template.

Template-Farbe bezeichnet eine Schmuckfarbe für Links und Überschriften. Hintergrundfarbe betrifft den Webseitenhintergrund. Es darf ein Logo hochgeladen werden. Titel überschreibt den Standardnamen der Website, und Beschreibung ist eine kleine zusätzliche Textzeile unterhalb des Titels.

Interessant ist die Möglichkeit, Überschriften einen Google Font zuzuweisen (verfügbare Schriften listet die Webseite https://www.google.com/fonts). Fluid Layout ist ein Schritt Richtung Responsive Design – diese Option hebt die starre Seitenbreite auf und nutzt die gesamte Browserfensterbreite. Ist das Browserfenster besonders schmal, z. B. auf Smartphones, werden Elemente, insbesondere die Module an der rechten Kante, umpositioniert; sie erscheinen dann am unteren Ende der Seite.

 
Zum Seitenanfang

10.3.3    Mehrere Templatestile verwenden Zur vorigen ÜberschriftZur nächsten Überschrift

Kombiniert man die eingangs vorgestellten Stile (Ausprägungen eines Templates) mit der Templatekonfiguration, ergeben sich interessante Möglichkeiten, besonderen Seiten ein eigenes, leicht vom Standard abweichendes Aussehen zu verpassen. Im vorigen Abschnitt wiesen Sie testweise den Seiten Impressum und Datenschutz das Template Beez3 zu. Sie werden zustimmen, dass die beiden Templates Protostar und Beez3 bezüglich des Designs nicht miteinander harmonieren. Erzeugen Sie jetzt deshalb eine Variation des Protostar-Templates: einen neuen Stil für die beiden besonderen Seiten.

  1. Markieren Sie im Templatemanager das protostar-Template mit einem Häkchen, und klicken Sie in der Buttonleiste auf Kopieren. Joomla! legt jetzt ein Duplikat des Templates unter dem Namen protostar - Default (2) an.

  2. Klicken Sie auf den Namen des neuen Templates, und ändern Sie Name des Stils zu protostar für allgemeine Seiten, damit Sie auch später nach Anlage von fünf oder mehr Stilen nicht die Übersicht verlieren.

  3. Wechseln Sie zum Reiter Erweitert, und ändern Sie die Template-Farbe zu #ED7F00.

  4. Wechseln Sie zum Reiter Menüzugehörigkeit, und markieren Sie die Seiten, auf die der neue Stil angewendet wird – in diesem Fall das Impressum und die Datenschutzerklärung.

  5. Speichern & Schliessen Sie die Templatestil-Konfiguration, und prüfen Sie die Seiten im Frontend.

Mit wenigen Mausklicks haben Sie nun eine dezente Variation des Templates angelegt, die sich nicht zu stark vom Originaldesign unterscheidet, die ausgewählten Seiten aber in hervorgehobenes Licht rückt. Sie können natürlich auch die anderen Protostar-Eigenschaften anpassen, seien Sie allerdings mit dem Einsatz einer völlig anderen Schrift oder einer Mischung von Fluid- und Static-Layouts vorsichtig.

 


Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.

>> Zum Feedback-Formular
<< zurück
 Zum Katalog
Zum Katalog: Joomla! 3 Joomla! 3
Jetzt bestellen

 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Katalog: HTML5 und CSS3
HTML5 und CSS3


Zum Katalog: Schrödinger lernt HTML5, CSS und JavaScript
Schrödinger lernt HTML5, CSS und JavaScript


Zum Katalog: Einstieg in PHP 7 und MySQL
Einstieg in PHP 7 und MySQL


Zum Katalog: PHP 7 und MySQL
PHP 7 und MySQL


Zum Katalog: Erfolgreiche Websites
Erfolgreiche Websites


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2019
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern