Joomla-Tipps.net

Joomla 1.5 Template Tutorial

Es ist Teil des Buches "Joomla! A User's Guide: Building a Joomla! Powered Website", Prentice Hall Professional, das vor kurzem erschienen ist.

Das Tutorial basiert auf Joomla! 1.5 RC2 und ist entsprechend weiterer Release Candidates bzw. der endgültigen produktiven Version von Joomla! 1.5 Änderungen unterworfen.

Auf den Download der Beispieldateien von www.compassdesigns.net wird im Tutorial verwiesen. Hierzu ist eine kostenlose Registrierung erforderlich.

Edit 13.4.2008: Weiterhin kann hier ein Zip mit den Templates und einem englischsprachigen PDF heruntergeladen werden.

Ein PDF dieser Übersetzung wird nicht zum Download angeboten.

Fehlermeldungen und Verbesserungsvorschläge bitte an: Mail

Andreas Hartmann

Changelog +/-

Entwicklung eines CSS-basierten Joomla! 1.5 Template

In diesem Kapitel werden wir schrittweise ein Joomla! Template entwickeln. Dabei werden wir CSS benutzen, um ein Layout ohne Tabellen anzulegen. Dies ist ein erstrebenswertes Ziel, denn es bedeutet, den Templatecode einfacher gegen die Standards des World Wide Web Consortium (W3C) zu validieren. Außerdem lädt der Code schneller, ist besser zu warten und ergibt bessere Ergebnisse in Suchmaschinen. Diese Punkte werden später näher erläutert.

• Was ist ein Joomla! Template? Welche Funktionen werden von einem Joomla! Template übernommen und worin liegt der Unterschied zwischen einem Template ohne bzw. mit Inhalten aus dem Content Management System (CMS).
• Wie unterscheidet sich der lokale Entwicklungsprozess zu der Entwicklung einer statischen X (HTML) Seite?
• Was sind die Folgen eines tabellenlosen Design und der Beziehung zwischen W3C Standards, Bedienbarkeit (Usability) und Zugänglichkeit (Accessibility)?
• Welche Dateien sind für ein Joomla! Template notwendig und welche Funktionen nehmen sie wahr?
• Wie entwickeln Sie ein quelltextgeordnetes, dreispaltiges Template unter Benutzung von CSS?
• Was sind die grundlegenden CSS Styles welche mit Joomla! benutzt werden sollten und was sind die Styles, die vom Joomla! Core benutzt werden?
• Wie werden Module platziert und deren Styles verändert, welche neuen Techniken werden für 'runde Ecken' verwendet?
• Wie werden schlanke CSS-Menüs aufgebaut, um den Effekt von in Javascript erzeugten Menüs zu erzeugen?
• Wie wird die Anzeige von Spalten kontrolliert, wenn sich dort keine Inhalte befinden
• Was sind die richtigen Schritte, ein Joomla! 1.5 Template aufzubauen?

Was ist ein Joomla! Template?

Ein Joomla! Template ist eine Sammlung von Dateien innerhalb des Joomla! CMS, welches die Ausgabe der Inhalte (Content) kontrolliert. Das Joomla! Template ist weder eine Webseite noch übernimmt es das komplette Design einer Webseite. Das Template ist die grundlegende Basis für die Sicht auf Ihre Joomla! Website. Es arbeitet dabei eng mit den Inhalten zusammen, die in der Datenbank gespeichert sind. Ein Beispiel hier:

9.1 Template mit und ohne Inhalte

Bild A zeigt ein Template mit Beispielcontent. Bild B zeigt das Template nach der Installation von Joomla! mit wenig oder keinem Content. Auf eingefügte Inhalte werden die im Template-Stylesheet definierten Stile angewandt. Beispiele hierfür: Das Aussehen von Links, Menüs, Navigation, Textgrößen und Farben, um nur wenige zu nennen.

• Inhalte und deren Präsentation sind komplett getrennt, besonders wenn CSS für das Layout benutzt wird (im Gegensatz zum Einsatz von Tabellen in der index.php). Dies ist das Hauptkriterium für eine Seite, die sich nach modernen Webstandards richtet.
• Ein neues Template und damit ein neues Aussehen der Webseite kann sofort integriert werden. Dieses kann sich sowohl auf das Layout, die Positionen der angezeigten Inhalte als auch auf die Farben und Grafiken auswirken.
• Die Verwendung verschiedener Layouts innerhalb einer Webseite ist schwierig zu realisieren.

Obwohl verschiedene Templates einzelnen Seiten zugeordnet werden können, ist diese eingebaute Funktionalität nicht zuverlässig einsetzbar. Viel besser ist es, PHP-Code zu verwenden, um ein Layout zu erzeugen, das abhängig vom veröffentlichten Inhalt die Anzahl der Spalten festlegt.

Localhost Designprozess

Eine Joomla! Webseite ist nicht statisch. Das bedeutet, dass sie dynamisch mit den in der Datenbank gespeicherten Inhalten aufgebaut wird. Die Seite, die man sieht, wurde vorher unter Verwendung verschiedener PHP-Befehle im Template erzeugt. Dies gibt einige Schwierigkeiten in der Entwicklungsphase auf.

Es ist heute üblich, einen "What You See Is What You Get" (WYSIWYG) HTML Editor wie zum Beispiel Dreamweaver einzusetzen. Webdesigner müssen also nicht HTML programmieren. Jedoch ist dies nicht bei der Entwicklung eines Joomla! Templates möglich, weil WYSIWYG Editoren keine dynamische Webseite anzeigen können. Darum müssen die Seiten "von Hand" programmiert werden und die Ausgabe auf einem Webserver angesehen werden. Dieser könnte ein externer Server sein, wenn eine schnelle Internetanbindung zur Verfügung steht. Die meisten Webdesigner nutzen allerdings einen "local Server" auf Ihrem eigenen Rechner. Dies ist eine Software, welche die Seiten auf dem Rechner des Designers aufbaut und anzeigt.

Es gibt keinen idealen Weg eine Webseite zu kreieren, es hängt von den Fähigkeiten des Designers ab. Die mehr grafisch bewanderten werden ein "Bild" einer Seite in einem Grafikprogramm wie Photoshop aufbauen und dies in mehrere Bilder aufteilen (slice and dice). Die mehr technisch orientierten Designer beginnen mit der Programmierung des CSS. Aufgrund der oben beschriebenen Einschränkung, die Änderungen im Code nicht sofort im Editor zu sehen, empfiehlt sich folgendes Vorgehen in der Entwicklung:

1. Editieren Sie im HTML Editor, Sichern Sie die Änderungen
2. Lassen Sie den 'localhost Server' im Hintergrund laufen, um darin Joomla! zu starten.
3. Prüfen Sie die Änderungen in einem Webbrowser
4. Gehen Sie wieder zu 1.

Localhost Server Optionen

In Kapitel 2 haben wir die Installation eines lokalen Webservers kennengelernt. Im einzelnen haben wir WAMP5 beschrieben. Um diesem Kapitel weiter folgen zu können, sollten Sie ihn jetzt installieren.

W3C und tabellenfreies Design

Usabilty, Accessibility und Suchmaschinenoptimierung sind Ausdrücke, die benutzt werden, um eine hochwertige Webseite im heutigen World Wide Web zu beschreiben. In der Realität gibt es allerdings eine große Überschneidung in der Definition dieser Begriffe. Der einfachste Weg, diese drei Ziele zu erreichen, ist den Aufbau der Seite an den W3C Web Standards auszurichten.

Zum Beispiel ist eine Seite, die nach X(HTML) strukturiert ist (XHTML definiert das Dokument, nicht dessen Aussehen) mit einem Screenreader für Sehbehinderte einfach zu lesen. Auch ein Suchmaschinenspider wird damit keine Probleme haben. Google ist gewissermaßen blind bei dem Lesen einer Seite.

9.2 Überschneidung von Usability, Accesibility und SEO

Web Standards legen einen gemeinsamen Regelsatz für alle Webbrowser fest, um eine Seite darzustellen. Die Organisation, welche diese Standards festlegt, ist das World Wide Web Consortium (WC3), dessen Direktor Tim Berners-Lee das World Wide Web 1989 begründet hat.

Um Ihnen zu erklären, woher Web Standards kommen, ist ein Blick in die Geschichte hilfreich. Viele Webseiten werden für ältere Browser entwickelt. Warum? Browser haben sich kontinuierlich seit dem Beginn des WWW weiter entwickelt. Neue wurden vorgestellt und ältere verschwanden (erinnern Sie sich an Netscape?).

Die W3C Standards dienen dazu, hoffentlich die Browserhersteller zu drängen, konforme Browser herzustellen, damit die Designer nur noch auf einer gemeinsamen Grundlage entwickeln können.

Ein anderer komplizierender Faktor ist, daß verschiedene Browserhersteller (wie Microsoft) ihre Browser HTML/XHTML ein wenig unterschiedlich interpretieren lassen. Dies hat die Webdesigner dazu geführt, Ihre Seiten so zu entwickeln, daß diese sowohl ältere als auch neue Browser unterstützen. Oft wird also entschieden, daß die Webseite in den sogenannten "legacy" Browsern eine gute Figur machen soll.

Die W3C Standards wurden entwickelt, um Konsistenz sicher zu stellen.

Es ist einfach, Ihren Code bei validator.w3.org überprüfen zu lassen. Stellen Sie sicher, daß Sie den richtigen DOCTYPE verwenden, wenn Sie Ihren Code validieren lassen. Dieser Artikel bei Compass Designs beschreibt einen validen Joomla! DOCTYPE

Fragen Sie fünf Webdesigner, was Web Standards sind, Sie werden fünf Antworten bekommen. Aber die meisten würden zustimmen, daß diese auf folgenden Punkte beruhen:

Semantisch korrekter Code

Wir erwähnten schon; Semantisch bedeutet, daß X(HTML) in der Webseite nur die Inhalte und nicht die Präsentation beschreibt. Dies meint besonders einen strukturierten Aufbau von z.B. h1/h2 Tags und ein alleiniger Einsatz von Tabellen für Tabellendaten und nicht für das Layout der Webseite.

Cascading Style Sheets (CSS)

Nah verbunden mit der Entwicklung semantischen Codes werden Cascading Style Sheets verwendet, um das Aussehen und den Aufbau der Webseite zu kontrollieren. Cascading Style Sheets (CSS) sind ein einfacher Weg, um Stile (Styles) für Webseiten festzulegen (z.B. Fonts, Farben, Abstände) (Quelle: www.w3.org/style/CSS/). CSS existieren parallel zum X(HTML) Code und lassen eine Trennung von Inhalten (semantischen Code) und der Präsentation zu. Das beste Beispiel ist CSS Zen Garden, eine Seite, auf welcher der semantische Code auf eine einzigartige Weise mit unterschiedlichen CSS dargestellt wird. Das Ergebnis ist eine sehr differenzierte Darstellung mit dem jeweils gleichen Content.

Webseiten mit Joomla! zu entwickeln, stellen beachtliche Anforderungen bei der Validierung nach den W3C Standards. In den derzeitigen Joomla!-Versionen (1.0.X) benutzt der Code eine große Anzahl von Tabellen, um die Seite anzuzeigen. Dies bedeutet keine konsequente Verwendung von CSS für die Präsentation, noch generiert dies semantisch richtigen Code.Das Problem verstärkt sich dadurch, daß nur wenige Drittentwickler CSS nutzen, sondern Tabellen.

Jedoch bedeutet tabellenfrei nicht das gleiche wie valide. Es ist sicherlich möglich, eine valide Seite mit Tabellen aufzubauen. Es ist nur um ein einiges schwieriger. Ein guter Forumsthread erklärt dies im Detail: Easy tricks to remove many tables from the standard output of Joomla!

Glücklicherweise hat das Joomla! Core Development Team sich dieses Problems angenommen. In der Version 1.5 ist es für Template Designer möglich, die Ausgabe des Cores zu übersteuern (override), auch view genannt, um die Ausgabe von Tabellen zu entfernen und das Layout individuell zu erstellen.

Trotzdem sollte bei der Entwicklung eines Templates darauf geachtet werden, daß es zugänglich (accessible) ist (zum Beispiel in der Größe veränderbare Fonts), anwendbar (usable) ist (z.B. eine klare Navigation) und optimiert ist für Suchmaschinen (z.B. quelltextgeordnet - source ordered).

Ein einfaches leeres Template

Um die Inhalte eines Templates zu verstehen, sehen wir uns zuerst ein leeres Joomla! Template an.

Die Templatedateien

Die Dateien müssen in das /templates Verzeichnis der Joomla!-Installation kopiert werden. Wenn zum Beispiel zwei Templates installiert sind, sieht das Verzeichnis so aus:

/templates/element
/templates/voodoo

Beachten sie, daß der Verzeichnisname des Templates der gleiche wie der Name des Templates sein muss, in diesem Fall element und vodoo. Offensichtlich sind diese casesensitiv und dürfen keine Umlaute beinhalten. Innerhalb des Template-Verzeichnisses befinden sich folgende Dateien:

/element/templateDetails.xml
/element/index.php

templateDetails.xml

index.php

In den meisten Templates werden weitere Dateien benutzt. In der Regel (aber von Joomla! nicht vorgeschrieben) werden diese wie folgt benannt und gespeichert:

/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png

Beispiele:

templateDetails.xml

In der templateDetails.xml müsen alle Dateien enthalten sein, die im Template eingebunden werden. Weiterhin sind dort Informationen über den Autoren und ein Copyright vorhanden. Manche davon werden im Backend Template Manager angezeigt.

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<creationDate>August 2007</creationDate>
<author>Barrie North</author>
<copyright>GPL</copyright>
<authorEmail> compassdesigns@gmail.com</authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description>First example template for Chapter 9 of the Joomla Book<
/description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
<params>
<param name="colorVariation" type="list" default="white" label="Color
            Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
</param>
</params>
</install>

• <install version="1.5" type="template">.
Anweisung für den Joomla!-Installer, die Option type="template" informiert ihn darüber, daß ein Template installiert werden soll.
• <name>TemplateTutorial15</name>.
Der Name des Templates. Dieser hier angegebene Name wird benutzt, um das Verzeichnis im Joomla! Templates Verzeichnis anzulegen. Deshalb dürfen hier keine Zeichen enthalten sein, mit denen das Dateisystem nicht umgehen kann, z.B. Leerzeichen. Wenn Sie das Template manuell installieren, müssen Sie ein Verzeichnis anlegen, dessen Name identisch mit dem hier angegebenen ist.
• <creationDate>August 2007</creationDate>
Das Datum, an dem das Template kreiert wurde. In diesem ist ein bestimmtes Format nicht vorgeschrieben und kann z.B. so aussehen: May 2005, 08-June-1978, 01/01/2004 etc.
• <author>Barrie North</author>.
Der Name des Templateautoren
• <copyright>GPL</copyright>. Alle Copyright-Informationen sind hier aufgeführt. Ein Beitrag hierzu im Joomla! Forum: Licensing Primer for Developers & Designers
• <authorEmail>...</authorEmail>.
Die E-Mail Adresse, unter welcher der Autor erreicht werden kann.
• <authorUrl>www.compassdesigns.net</authorUrl>
Die Website des Autoren
• <version>1.0</version>.
Die Version des Templates
• <files></files>. Der "files" Abschnitt beinhaltet alle Dateien wie z.B. PHP Dateien oder das Previewbild des Templates. Jede hier aufgeführte Datei ist von <filename> </filename> umgeben.

  <files>
  <filename>index.php</filename>
  <filename>templateDetails.xml</filename>
  <filename>js/somejsfile.js</filename>
  <filename>images/threecol-l.gif</filename>
  <filename>images/threecol-r.gif</filename>
  <filename>css/customize.css</filename>
  <filename>css/layout.css</filename>
  <filename>css/template_css.css</filename>
  </files>
  

  Alle Bilddateien, welche vom Template genutzt werden, sind hier aufgeführt. Wieder ist jeder Eintrag von <filename> </filename> umgeben. Die Pfadinformationen sind relativ zum Wurzelverzeichnis (Root) des Templates angegeben. Beispiel: Wenn sich die Bilder im Unterverzeichnis /images befinden, wäre der korrekte Pfad: <filename>images/my_image.jpg</filename> Hier befinden sich auch die Stylesheets. Wieder ist der Dateiname in <filename> </filename> eingerahmt und der Pfad relativ zum Root des Templates angegeben

index.php

Die index.php beinhaltet eine Kombination von X(HTML) und PHP, in der alles hinsichtlich des Layouts und der Präsentation der Seiten festgelegt ist. Zuerst sehen wir uns den kritischen Teil an, der für ein valides Template notwendig ist: Den DOCTYPE zu Beginn der index.php. An erster Stelle der index.php befindet sich folgendes:

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Die erste PHP-Zeile stellt sicher, daß der Code aus Sicherheitsgründen nicht direkt aufgerufen werden kann.

Der DOCTYPE einer Webseite ist maßgeblich daran beteiligt, wie die Seite im Browser angezeigt wird und wie im besonderen CSS interpretiert wird. Eine Aussage von alistapart.com:

[Information on W3C's site about doctypes is] "written by geeks for "geeks. And when I say geeks, I don't mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She's Got Mail.

Wie auch immer gibt es mehrere DOCTYPEs, die Sie nutzen können. Grundsätzlich informiert der DOCTYPE den Browser darüber, wie eine Webseite interpretiert wird, "strict" oder "transitional" beispielsweise.

Seit dem Beginn des WWW bieten verschiedene Browser auch eine unterschiedliche Unterstützung von CSS. Dies heißt zum Beispiel, daß der Internet Explorer 6 nicht die Anweisung "min-width" versteht, mit ihr wird die minimale Seitenbreite vorgegeben. Um diesen Effekt zu erzeugen, sind "hacks" im CSS notwendig.

Strict bedeutet, daß HTML oder XHTML genau den Standards entsprechend interpretiert wird. Ein transitional DOCTYPE erlaubt dagegen einige kleinere Abweichungen vom Standard.

Um die Sache noch zu komplizieren, gibt es einen sogenannten Quirksmode. Wenn der DOCTYPE falsch, veraltet oder einfach nicht angegeben ist, wechselt der Browser in den Quirksmode. Dies bezeichnet den Versuch des IE, rückwärts kompatibel zu sein, er interpretiert die Seite in Gestalt des IE 4.

• Der Aufruf des DOCTYPE erfolgt direkt von der W3C Webseite. Der Link endet so:

  DTD/xhtml1-strict.dtd

  Dieser relative Link muss dann in einen mit vollem Pfad umgesetzt werden
• Microsoft hat für den IE 6 eine Einstellung, um den Quirksmode einzuschalten. Dies geschieht, indem sich eine XML Anweisung vor dem DOCTYPE befindet.

  Hier ein XML-Statement (nach dem DOCTYPE):

  <html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="<?php echo $this->language; ?>"
  lang="<?php echo $this->language; ?>" >
  

Die Betrachtung des Quirksmode ist wichtig. In diesem Tutorial werden wir ausschließlich für den IE6+ entwickeln. Wir stellen also sicher, daß der Browser sich im Standard-Modus befindet. Dies minimiert das spätere Einbringen von Hacks.

Nützliche Links, welche helfen, DOCTYPE und Quirksmode zu verstehen

• http://www.quirksmode.org/css/quirksmode.html
• http://www.alistapart.com/stories/doctype
• http://www.w3.org/QA/2002/04/Web-Quality
• http://forum.joomla.org/index.php/topic,7537.0.html
• http://forum.joomla.org/index.php/topic,6048.0.html

Mehr über die index.php

Sehen wir uns die Struktur des Kopfteils (Header) näher an. Wir wollen diesen so klein wie möglich halten, aber dennoch ausreichend für eine produktive Seite.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted
access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/template.css" type="text/css" />
</head>

Den DOCTYPE haben wir bereits besprochen. Die Anweisung <?php echo $this->language; ?> lädt die Sprache aus der globalen Konfiguration.

Die nächste Zeile sorgt für die Einbindung weiterer Zeilen für den HEAD Bereich.

<jdoc:include type="head" />

Auch hier werden die Informationen ausgegeben, die in der globalen Konfiguration eingestellt worden sind.

<title>Welcome to the Frontpage</title>
<meta name="description" content="Joomla! - the dynamic portal engine
and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content
Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="http://www.compassdesigns.
net/content/frontpage/feed/1/rss/" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="http://www.compassdesigns.
net/content/frontpage/feed/1/atom/" rel="alternate"
type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.
5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.


5RC2/media/system/js/caption.js"></script>

Viele dieser Ausgaben werden dynamisch abhängig von der aufgerufenen Seite (dem Artikel) aufgebaut. Sie beinhalen Metatags, das Favicon, RSS-Feed und einige Standard Javascript-Dateien.

Die letzte Zeile baut die Links zum Template-CSS auf.

<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/template.css" type="text/css" />

Die ersten zwei Dateien system.css und general.css beinhalten Joomla! Styles. Die letzte Datei beinhaltet das CSS des Templates, hier template.css genannt. Der PHP Code <?php echo $this->template ?> gibt den Namen des aktuellen Templates zurück. Durch diese Schreibweise im Gegensatz zur Angabe der tatsächlichen Pfade macht den Code universeller. Wenn Sie ein neues Template entwickeln, können Sie den kompletten Code einfach kopieren und müssen sich nicht um die Änderung kümmern.

Es können mehrere CSS Dateien für das Template angegeben werden. Zum Beispiel browserspezifische, dieses CSS wird vom IE6 eingebunden:

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]-->

Hier ein Beispiel für die Nutzung eines Template Parameter

<link rel="stylesheet" href="templates/<?php echo $this->template ?>
/css/<?php echo $this->params->get('colorVariation'); ?>.css"
type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/<
?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

Ein leerer Template Body

Dies ist einfach. Sind Sie bereit?

Alles, was wir benötigen, sind Joomla! Statements, welche den Inhalt von Modulen und dem Mainbody ausgeben.

<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>

Wenn Sie sich jetzt die Seite ansehen, wirkt sie nicht sehr beeindruckend:

9.3 Template ohne Styles

Das Template gibt folgende Inhalte aus:

1. Name der Seite
2. Top Module
3. Left Module
4. Main Content
5. Right Module

Sie werden bemerkt haben, daß wir zum ersten Mal Joomla! spezifische Anweisungen benutzt haben, um die Ausgabe zu erzeugen:

<?php echo $mainframe->getCfg('sitename');?><br />

<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

Die PHP echo-Anweisung gibt eine Zeichenkette aus der configuration.php aus. Hier ist es der Seitenname. Genauso einfach könnten wir folgendes ausgeben:

The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>

Die jdoc-Anweisung fügt diversen XHTML Code ein, sowohl von Modulen als auch von Komponenten.

Die folgende Zeile fügt die Ausgabe einer Komponente ein. Welche Komponente es ist, wird vom Menülink festgelegt.

<jdoc:include type="component" />

Diese Zeile fügt die Ausgabe einer Modulposition ein.

<jdoc:include type="modules" name="right" />

Die komplette Syntax:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />

Wir werden uns die verschiedenen Optionen noch später genauer ansehen.

CSSTemplateTutorialStep1

Dieses Template besteht aus zwei Dateien, die index.php und die templateDetails.xml. Ich habe alle Referenzen zu anderen Dateien entfernt, um eine Ausgabe ohne CSS zu erzeugen. Dies ist ein nützliches Template für Diagnosezwecke. Sie können es installieren und Fehler untersuchen, die bei einer Komponente oder einem Modul auftreten.

CSS für den Aufbau eines tabellenfreien Layout

Wir werden CSS einsetzen, um ein 3-spaltiges Layout für das Joomla! Template zu erzeugen. Es soll ein flexibles (fluides) Template sein. Man unterscheidet zwei Haupttypen eines Webseitenlayouts: fix und fluid, sie beschreiben die Einstellung der Breite einer Seite. Die Festlegung der Seitenbreite ist deshalb wichtig, weil diese mit unterschiedlichen Bildschirmauflösungen betrachtet wird. Obwohl abnehmend, nutzen noch ca. 17% der Surfer die Auflösung 800x600px. Die Mehrheit von ca. 79% nutzen die Auflösung von 1024x768px und höher. Ein flexibles Template aufzubauen bedeutet, daß die Seite auch auf kleineren Monitoren dargestellt werden kann.

Ein typisches Design würde für das Layout Tabellen nutzen. Sie sind deshalb nützlich, weil lediglich die Breite der Spalten in % angegeben werden muss. Aber dies hat einige Nachteile.Im Vergleich zu CSS fällt zum Beispiel eine größere Menge Code an. Dies führt zu längeren Ladezeiten (dies mögen Surfer garnicht) und zu einer schlechteren Performance bei Suchmaschinen. Der Code kann gut doppelt so groß werden, nicht unbedingt wegen des Codes an sich sondern z.B. wegen Einträgen wie "spacer gifs".

• Sie sind schwieriger zu warten. Um Änderungen vorzunehmen, muss das Zusammenspiel der Tgs wie < tr>/<td> beachtet werden. Mit CSS sind nur wenige Codezeilen betroffen.
• Der Inhalt kann nicht quelltextgeordnet aufgebaut werden. Viele Surfer sehen die Webseite nicht in einem Browser. Diejenigen, die sich die Seite in einem Textbrowser oder Bildschirmleser betrachten (vorlesen lassen), "lesen" die Seite von links oben nach rechts unten. Dies bedeutet, daß sie zuerst alles im Header und der linken Spalte (bei einem 3-spaltigen Layout) erfassen, und dann erst die wichtigen Inhalte in der mittleren Spalte. Ein CSS-Layout andererseits erlaubt einen quelltextgeordneten Inhalt. Das heißt, der Inhalt kann im Quelltext semantisch richtig angeordnet werden. Wahrscheinlich ist Google Ihr wichtigster Besucher, diese Suchmaschine nutzt im Grunde einen Screenreader.

Sehen wir uns ein Layout mit CSS näher an. Sie können mit CSS Elemente auf verschiedene Weisen positionieren. Eine gute Einführung: Brainjar's CSS Positioning

• Kevin Hale's - An Overview of Current CSS Layout Techniques
• htmldog's CSS Beginner's Guide
• Mulder's stylesheets Tutorial
• yourhtmlsource.com

Wir werden hier float benutzen, um unseren Content zu positionieren. Grundlegend sieht unser Template so wie im nächsten Bild aus. Es ist noch nicht sehr aufregend, aber sehen wir uns die verschiedenen Bestandteile einmal näher an.

Die CSS-Styles sind hier im <head> untergebracht, normalerweise befinden sie sich in der template.css Datei.

Alles ist im Element namens #wrap enthalten. Es hat eine fluide Breite im Bereich von 760px bis 960px.

9.4 Standardtemplatelayout

Der linken, mittleren und rechten Spalte wird jeweils ein CSS-Element zugewiesen. Jedes ist mit float:left definiert und erhält eine Breite in %. In der Summe ergeben sich 100%. Die clear:both Anweisung am Footer Element weist den Browser an, das Umfließen zu beenden und damit den Footer sich über alle drei Spalten auszudehnen. Wenn wir später unser zweites Template entwickeln, nutzen wir eine fortgeschrittenere Clear-Technik.

Um das Layout zu verbessern und ein wenig 'Luft zum Atmen' vom Spaltenrand zum Inhalt einzubauen, fügen wir einen Spaltenzwischenraum hinzu. Dieser wird auch Gutter genannt. Leider tritt dabei ein Problem auf. Wie vielleicht bekannt, interpretiert der Internet Explorer CSS unterschiedlich. Er berechnet die Breite anders. Wir lösen dies, indem wir padding oder border Anweisungen nicht bei Elementen benutzen, die eine Breite besitzen. Um unseren Gutter zu erhalten, fügen wir ein neues <div> innerhalb der Spalten hinzu:

.inside {padding:10px;}

Der <body> code der index.php:

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <?php echo $mainframe->getCfg('sitename');?>
      <jdoc:include type="modules" name="top" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" />
    </div>
  </div>
  <div id="content">     <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" />
    </div>
  </div>
  <div id="footer">
    <div class="inside"> Powered by <a href="http://joomla.org">Joomla!</a>.
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
  </div>
</div>
<!--end of wrap-->
</body>

Die template.css Datei:

#wrap {
min-width:760px;
max-width:960px;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}

margin-top:5px; margin-bottom:5px; margin-left:10px;margin-right:10px;

margin: 5px 10px;

font: font-size |font-style | font-variant | font-weight | line-height | font-family

font-size:1em; font-family:Arial,Helvetica,sans-serif;font-style:italic; font-weight:bold; line-height:1.3em;

font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

Dieses einfache Layout ist ein gutes Beispiel, um die Anwendung von CSS für Joomla! zu lernen. Zwei Vorteile genüber einem tabellenbasierten Layout: Es benötigt weniger Code und es ist leichter zu warten. Jedoch ist es noch nicht quelltextgeordnet aufgebaut. Daher müssen wir ein mehr fortgeschrittenes Layout benutzen, auch bekannt als nested float Layout. Quelltextgeordnete Layouts schneiden bei Suchmaschinen besser ab als Templates, welche den wichtigen Inhalt erst später im Code anzeigen. Aus Joomlasicht wird der wichtige Inhalt von einer Komponente erzeugt.

Default CSS

Bisher hat unser CSS nur das Layout festgelegt. Wir fügen nun einige Formatierungsanweisungen ein:

body {
text-align:center;
}

#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
text-align:left;
margin:0 auto;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}

Wir haben die Seite zentriert, indem wir einen kleinen Hack benutzt haben. Dieser ist für den Internet Explorer notwendig, weil dieser CSS nicht richtig interpretiert.

Mit den Standards entsprechenden Browsern könnten wir einfach margin:0 10%; einfügen, um die Seite zu zentrieren. Aber der IE erkennt diese Anweisung nicht. Darum zentrieren wir den Text der gesamten Seite und richten ihn innerhalb der Spalten wieder linksbündig aus.

Weil der IE7 jetzt min/max width unterstützt, können wir eine minimum und maximum width definieren. Ein kleiner Hack muss aber eingebaut werden, weil der IE6 diese Anweisungen nicht versteht. Er wird die !important Anweisung ignorieren und eine feste Weite von 960px einstellen.

Es sieht merkwürdig aus, die Spaltenbreite mit %-Werten, aber den umgebenden DIV-Container mit fester Breite zu definieren.

• Fluide Spalten innerhalb eines Containers mit fester Breite machen das Template sehr flexibel. Wenn wir Buttons für eine Breitenänderung einbauen, muss nur ein Wert verändert werden.
• Wir haben die max-width definiert, warum dann nicht alles fluid definieren? Viele Webnutzer haben mittlerweile sehr große Bildschirme. Usabilityuntersuchen besagen, daß Textzeilen mit eine Länge von mehr als 900px schwer zu lesen sind. Die Augen müssen einen zu langen Weg bis zur nächsten Zeile zurücklegen. Das fluide Design so zu beschranken, erhöht die Usability und Accesibility.

Wir haben noch einen weiteren Style den Spalten hinzugefügt: overflow:hidden;. Dies führt zu einer höheren Konsistenz, wenn im Browser die Breite des Fensters verkleinert wird.

Zu Beginn des CSS wird ein sogenannter 'global reset' durchgeführt:

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}

Die font-size ist auf 76 % festgelegt. Dies sorgt ebenso für eine übereinstimmende Darstellung in verschiedenen Browsern. Alle Zeichengrößen sind in em angegeben. Eine line-height von 1.3em. unterstützt die Lesbarkeit. Dies bedeutet, daß die Seiten besser zugänglich sind, wenn der Leser in der Lage ist, die Zeichen in der Größe nach seinen Gewohnheiten zu verändern. Eine Besprechung dieses Themas bei An experiment in typography at The Noodle Incident (Owen Briggs).

Wenn Hintergrundfarben hinzugefügt werden, sehen wir folgendes Ergebnis:

9.5 Standardtemplate mit Typografie

Die seitlichen Spalten reichen nicht bis zum Footer. Dies liegt daran, daß diese nur soweit reichen, wie es für den dortigen Content nötig ist. Wenn wir ein Template haben, das als Hintergrundfarbe Weiß für alle Spalten definieren würde, wäre dies kein Problem. Wir verfolgen diesen Ansatz und werden um die Module eine Box definieren. Wenn Spalten mit denselben Höhen gewünscht sind und diese verschiedenfarbig sein sollen, muss ein Hintergrundbild benutzt werden, das vertikal geteilt ist. Diese Technik wird "Faux Columns" genannt und wird hier näher beschrieben von Douglas Bowman und Eric Meyer

Das Joomla-spezifische CSS

Obwohl Joomla! 1.5 in der Lage ist, die Core Ausgabe innerhalb eines Templates zu überschreiben, erzeugt die Standardausgabe viele Tabellen innerhalb des Mainbody. Diese Ausgabe kann per CSS gestyled werden. Die folgende Tabelle zeigt die derzeit verfügbaren Styles. Sie basiert auf Beiträgen einiger Community Mitglieder. Sie beinhaltet nicht Standard Styles wie H1, H2, p, ul, a, form usw.

Viele Designs beinhalten CSS Styles, die in ihrer Definition spezifischer sind, so daß eine solche Regel eine weniger spezifische Regel überschreiben würde.

a {color:blue;}
a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}

Die Farbe eines Links und die Farbe eines .contentheading wird rot dargestellt, weil diese Regel mehr spezifisch ist (.contentheading befindet sich innerhalb eines <div>)

Bei einem Joomla! Template werden Sie häufig auf solche Regeln treffen. Dies geschieht, wenn z.b. eine Tabelle einer class zugeordnet ist. Mehr Beispiele:

.moduletable table.moduletable

• .moduletable ist der Name des <div>, welches das Modul umgibt. table.moduletable wird nur den Style einer Tabelle beeinflussen, welche die Definition class="moduletable" hat
• .moduletable wird den Style beeinflussen, unabhängig davon, welche class dem Element zugewiesen wurde

a.contentpagetitle:link .contentpagetitle a:link

• a.contentpagetitle:link bezieht sich auf die Styles von "a" Tags, für die eine .contentpagetitle class definiert wurde, die ein Link ist
• .contentpagetitle a:link wirkt sich auf alle Elemente INNERHALB von .contentpagetitle aus, wenn sie ein Links sind

Diese spezifischen Einstellungen sind nicht leicht zu verstehen. Es ist einfacher mit den grundlegenden Einstellungen zu beginnen und dann spezifische Regeln aufzubauen, wenn Sie mit dem Ergebnis nicht zufrieden sind.

Links:
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.meyerweb.com/eric/css/link-specificity.html
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Module in Templates

Für die Ausgabe eines Moduls stehen verschiedene Optionen zur Verfügung. Die allgemeine Syntax:

Der optionale Parameter style ist in der Datei templates/system/html/modules.php definiert. Derzeit werden folgende Layouts unterstützt.

OPTION="table" (Default)

Das Module wird in einer Tabellenspalte dargestellt. Beispiel:

 <table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
 <?php if ($module->showtitle != 0) : ?>
  <tr>
   <th valign="top">
    <?php echo $module->title; ?>
   </th>
  </tr>
 <?php endif; ?>
  <tr>
   <td>
    <?php echo $module->content; ?>
   </td>
  </tr>
  </table>

OPTION="horz"

Das Modul wird horizontal angezeigt. Jedes Modul wird in der Zelle einer umgebenden Tabelle ausgegeben. Beispiel:

<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
    <?php modChrome_table($module, $params, $attribs); ?>
    </td>
  </tr>
</table>

OPTION="xhtml"

Das Modul wird in einem einfachen DIV Element ausgegeben. Beispiel:

<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle != 0) : ?>
   <h3><?php echo $module->title; ?></h3>
  <?php endif; ?>
   <?php echo $module->content; ?>
</div>

OPTION="rounded"

Die Ausgabe erfolgt in einem Format daß zum Beispiel runde Ecken ermöglicht. In diesem Fall ändert sich der Name des <div> von moduletable zu module. Beispiel:

<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
 <div>
  <div>
   <div>
    <?php if ($module->showtitle != 0) : ?>
     <h3><?php echo $module->title; ?></h3>
    <?php endif; ?>
   <?php echo $module->content; ?>
   </div>
  </div>
 </div>
</div>

OPTION="none"

Das Modul wird pur ohne Titel und ohne weitere Formatierung ausgegeben. Beispiel:

echo $module->content;

Wie Sie sehen, erzeugen die CSS-Optionen xhtml und rounded einen deutlich schlankeren Code. Dies erleichtert das Styling der Website. Die Default-Einstellung bzw. horz sollten nur wenn nötig verwendet werden.

Hier eine wirklich gute Neuerung:
Wenn Sie sich die Datei module.php genauer ansehen, werden Sie dort alle möglichen Optionen für ein Modul finden. Es ist einfach, hier eine eigene Option einzubauen, dies ist ein Teil des Templatingsystems von Joomla! 1.5. Wir werden uns dies später detailliert ansehen.

Für die Entwicklung unseres Templates stellen wir für alle Module die Option xhtml ein.

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <div id="content">
    <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
  </div>
<!--end of wrap-->
</body>

Dies Optionen können nicht für <jdoc:include type="component" /> verwendet werden, weil es sich nicht um ein Modul handelt.

Wir haben den Seitentitel mit einem <H1> Tag umgeben. Dies ist semantisch korrekter und hilfreich für SEO. Wir entfernen nun den Hintergund von den Layout-DIVs. Außerdem fügen wir CSS Styles für die Module hinzu, ein Rahmen und ein Hintergrund für die Modultitel. Unser CSS sieht nun so aus:

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap {
border:1px solid #999;
}
#header {
border-bottom:1px solid #999;
}
#footer {
border-top:1px solid #999;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1,.componentheading {
font-size:1.7em;
}
h2,.contentheading {
font-size:1.5em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.2em;
}
h5 {
font-size:1.1em;
}
h6 {
font-size:1em;
font-weight:700;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable {
margin-bottom:1em;
border:1px #CCC solid;
padding:0 10px;
}
.moduletable h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em;
padding:0.25em 0;
}

Das Ergebnis:

9.6 Standardtemplate mit Modultitel Styling

Menüs in Templates

Wir haben in Kapitel 5 "Creating Menus and Navigation"gesehen, daß einige Einstellungen für die Darstellung des menüs vorhanden sind. Wieder führt auch hier die Verwendung von CSS zu einem kleineren und einfacher zu verstehenden Code. Nachdem wir alle Menüs so eingestellt haben, werden nur noch 12 Tabellen ausgegeben. Bei der Besprechung des Override Feature werden wir sehen, wie auch diese entfernt werden können.

Die List Einstellung ist neu in Joomla! 1.5, die Flat List Einstellung der Version 1.0.x gilt als veraltet. Sie ist besser als eine Tabellendarstellung, weil Textbrowser, Screenreader, Browser ohne CSS Unterstützung, Browser mit abgeschaltetem CSS und Suchbots die Inhalte viel einfacher darstellen bzw. interpretieren können. Ein anderer Vorteil in der Nutzung von CSS Menüs: Es gibt eine Menge von Beispielcode auf diversen Entwicklerseiten. Wir sehen uns eines an und werden sehen, wie es benutzt werden kann. Auf der Website von maxdesign gibt es eine Auswahl von über 30 Menüs, die alle den gleichen Code benutzen. Sie heissen 'Listamatic'. Wir nehmen eine kleine Änderung im Code vor, um ein solches Menü an Joomla! anzupassen:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-
template-tutorial_4.html">Item two</a></li>
<li><a xhref="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.
5-template-tutorial_4.html">Item three</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-
template-tutorial_4.html">Item four</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-
template-tutorial_4.html">Item five</a></li>
</ul>
</div>

Der umschliesende <div> Container wird navcontainer genannt, und die <ul> hat eine id mit dem Namen navlist. Um diesen Effekt in Joomla! zu erzeugen, benötigen wir ein ähnliches Konstrukt. Wir erreichen dies durch Vergabe eines Modul Suffix. Wenn Sie sich erinnern, die Ausgabe eines Moduls mit XHTML Style sieht so aus:

<div class="moduletable">
  <h3>modChrome_xhtml</h3>
  modChrome_xhtml
</div>

Wenn wir einem Modul ein Suffix hinzufügen, wird es der Class moduletable angehängt:

<div class="moduletablesuffix">
  <h3>modChrome_xhtml</h3>
  modChrome_xhtml
</div>

Wenn wir also ein Listamatic auswählen, muss die Class navcontainer durch das moduletable Suffix im CSS ersetzt werden.

Die Benutzung des Modul Suffix ist sinnvoll, weil es zum Beispiel farbige Boxen durch einfache Auswahl eines Suffix ermöglicht.

Für unsere Seite nutzen wir List 10 von Mark Newhouse. Das CSS:

.moduletablemenu {
color:#333;
margin-bottom:1em;
padding:0;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
border-bottom:1px solid #fff;
margin:0;
padding:0.25em 0;
}
.moduletablemenu ul {
list-style:none;
margin:0;
padding:0;
}
.moduletablemenu li {
border-bottom:1px solid #ccc;
margin:0;
}
.moduletablemenu li a {
display:block;
border-left:10px solid #333;
border-right:10px solid #9D9D9D;
background-color:#666;
color:#fff;
text-decoration:none;
padding:3px 5px 3px 0.5em;
}
html>body .moduletablemenu li a {
width:auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
border-left:10px solid #1c64d1;
border-right:10px solid #5ba3e0;
background-color:#2586d7;
color:#fff;
}

Wir ergänzen den Modul Suffix (kein Unterstrich in diesem Fall verwenden) für jedes Modul, daß wir verändern wollen. Dies erzeugt ein Menü wie in folgender Grafik. Jedem Menü, das wir so verändern wollen, fügen wir das Suffix menu hinzu.

Standardtemplate mit Menuestyling

Der Code für das Menü:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!-- .astyle { } -->
</style>
</head>
<body>
<div class="moduletable">
<h3>Main Menu</h3>
<ul class="mainmenu">
  <li id="current" class="item1 active"><a href="http://www.compassdesigns.
  net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Home</a><
  /li>
  <li class="item2"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">Joomla! Overview</a></li>
  <li class="item3"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">What's New in 1.5?</a></li>
  <li class="item4"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">Joomla! License</a></li>
  <li class="item5"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">More about Joomla!</a></li>
  <li class="item6"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">FAQ</a></li>
  <li class="item7"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">The News</a></li>
  <li class="item8"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">Web Links</a></li>
  <li class="item9"><a href="http://www.compassdesigns.net/tutorials/joomla-
  tutorials/joomla-1.5-template-tutorial_4.html">News Feeds</a></li>
</ul>
</div>
</body>
</html>

Spalten verstecken

Wir haben jetzt ein Layout, das immer 3 Spalten anzeigt, egal, ob in diesem Inhalte angezeigt werden oder nicht. Aus Sicht eines CMS Templates ist dies nicht sehr nützlich. In einer statischen Seite ändern sich die Inhalte nie, aber wir wollen dem Administrator die Möglichkeit geben, Inhalte beliebig zu platzieren, ohne mühsam das CSS zu ändern. Eine Spalte sollte sich automatisch 'abschalten' oder in sich zusammenfallen (collapse), wenn sich in dieser keine Inhalte befinden. Die Templating Engine von Joomla! 1.5 hat einige Neuentwicklungen und Verbesserungen erfahren. Ein Zitat aus dem Joomla! Development Blog:

Mehr Informationen erhalten Sie im Joomla! Forum.

Allgemeiner Aufruf von mosCountModules:

<?php if($this->countModules('condition')) : ?>
   do something
<?php else : ?>
   do something else
<?php endif; ?>

Es gibt vier mögliche Bedingungen für die Abfrage. Als Beispiel zählen wir die Module aus Bild 9.7. Wir können diesen Code in der index.php einfügen.

left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>

countModules('left')
Ergibt 4, 4 Module links

countModules('left and right')
ergibt 1, ein Modul ist in der Position rechts und links

countModules('left or right')
ergibt 1, ein Modul ist in der Position links oder rechts

countModules('left + right')
ergibt 7, Anzahl der Module in der Position links und rechts

In unserem Beispiel benötigen wir die Funktion, welche die Anzahl der Module in einer bestimmten Position zählt. Befindet sich in der rechten Spalte kein Content, können wir die Spaltengrößen einstellen um den freien Platz auszufüllen. Es gibt mehrere Möglichkeiten, dies zu lösen. Wir könnten die Abfragen in den body des Templates platzieren, um abhängig von der Spaltenanzahl unterschiedliche Styles aufzubauen. Um es so einfach wie möglich zu machen, habe ich im <head> einige Bedingungen eingebaut, welche das CSS entsprechend verändern.

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Erklärung: Wenn sich links ODER rechts nichts befindet, ergibt dies eine Breite von 100%. Wenn etwas links ODER rechts befindet, wird 80% festgelegt. Wenn sich etwas links UND etwas rechts befindet, ergibt dies 60%. Wir ändern noch in der index.php folgendes:

<div id="content<?php echo $contentwidth; ?>">

Änderungen im Layout CSS:

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

Die PHP Anweisungen im <head> müssen nach der Zeile mit dem Link zum template.css eingefügt werden. Dies liegt daran, daß bei Vorliegen zweier identischer CSS die letzte Regel alle anderen überschreibt. Dies kann ähnlich erledigt werden, indem ein if für den Import eines CSS verwendet wird.

Die Spaltenbreite ist: <?php echo $contentwidth; ?>%

Wir sind jetzt zur Hälfte fertig, wir sehen aber noch leere <div> Container für die Spalten.

Modul-Code verstecken

Für sich verbergende Spalten ist es eine gute Angewohnheit, Module nichts ausgeben zu lassen, wenn von diesen auch kein Inhalt ausgegeben wird. Sonst würden leere <divs> erzeugt werden, die bei einigen Browsern Probleme machen könnten. Um diese leeren <div> zu verstecken:

<?php if($this->countModules('left')) : ?>
<div id="sidebar">
  <div class="inside">
    <jdoc:include type="modules" name="left" style="xhtml" />
  </div>
</div>
<?php endif; ?>

Wenn links keine Inhalte angezeigt werden, wird <div id="sidebar"> nicht ausgegeben. Mit dieser Technik auf unsere rechten und linken Spalten angewandt sieht die index.php dann wie folgt aus. Wir haben dort auch einen Aufruf des breadcrumb Moduls eingebaut, es zeigt die aktuelle Seite und den Pfad an. Denken Sie daran, daß dies jetzt als Modul eingebunden werden muss.

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>
          /css/template.css" type="text/css" />
<?php if($this->countModules('left and right') == 0) $contentwidth = "100";

      if($this->countModules('left or right') == 1) $contentwidth = "80";
      if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
</head>
<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
      <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>
  <div id="content<?php echo $contentwidth; ?>">
    <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
    </div>
    <?php if($this->countModules('right')) : ?>
    <div id="sidebar-2">
      <div class="inside">
        <jdoc:include type="modules" name="right" style="xhtml" />
      </div>
    </div>
    <?php endif; ?>
    <?php if($this->countModules('footer')) : ?>
    <div id="footer">
      <div class="inside">
        <jdoc:include type="modules" name="footer" style="xhtml" />
      </div>
    </div>
    <?php endif; ?>
<!--end of wrap-->
</body>
</html>

Noch eine Empfehlung zu dem Footer. Wie hier gezeigt ist er in der index.php fest codiert, welches Änderungen nur schwer ermöglicht. Das footer Modul zeigt das Joomla! Copyright an und kann nur mühsam verändert werden. Es würde sehr viel mehr Sinn machen, ein eigenes (X)HTML-Modul in der footer Position einzubauen, um diese Änderungen zu ermöglichen. Setzen Sie also das Modul auf unpublish und erzeugen Sie ein eigenes Modul mit beliebigem Inhalt:

In diesm Fall ersetzen Sie:

<jdoc:include type="modules" name="footer" style="xhtml" />

durch:

<jdoc:include type="modules" name="bottom" style="xhtml" />

Denken Sie daran, diese neue Position in der templateDetails.xml Datei zu ergänzen.

CSSTemplateTutorialStep2

Wir haben nun ein einfaches aber funktionierendes Template. Eine einfache Typographie wurde hinzugefügt. Noch wichtiger ist, daß wir ein rein auf CSS basierendes Template mit dynamisch faltbaren Spalten erstellt haben. Ich habe ein installtionsfähiges Template erstellt, daß in der Compass library verfügbar ist: CSSTemplateTutorialStep2.zip

Lassen Sie uns nun ein attraktiveres Template bauen, indem wir die vorher erlernten Techniken anwenden.

Ein Joomla! 1.5 Template

Zuerst beginnen wir mit unserem sogenannten comp (composition). Dies ist das Design, welches die Basis des Templates darstellen soll. Wir nutzen eines, welches uns freundlicherweise von Casey Lee, dem Lead Designer von Joomlashack zur Verfügung gestellt wurde. Es nennt sich Bold und wir können es in Bild 9.8 sehen

9.8 Design von Joomlashack

Slicing and Dicing

Der nächste Schritt wird als Slicing bezeichnet. Wir verwenden unser Grafikprogramm, um kleine Bildabschnitte für unser Template zu verwenden. Falls nötig sollte beachtet werden, wie diese Elemente in der Größe verändert werden können. (Mein bevorzugtes Grafikprogramm ist Fireworks, weil es geeigneter für Webdesign ist als Photoshop, welches wiederum für den Druck vorteilhafter ist)

Modulpositionen festlegen

Dieses Template hat einige besondere Positionen für besondere Module, die sich leicht von der Standard Joomla! Installation unterscheiden. Um sicherzugehen, daß alles richtig funktioniert, gelten folgende Vereinbarungen: User1 für das Suchmodul, User2 für das Topmenü, Top für den Newsflash oder andere HTML Module. Hier sollte nichts anderes ausgegeben werden.

Header

Das Header Image hat oben einen kleinen Streifen. Wir wollen daran festhalten, indem wir das Image als Background aufbauen und zusätzlich eine Farbe zuweisen. So kann der Header vertikal skalieren, falls dies zum Beispiel bei einer Veränderung der Textgröße benötigt wird. Ebenso wird die Farbe vom Text in Weiß geändert, damit er sich vom schwarzen Hintergund abhebt. Wir benutzen das Background Image für die Suchbox. Ich habe ebenso eine absolute Positionierung innerhalb eines relativ positionierten Elementes verwendet, um die Suchbox an der gewünschten Stelle zu platzieren. Wenn der Text vergrößert wird, wird dieses einzelne Bild nicht mitskaliert. Es ist also ein oberes und unteres Bild notwendig. Eine kleine Übung für Sie.

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}

#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}

#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}

#header .search {
position:absolute;
top:20px;
right:20px;
}

Ich habe hier kein Bild als Logo verwendet, sondern Text, weil Suchmaschinen Bilder nicht interpretieren können. Man kann natürlich eine elegante Bildersetzung einbauen, aber dies überlasse ich Ihnen. Unser Header sieht nun wie in Bild 9.9 aus

9.9 Header Image Background

Jetzt werden wir eine Technik kennenlernen, mit der ein Hintergrund für eine fluide Spalte dargestellt wird: Sliding Doors.

Spalten Hintergründe

Wir hatten festgestellt, daß eine Hintergundfarbe einer Spalte sich nicht bis zum Footer erstreckt. Deshalb, weil das <div> Element, hier sidebar und sidebar-2 nur so groß wie sein Inhalt wird. Es erstreckt sich nicht bis zur Grenze des umgebenden Elementes. Wir wenden eine Technik an, die sich 'Sliding Faux Columns' nennt. Mit dieser werden grundlegend zwei breite Images erzeugt, welche übereinander verschoben werden. Wir definieren zwei neue Container, um diese Hintergründe aufzunehmen. Normalerweise könnten wir eine dem #wrap zuweisen, aber ich werde hier einen zusätzlichen Container definieren, um dies so besser darzustellen. Eine vollständige Beschreibung finden Sie hier:

• http://alistapart.com/articles/fauxcolumns/
• www.communitymx.com/content/article.cfm?page=1&cid=AFC58

In diesm Fall ist unsere maximale Weite 960px. Darum beginnen wir mit einem Image dieser Breite. Im template.zip ist es die Datei slidingcolumns.png. Wir exportieren dann zwei Slices, eines 960px breit mit einem 192px breiten Hintergund auf der linken Seite. Und ein 960px breites mit einem 192px breiten Hintergund auf der rechten Seite.

Das linke Bild benötigt einen weißen und das rechte einen transparenten Hintergund . Ich habe diese bei dem Export von der Originaldatei verändert. Warum 192px? Es sind 20% von 960, unsere Spalten haben eine Breite von 20%. Wir verwenden die CSS-Eigenschaft background-position , um die Bilder an die richtige Stelle zu positionieren. Hier haben wir die Shorthandsyntax benutzt:

#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}
#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}

In der index.php fügen wir einfach einen Container innerhalb des wrap hinzu.

<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">

Weiterhin werden vor dem schließenden </div> PHP if-abfragen eingefügt.

<?php if($this->countModules('left')) : ?>
</div>
<!--end of leftfauxcol-->
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
</div>
<!--end of rightfauxcol-->
<?php endif; ?>

Der Footer sowie die unteren Module/Elemente erhalten auch einen Background, sonst würde der Spaltenhintergrund sichtbar werden.

#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}

Wir müssen die Floats clearen, damit die faux columns sich bis zum unteren Ende der Seite erstrecken. Herkömmlicherweise wurde das Pseudoelement :after verwendet, aber dies funktioniert im IE7 nicht mehr korrekt. Wir müssen ein clear im IE6 und im IE7 erreichen, eine schwierige Aufgabe. Mittlerweile gibt es hierfür eine Menge von Lösungen. Wir benutzen hier die 'Float (nearly Everything)' Methode. Wir fügen dem #footer ein simples clear:both hinzu und den Spalten umgebenden Containern ein float. Diese fügen wir in einem Stylesheet nur für den IE6 ein.

#leftfauxcol,#rightfauxcol,#footer {
float:left;
width:100%;
}

Im Head der index.php wird folgender Code aufgenommen.

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6only.css"
           rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css"
           rel="stylesheet" type="text/css" />
<![endif]-->

Flexible Module

In unserem Design haben wir einen großen Modulblock. Wir wissen nicht, welche Größe der darin enthaltene Text benötigt. Um dieses Problem zu lösen, fügen wir die jdoc:include Anweisung in einem Containerelement ein, welches dieselbe Hintergrundfarbe wie das Bild beinhaltet. Die gleiche Strategie haben wir bereits für den Header verwendet.

<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>

Wir haben auch hier eine PHP-Bedingung eingebaut. Wenn nämlich das obere Modul keinen Inhalt ausgibt, wird auch nicht das orangefarbene Teaserbild angezeigt. Es verbleibt ein leerer Container, der ein wenig von dem Hintergrundbild ausgibt und ein Padding von 20px., eine rein ästehtische Angelegenheit. Das CSS benötigt eine bestimmte Spezifität, um die vorher definierten Styles von moduletable zu übersteuern:

#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}

#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}

Typographie

Viele der Links müssen weiß sein, darum definieren wir sie global und verändern dann die Farbe innerhalb der mittleren Spalte:

a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,
#content100 a:link,#content100 a:visited {
color:#000;
}

Das Element .button erhält einen Style.Wir erzeugen hierzu den Bachground aus einem geslicten Bild des comp. Dieses dünne Slice ist horizontal gekachelt.

.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
cursor:hand;
margin:4px 0;
padding:0 4px;
}

Für Tabellen können wir einen Background verwenden, indem wir das gleiche Bild wiederholt anzeigen, das auch für den Teaser verwendet wird. Das Wiederverwenden eines Bildes verkleinert den nötigen Download von Bildern und beschleunigt so den Seitenaufbau.

sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}

Die Module benötigen noch einfache Einstellungen für padding und margin.

.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

Menüs benötigen wie immer umfangreiche Stylevorgaben. Wir machen dies so einfach wie möglich. Wir slicen ein Image, das sowohl das Aufzählungszeichen (bullet) als auch die Unterstreichung beinhaltet.Beachten Sie, daß das Modulsuffix menu jedem Element zugeordnet ist:

.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}

Zuletzt zu dem tabbasierten Menü oben rechts. Als ein Anwalt der Accessibility werden wir es so aufbauen, daß es bei einer Textgrößenveränderung mitskaliert. Glücklicherweise gibt es hierfür eine Technik, welche dies bewerkstelligt. Es ist dieselbe, die wir auch für die Spalten verwendet haben: die Sliding Doors!

Wir werden ebenso hier auf den schnellen Zugriff auf das Template achten, indem wir ein einzelnes Bild für die linke und rechte Seite aufbauen, ebenso für den 'an' und 'aus' Zustand. Dies wird auch als 'sprites' bezeichnet.

Das CSS ist nicht sehr kompliziert, wir müssen ein wenig mit der vertical position des Backgrounds spielen.

.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}

Wir müssen hier den Suffix tabs für das Menümodul verwenden. Wenn Sie sich das Originaldesign ansehen, werden Sie bemerken, daß sich Icons auf den Tabs befinden. Während wir schon zwei Background Images verwenden, eines für das li und eines für den link , würden wir ein drittes Element benötigen, um dort das Icon zu platzieren. Sie könnten hierfür ein <span> benutzen, aber dies ist fortgeschrittenes CSS Jiu-Jitsu. Ich überlasse es Ihnen als Hausarbeit. Die letzte verbleibende Aufgabe: Die Änderung der Datei templateDetails.xml. Sie muss alle Dateien und Images beinhalten, die im Template aufgerufen werden, damit es korrekt als ZIP-Datei installiert werden kann. Unser fertiges Template sollte so wie in Bild 9.10 aussehen.

9.10 Advanced Template mit Typografie

Zuletzt sollten Sie wissen, daß die Herstellung eines produktiven Joomla! Templates mehr eine Frage des grafischen Designs und des CSS ist als spezielles Joomla! Wissen.

CSSTemplateTutorialStep3

Wir haben nun ein Template entwickelt, welches auf einem comp (oder Design) beruht. Eine einfache Typographie wurde hinzugefügt, aber wichtiger, wir haben ein reines CSS Layout, welches dynamisch versteckte Spalten und ein tabbasiertes Menü aufweist. Ein installationsfähiges Template befindet sich in der Compass library: CSSTemplateTutorialStep3.zip.

Weitere Templateeigenschaften

Joomla! 1.5 bietet eine Anzahl von weiteren Templateeigenschaften. Wir haben bereits ein Beispiel gesehen, die Möglichkeit, den Output der Module anzupassen. Wir werden diese der Reihe nach betrachten:

• Template Parameter
• Template Overrides

Template Parameter

Die Parametrierung von Templates ist neu in Joomla! 1.5. Dabei werden dem Template Variablen übergeben, welche im Backend eingestellt worden sind. Wir fügen eine relativ einfache Parameterfunktion unserem Template hinzu. Dies geschieht in der Datei templateDetails.xml :

<params>
<param name="template_width" type="list" default="fluid" label="Template Width"
            description="Width style of the template">
<option value="fluid">Fluid with maximum and minimum</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</param>
</params>

Ebenso benötigen Sie eine Datei params.ini in Ihrem Templateordner. Diese Datei kann leer sein, Joomla benötigt diese um dort Ihre Einstellungen zu speichern. Ein Beispiel:

template_width=2

Diese Datei muss beschreibbar sein.Sie wird in der templateDetails.xml aufgenommen. Im Template Manager sehen Sie die Einstellungen für das Template (Bild 9.11)

9.11 Templateparameter im Backend

Wir sehen eine simple Dropdown-Box mit drei Optionen.

<param name="template_width" type="radio" default="0" label="Template Width"
            description="Change width setting of template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>

Wir ändern den Body Tag in der index.php :

<body class="width_<?php echo $this->params->get('template_width'); ?>">

Das CSS wird ergänzt:

body.width_0 div#wrap {
width:760px;
}

body.width_1 div#wrap {
width:960px;
}

body.width_2 div#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
}

#wrap {
text-align:left;
margin:0 auto;
}

Template Overrides

Das mächtigste neue Feature für Templates in Joomla! 1.5 ist die Möglichkeit, den Core Output einfach zu übersteuern. Dies wird mit sogenannten Templatedateien ermöglicht, welche mit den Layoutsichten von Komponenten und Modulen korrespondieren. Joomla! prüft in jedem Fall ob sich eine solche Datei im Templateordner befindet und, wenn vorhanden, benutzt diese und übersteuert damit die Standardausgabe.

Override Struktur

Alle Layoutansichten und Templates befinden sich im Maincore in einem /tmpl/ Ordner. Bei Komponenten gibt es im Vergleich zu Modulen einen kleinen Unterschied. Module haben nämlich nur eine einzige Ansicht. Beispiel:

modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/

Die Grundstruktur aller Komponenten und Module ist View>Layout>Templates

Diese Tabelle zeigt einige Beispiele, Module haben nur ein View.

In der Regel sind für ein bestimmtes Layout mehere Templatefiles zuständig. Sie haben eine gemeinsame Namensgebung:

Overriding von Modulen

Jedes Modul hat einen neuen Dateiordner tmpl , welcher die Templates beinhaltet. In diesem befinden sich PHP-Dateien, welche den Output generieren. Beispiel:

/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php

Die ersten drei sind die drei Layouts von Newsflash, abhängig davon, welche Moduloption gewählt wurde. Die Datei _item.php ist ein allgemeines Template, welches von allen dreien aufgerufen wird.

In dieser Datei befindet sich folgender Code:

<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <tr>
    <td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>"
              width="100%"><?php if ($params->get('link_titles') && $item->
              linkOn != '') : ?>
      <a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo
              $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?>
              </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
     </td>
  </tr>
</table>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <tr>
    <td valign="top" colspan="2"><?php echo $item->text; ?></td>
  </tr>
</table>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->
          linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Wir könnten hier die Tabellenausgaben entfernen, um es ein wenig mehr zugänglich zu machen (accessible):

<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <div class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->
get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
  </div>
</div>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <
?php echo $item->text; ?>
</div>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->
linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Die neue Datei wird in einem Dateiordner html wie folgt aufgenommen:

templates/templatetutorial15bold/html/mod_newsflash/_item.php

Komponenten Override

Bei Komponenten funktioniert es ähnlich, außer, daß bei vielen Komponenete mehrere Views vorhanden sind. Im Dateiordner com_content sind zum Beispiel mehrere Views definiert:

/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/section

In diesem Fall referenziert die default.php auf das Standardlayout, welches Artikel als Linkliste darstellt. In der Datei blog_item.php sehen wir die Tabellen, die benutzt werden. Um dessen Ausgabe zu übersteuern, erzeugen wir in unserem Template im Ordner template/html/ordner eine entsprechende Datei. Beispiel:

templates/templatetutorial15bold/html/com_content/category/blog_item.php

Es ist relativ simpel, all diese Views per Copy & Paste aus den /components und /modules Ordnern in den templates/yourtemplate/html Ordner zu übertragen. Diese Override Funktionalität ist ein mächtiges Werkzeug, die Joomla! Seite mit dem Template zu steuern. Sie können Templates erzeugen, die sich im Schwerpunkt mit der Suchmaschinenoptimierung, Accesibility oder besonderen Wünschen Ihres Kunden befassen.

Tabellenfreies Joomla!

Joomla! beinhaltet ein Template Beez , das die Override-Funktionalität anwendet. Das Design und Accessibility Team hat einen kompletten Satz von Override Dateien im html Ordner aufgebaut.

Unser abschließendes Beispiel ist ein Template, daß diese Overrides anwendet, um alle Tabellenausgaben vom Joomla!-Output zu entfernen.

CSSTemplateTutorialStep4

Wir haben nun ein Template realisiert, welches auf einem comp (oder Design) basiert. Zusätzliche Typographie wurde zugefügt, und dynamisch versteckte Spalten und ein tabbasiertes Menü wurden integriert. Weiterhin haben wir durch Overrides die Ausgabe von Joomla! übersteuert, um die Ausgabe von Tabellen zu unterdrücken. Ein installationsfähiges Template befindet sich in der
Compass library: CSSTemplateTutorialStep4.zip

Schlußwort

In diesem Tutorial haben wir vier Beispiele für ein Template erarbeitet, dabei wurde die Komplexität und die Anzahl an Features erhöht.

• Moderne Webseiten trennen den Inhalt von der Darstellung, indem CSS (Cascading Style Sheets) benutzt werden. In Joomla! übernimmt das Template die Trennung der Darstellung von den Inhalten.
• Wenn Sie ein Template entwickeln, benötigen sie ein lauffähiges Joomla!, um Änderungen durchzuführen und deren Ausgabe sofort zu sehen
• Ein valides Template zu erzeugen sollte ein Weg, nicht das Ziel darstellen. Ein Template sollte so zugänglich (accessible) wie möglich für Menschen und Suchmaschinenrobots erstellt werden. Es geht nicht um ein Abzeichen für ein valides Markup.
• Ein grundlegendes Template lädt nur die Module und den mainbody (Komponente). Layout und das Design sind Aufgabe des CSS, nicht von Joomla!.
• Modernes Webdesign nutzt CSS und nicht Tabellen, um Elemente zu positionieren. Es ist schwer zu lernen, aber es lohnt sich. Es gibt viele (nicht Joomla! bezogene) Quellen, hier Ihnen eine Hilfe zu geben.
• Joomla! gibt spezifische Elemente, id's und classes aus, welche durch CSS gestyled werden können.
• Joomla! 1.5 ermöglicht es, die Ausgabe von Modulen komplett anzupassen, es kann aber auch die "eingebaute" Augabe verwendet werden. Diese Optionen nennen sich "module chrome".
• Für die Menüausgabe sind am besten die Optionen bulleted oder flat list. Darauf aufbauend können verschiedene Anleitungen im Web verwendet werden.
• Elemente wie Spalten oder Modulpositionen können versteckt (oder zusammengefaltet) werden, wenn dort keine Ausgabe von Inhalten erfolgt. Dies erfolgt durch conditional PHP Anweisungen, welche mit CSS Styles verbunden sind.
• Ein produktives Joomla! Template zu entwickeln ist eine Frage des grafischen Designs und des Stylings durch CSS, weniger eines besonderen "Joomlawissens"
• Joomla! 1.5 bietet neue Features für Templates, welche es ermöglichen, den Code und die Präsentation einer Joomla! Webseite vollständig zu kontrollieren.

TrackBack URI für diesen Eintrag

Kommentare (11)

 1 2 > 

..., Auch von meiner Seite vielen Dank für das Tutorial

Mai 21, 2008     

Auch von meiner Seite vielen Dank für das Tutorial, mit welchem ich so eben mein erstes Tabellenfreies Joomla-Design kreiert habe. Weiter so!! mfg
rifl | 62.47.221.113

..., Super Dank! Ein Tutorial das es auf den Punkt bring

April 25, 2008     

Super Dank! Ein Tutorial das es auf den Punkt bringt! Beste Grüße KX
KX | 217.185.66.58

..., super tut! danke für die arbeit. dürfte vielen

April 16, 2008     

super tut! danke für die arbeit. dürfte vielen helfen
Fubbel | 87.177.180.49

Vielen Dank, Super Arbeit, hat mir sehr geholfen und ich

April 12, 2008     

Super Arbeit, hat mir sehr geholfen und ich werde jetzt wohl tiefer ins CSS Design einsteigen. Vielen Dank!
Andreas K. | 62.40.143.63

Mir fehlen noch die runden ecken, Mir fehlen noch die ru

April 12, 2008     

Mir fehlen noch die runden ecken aber ansonsten 100% spitze.
besucher | 89.59.131.187

ich weiss net, .. es ist wohl gut aufgebaut, blos ich sc

April 09, 2008     

.. es ist wohl gut aufgebaut, blos ich schnalle es nicht.... wollte alles "nachbauen" machen ich setzte wohl am falschen Hebel an, ist das jetzt eine Änderung des bestehenden Templates oder was neues... ich raffe das nicht !
Jens | 89.244.229.228

..., Mir hat das Tutorial viel gebracht. Vielen Dank da

April 05, 2008     

Mir hat das Tutorial viel gebracht. Vielen Dank dafür.
Jens | 87.123.141.80

..., Ich kann mich nur bedanken für das tolle Tutorial

März 29, 2008     

Ich kann mich nur bedanken für das tolle Tutorial gruss RS
Robert S. | 62.12.145.194

..., herzlichen dank für deine tolle arbeit und überse

März 27, 2008     

herzlichen dank für deine tolle arbeit und übersetzung. so viele gute tipps und übersichtlich aufbereitet. richtig gut! sn
sn | 89.247.99.114

..., Super Sache! Hat mir unheimlich geholfen, nun Templ

März 18, 2008     

Super Sache! Hat mir unheimlich geholfen, nun Templates für Joomla 1.5 zu entwickeln. Dickes Lob von meiner Seite! =0)
Daniel K. | 84.174.69.1

 1 2 >