Joomla! Template Tutorial Teil 2 - Das Konstrukt

Nun ist bereits ein Jahr seit Teil eins des Joomla 1.5 Template Tutorials vergangen und die Fortsetzung ließ auf sich warten. Dank meines süßen, neuen Netbooks bin ich mittlerweile zum Glück in der Lage, auch in Cafés, Parks, Badewannen und langweiligen Meetings Artikel zu schreiben.

Teil 3 des Joomla! 1.5 Template Tutorials ist fertig!

Wie im Vorwort des Tutorials beschrieben, war der Plan das Screendesign eines laufenden Projekts als Grundlage des Tutorials zu nutzen. Zum Glück hatten wir zwei Entwürfe erstellt, von denen wir hierfür den nicht umgesetzten auswählen. Das passt sehr gut, denn jetzt können wir gemeinsam ein weniger auf den Kunden zugeschnittenes Joomla Template, als vielmehr ein vielseitiges, parametrisierbares und freies Joomla! Template für die ganze Joomla Community daraus basteln. Dabei werden wir viele Aspekte der Template Entwicklung für Joomla 1.5 aufgreifen.

Das Screendesign zum Joomla Template

Schreiten wir also zur Tat. Die Screendesign Variante, welche unser Grafiker angefertigt und welche ich für dieses Tutorial ausgewählt habe, sieht wie folgt aus:

Hübsch, nicht war? Es fällt auf, dass einige Bereiche noch nicht völlig fertiggestellt sind, wie z. B. der mittlere "Accordeon" Bereich. Hier sollte ursprünglich ein Joomla! Modul mit einem Accordeon-Effekt erscheinen. Da ich jedoch nicht davon ausgehe, dass viele Menschen so etwas benötigen, werden wir diesen Bereich etwas anpassen und für beliebige Feature-Module, wie z. B. eine Slideshow, ein Content-Scroller oder andere Frontpage Module reservieren. Das ist das Gute bei einem versiertem Screendesigner. Er weiss, dass für ein Webdesign kein komplettes Screendesign nötig ist. Wichtig ist nur, das im Entwurf alle relevanten Funktionseinheiten abgedeckt sind. Anders sieht es natürlich aus, wenn man Kunden Entwürfe präsentiert. Aber das ist eine andere Geschichte...

Ansonsten besteht die Seite aus einem simplen zwei Spalten Layout, bei dem wir es auch belassen wollen. Was wir jedoch umsetzen werden, ist die Möglichkeit, die rechte Spalte nach links zu verlagern oder auch komplett wegzulassen, wobei der Content Bereich dann über die ganze Breite gehen sollte.
Im oberen Bereich sehen wir eine Navigation und eine Headergrafik. Die Navigation sollte keine Fragen aufwerfen. Es kann aber es sein, dass mancher hier vielleicht gerne eine Suckerfish Navigation hätte...hmmm. Teilen Sie uns einfach Ihre Meinung im Kommentarbereich mit. Falls eine spürbare Nachfrage nach einer Suckerfish Navigation besteht, werden wir die Techniken aus unseren Suckerfish Tutorials auch für dieses Template einsetzen.
Gut. Die Headergrafik mit der jungen Dame ist hier nur ein statisches Bild, welches man auf Unterseiten weglassen kann, da wir es vorrausichtlich mit einem Joomla Modul umsetzen werden.

Analyse - Vom Screendesign zum Webdesign/Template

Kommen wir nun zu den aus Sicht des Webdesigners interessanten Aspekten des Screendesigns. Vor der Umsetzung wollen wir versuchen, für das Webdesign kritische Elemente des Entwurfs zu erkennen. Sehen Sie sich dafür folgende Grafik und die zugeordneten Punkte an.

1. Das Screendesign gibt eine Hintergrundgrafik für das Joomla! Template vor. Diese besteht aus Kringeln und Farbtupfern. Eine Hintergrundgrafik einzubauen, ist an sich nichts besonders schwieriges. Es kommt allerdings darauf an, wie genau diese Hintergrundgrafik eingebettet wird und wie sie sich im Kontext funktionaller Aspekte verhält. Auch hier wird deutlich wie wichtig es ist, ein Screendesigner zu haben, der etwas von Webdesign versteht.
   Für unser Beispiel ergeben sich daraus folgende Überlegungen: Hat unser Template eine flexible Breite? Falls ja, müssen wir die Hintergrundgrafik aufwändiger integrieren, als wenn es eine feste Breite hat. Bei einer festen Breite können wir die Hintergundgrafik, welche als GIF oder PNG vorliegen wird, einfach per CSS in das umgebende DIV legen und zentrieren. Fertig! Bei einer flexiblen Template Breite könnte man das auch machen, allerdings verschwindet die Hintergrundgrafik dann irgendwann hinter dem Content, wenn die Breite erhöht wird. Natürlich kann man auch pragmatisch vorgehen, so wie es Yootheme bei Ihrem "Explorer" Template machen. Wer die Breite verändert, bemerkt, dass die Hintergrundgrafik statisch bleibt. Sie ist eben so gestaltet, dass sie den Content so anschneidet, dass es in den meisten momentan gängigen Template-Breiten OK ausschaut.
   Wir werden es so umsetzen, dass die Hintergrundgrafik relativ zur Template-Breite mitskaliert. Wie das genau geht, weiss ich im Moment auch noch nicht, aber es ist klar, dass wir die Hintergrundgrafik zweiteilen müssen, um sie links und rechts des Content zu platzieren.
2. Punkt Zwei handelt auch von der Hintergundgrafik. Sie sehen, dass das Screendesign in der Hintergrundgrafik eine schmale blaue Bordüre am oberen Bildschirmrand vorgibt. Interessant dabei ist, dass sowohl die Hintergrundgrafik auf der rechten Seite, als auch das Papierblatt im Hintergrund diese Bordüre anschneiden. Die Hintergrundgrafik und das Papierblatt müssen also transparant sein, damit die Skalierung funktioniert. Transparente Elemente sind mit GIF Grafiken möglich. Allerdings sind GIFs hier nicht zu empfehlen, da sie nur eine 1-Bit Alpha (Transparanz) Maske haben und die Kanten um die transparanten Gebiete herum dadurch häßlich/eckig werden. Wir setzen deswegen PNG-Elemente ein, welche eine 8-Bit Maske nutzen und schöne, weiche Transparanzränder ermöglichen. Dummerweise kann der Internet-Explorer bis zur Version 7 nicht mit transparanten PNGs umgehen. Deshalb werden wir einen sogenannten PNG-Fix einbauen müssen.
3. Das "Suchen"-Modul liegt ÜBER der statischen Headergrafik. Die Headergrafik selbst werden wir wohl als einfaches Joomla! Benutzermodul realisieren, was bedeutet, dass sich hier zwei Module überlagern. Dies müssen wir mit einer absoluten Positionierung per CSS erledigen.
4. Die Hauptnavigation oben befindet sich auf gleicher Höhe wie die Stirn der Pusteblumendame. Da die Navigation auch ein Modul ist, müssen wir überlegen, was passiert, wenn wir weitere Navigationspunkte hinzufügen. Lassen wir diese den Kopf der Dame überlagern oder überlassen wir es dem Joomla! Admin eine ästhetisch sinnvolle Anzahl an Navigationspunkten anzulegen? Andererseits werden viele User das fertige Template ohne die nette Dame einsetzen und somit mehr Platz für Navigationspunkte haben. Wir lassen also mit der Gefahr der Überlagerung die Möglichkeit zu, weitere Navigationspunkte darzustellen. Der Admin muss dann entscheiden, ob er die Headergrafik durch eine nicht angeschnittene Variante ersetzt oder weniger Navigationspunkte anlegt.
   Ansonsten sehen wir wie bei Punkt 3 auch hier, dass sich ebenfalls das Navigationsmodul mit dem Headergrafik-Modul überlagert.
5. Wie bei vielen professionellen Joomla! Templates ist der Content Bereich und einzelne Spalten durch einen weichen Dropshadow Effekt und abgerundeten Ecken gekennzeichnet. Beides ist nicht schwer umsetzbar. Wir müssen nur überlegen, ob wir wirklich wollen, dass jedes Content-Element des Templates durch einen solchen Rahmen umgeben wird, oder ob auch rahmenloser Content bzw. Spalten möglich sein sollen. Falls ja, müssen wir uns überlegen wie wir das bewerstelligen wollen. Ich sage schon mal an, dass wir auch rahmenlosen Content/Spalten unterstützen wollen...
6. Der Footer schließt mit dem Content ab und verläuft geradlinig links und rechts von der Template-Breite weiter. Was passiert, wenn wir im Content nur ein Satz stehen haben und dadurch die Content Höhe extrem gering wird? Wie sieht es dann UNTER dem Footer aus? Geht es dann einfach weiß weiter oder verlaufen die beiden Grauschattierungen weiter? Auf diese Fragen hat uns der Screendesigner keine Antwort gegeben.
7. Im Screendesign sehen wir, dass die rechte Spalte eine spezielle Art, hat Module grafisch darzustellen. Sie sind einerseits wie der Content durch abgerundete Ecken und einen Schlagschatten, andererseits durch eine grafisch unterlegte Modultitel Überschrift gekennzeichnet. Um Module derart grafisch an eigene Wünsche anzupassen, bietet Joomla! die wunderbare Möglichkeit der Modul Chromes an.

Damit haben wir fürs erste die kritischen Stellen dieses Screendesign identifiziert und mögliche Lösungswege beschrieben. Auf dem Weg der Umsetzung werden sicher noch einige Herausforderungen auftauchen und neue nicht bedachte Features für das Template eingebaut werden müssen. Wir wollen es damit zunächst auf sich beruhen lassen.

Bevor wir mit der technischen Umsetzung beginnen, möchte ich noch ein paar Worte zu den nötigen Vorkenntnissen sagen.

Wie ich im Vorwort erwähnt habe, kann es nicht Ziel dieses Tutorials sein Kenntnisse über Webdesign im Allgemeinen zu vermitteln. Vielmehr geht es darum, vorhandene Kentnisse mit dem hier vermitteltem Wissen über die Erstellung von Joomla! Templates zu erweitern. Grundlegende Kentnisse im Erstellen von Webseiten auf Basis von XHTML/CSS sollten also vorhanden sein. Ebenfalls sollte der Umgang mit der Firefox Erweiterung Firebug gegeben sein. Als Webdesigner kommt man an dieser Erweiterung zur Zeit nicht vorbei und spart bei der Entwicklung wertvolle Zeit. Rudimentäre PHP Kentnisse sind ebenfalls von Vorteil.

Das Template Skelett

Ich gehe davon aus, dass Sie lokal in Ihrer Testumgebung eine frische Joomla! Installation liegen haben. Sie können natürlich auch eine bestehende Joomla! Installation für die Erstellung des Templates heranziehen. Wichtig wäre, dass Sie den Demo-Content, welcher bei der Installation von Joomla! mitgeliefert wird, installiert haben. Dadurch bekommt die Seite gleich etwas Fleisch an die Knochen und Sie sehen, wie sich das Template im Zusammenspiel mit Navigationen, Content und Modulen verhält. Ich entwickle das Template lokal unter der Adresse http://localhost/meineseite/.

Um ein neues Template anzulegen, gehen Sie in das Joomla Template Verzeichnis und legen einen neuen Ordner an. Der Name des Ordners entspricht dabei dem Namen des Templates. Wie nennen wir unser Template? Ich habe mich entschieden, es einfach "Flows" zu nennen.

In dieses Verzeichnis legen wir erstmal drei Dateien. Erstens eine (fast) leere index.html. Sie können diese einfach aus einem anderen Template Verzeichnis hier rüberkopieren. Diese Datei soll vermeiden, dass bei falsch konfigurierten Servern ein Direktzugriff ins Verzeichnis erfolgen kann.
Wichtiger sind die beiden Dateien index.php und templateDetails.xml. Die index.php ist das eigentliche Template und beinhaltet eine Kombination aus XHTML, PHP und Joomla! Anweisungen, welche für die Generierung des Templates nötig sind. Wir werden für den Anfang ein nacktes Template Skelett verwenden, welches wie folgt ausschaut:

<?php 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="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html> 

Sie sehen hier bereits die grundlegenden Elemente, welche bei der Erstellung einer statischen XHTML Seite relevant sind. Wir wählen den DOCTYPE "Transitional" für dieses Template. Ansonsten sehen Sie die umschließenden HTML, HEAD und BODY Tags - im Prinzip nichts neues. Schauen wir uns die Joomla! eigenen Anweisungen an. In der ersten Zeile wird geprüft, ob die Konstante _JEXEC gesetzt ist. Dies ist wichtig, da diese Konstante vom Joomla! Framework gesetzt wird und sicherstellt, dass keine der PHP-Dateien unbefugt direkt aufgerufen wird. Möglichen Angreifern können so potentielle Sicherheitslücken nicht ausnutzen. Wenn Sie also die Datei http://localhost/meineseite/templates/flows/index.php direkt aufrufen, werden sie die Meldung "Restricted access" lesen. Richtig so.

Im HTML-Tag werden einige PHP-Variablen verwendet. Das Template, welches wir entwickeln, ist für Joomla! einfach gesagt der Ort, an dem der Content aus allen Bereichen wie Komponenten, Modulen und Plugins zusammenläuft und dargestellt wird. Die index.php ist dabei eine PHP-Datei, welche im Kontext des Joomla-Frameworks verschiedene Informationen abfragen kann (JDocument). Diese können genutzt werden, um das Verhalten des Templates zu beeinflussen. Die Konstante _JEXEC ist ein einfaches Beispiel. Wir können beispielsweise aber auch abfragen, welche Sprache gerade genutzt wird, um entsprechend zu reagieren. Im HTML-Tag greifen wir über das Objekt $this auf solche Variablen zu. Sie können sich einfach mal den Inhalt des Objekt $this per print_r($this); ausgeben lassen.

Im HEAD-Tag finden wir die Anweisung <jdoc:include type="head" />. Hier werden alle im Header nötigen CSS-Styles, Javascripte und Meta-Informationen ausgegeben (Rendering). Trotzdem können Sie, wenn nötig weitere eigene Tags in den Header Bereich direkt unter der JDOC Anweisung einfügen. Dies tun wir auch gleich, indem wir die beiden CSS-Dateien system.css und general.css einfügen. Beide befinden sich im standardmäßig vorhandenen System-Template von Joomla! und enthalten einige Styles, welche bei der Darstellung von Fehlern oder Editor-Knöpfen nötig sind. Warum diese nicht gleich in der JDOC Anweisung im Header mitgeladen werden? Nun, weil manche Template-Enwickler entweder gerne darauf verzichten oder auch eigene Styles hierfür definieren. Wir laden die beiden aber nach. Dabei hilft uns die Variable $this->baseurl, welche den Pfad zur aktuellen Joomla! Instanz liefert.

Als letztes bleibt noch der BODY-Tag. Dieser ist in unserem Skelett, bis auf die JDOC-Anweisung komplett leer. Die JDOC-Anweisung des Typs "component" lädt den Inhalt der aktuellen Joomla! Komponente und stellt diesen dar. Hier passiert also die eigentliche Ausgabe von Inhalten wie z. B. Artikeln, Bildergalerien, Foren usw.

Mehr Informationen zu den JDOC-Anweisungen finden Sie im JDOC-Bereich der Joomla! API Dokumentation.

Wie Sie sehen, fehlen unserem Template noch die unverzichtbaren Modulaufrufe. Diese lassen wir fürs Erste bei Seite und widmen uns der templateDetails.xml Datei.
Diese Datei beinhaltet wesentliche Meta-Informationen rund um das Template und wird zum Installieren und Konfigurieren des Templates benötigt. Fangen wir mit einem sehr einfachen Beispiel an:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
   <name>Flows</name>
    <creationDate>1 Dezember 2009</creationDate>
    <author>B01 - Tom Bohacek</author>
    <authorEmail>
 Diese E-Mail Adresse ist gegen Spam Bots geschützt, Sie müssen Javascript aktivieren, damit Sie es sehen können
 </authorEmail>
    <authorUrl>http://www.bohacek.de</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL</license>
    <version>1.0.0</version>
    <description>Flows template</description>
    <positions>
        <position>left</position>
        <position>right</position>
        <position>footer</position>
    </positions>
    <files></files>
    <params></params>
</install>

Wie Sie sehen, beinhaltet diese XML-Datei einige Informationen rund um das Template wie dessen Namen, den Autor, das Erstellungsdatum, die Version usw. Diese Informationen werden in der Template-Verwaltung im Backend von Joomla! herangezogen und dargestellt.

Viel interessanter sind die Abschnitte Positions, Files und Params in der templateDetails.xml.Die Bereiche Files und Params ignorieren wir fürs erste und kommen auf sie zurück, wenn wir sie benötigen. Im Bereich Positions werden mit einzelnen Position-Tags die Modulpositionen gekennzeichnet, welche in unserem Template zum Einsatz kommen sollen. Wir müssen uns also überlegen, welche Modulpositionen wir benötigen. Schauen wir uns dafür nochmals das Screendesign an:

All diese roten Vierecke sind Modulpositionen. Die Namen der Modulpositionen sind traditionell Englisch. Was wir im Entwurf nicht sehen, ist die Modulposition "left", welche zum Einsatz kommt, wenn wir eine Spalte auf der linken Seite haben wollen. Wir fügen also folgende weitere Positionen der templateDetails.xml hinzu:

        <position>navi</position>
        <position>header</position>
        <position>search</position>
        <position>user1</position>
        <position>user2</position>

Damit ist unser Template Skelett fertig. Wenn Sie die Flows Template Dateien korrekt in das Template Verzeichnis kopiert haben, sollten Sie in der Template-Verwaltung im Backend unser Flows-Template vorfinden.

Machen Sie es zum Standard-Template, indem Sie es über den Radio-Button anwählen und oben rechts auf "Standard" klicken. Der gelbe Stern sollte nun auf das Flows-Template gewechselt haben.

Um unser neues Template in Aktion zu sehen, sollten Sie in das Frontend wechseln und die Seite z. B. so aufrufen: http://localhost/meineseite/
Was wir da sehen ist alles andere als motivierend. Je nachdem, ob Sie Demo-Content installiert haben oder nicht, erscheint eine sehr nackte Seite ohne jegliches Styling. Da wir weder Modulpositionen im Template definiert, noch eigene Styles eingebunden haben, erscheint nur die Ausgabe der aktuellen Komponente, welche wir duch die JDOC-Anweisung des Typs "component" aufrufen. Sie können genauso eine standard Joomla! Komponente aufrufen, indem Sie http://localhost/meineseite/index.php?option=com_contact schreiben. Sie werden wieder die nackte Ausgabe der Kontakt Komponente von Joomla sehen.

Der aktuelle Stand des Templates:
Ansehen: Flows Template Step 1
Download: Flows Template Step 1

Um Sie nicht völlig desillusioniert dastehen zu lassen, wollen wir in diesem zweiten Teil des Tutorials wenigstens einen winzigen Ansatz unseres Screendesigns umsetzen. Dafür benötigen wir natürlich ein Stylesheet. Legen Sie im Flows Template-Verzeichnes das Verzeichniss "css" an. Darin legen Sie eine leere Datei namens template.css. Diese wird unser Flows-Stylesheet beinhalten. Damit wir sie auch nutzen können, müssen wir sie wie folgt in der index.php einbinden:

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

In die Stylesheet Datei legen wir erstmal einige CSS-Reset Styles an, die aus der YUI 2 stammen. Da jeder Browser-Hersteller eine andere Vorstellung davon hat, wie bestimmte HTML-Elemente ausschauen sollen, kümmert sich das von Yahoo entwickelte Reset-CSS darum, gleich zu Begin einen Konsenz zu schaffen. Weiter legen wir in der index.php, also unserem Template, einen DIV-Wrapper um die Komponentenausgabe. Das sieht dann so aus:

<div class="wrapper">
<jdoc:include type="component" />
</div>

Diesen Wrapper können wir nun im Stylesheet rudimentär stylen, indem wir ihm eine Breite verpassen. Damit wir endlich die Bordüre zu sehen bekommen, legen wir im Template Verzeichniss parallel zum "css"-Verzeichnis ein Bilderverzeichnis namens "images" an. Hier werden alle für das Template nötigen Bilder liegen. Darin platzieren wir eine Kachel unserer Bordüre und definieren dafür einen Style. Dieser hängt fürs Erste am BODY-Tag, was funktioniert, aber in Zukunft etwas abgewandelt wird.

Wenn wir schon mal bei schnellen Erfolgserlebnissen sind, wollen wir auch gleich eine Modulposition in unser Template integrieren. Das tun wir, indem wir den BODY wie folgt abändern.

<div class="wrapper">
<jdoc:include type="component" />
<hr />
<jdoc:include type="modules" name="right" />
</div>

Mit der JDOC-Aweisung des Typs "modules" können wir steuern, welche Module ausgegeben werden sollen. Um die Position anzugeben, nutzen wir das Attribut "name". Im oben genannten Beispiel also die Modulposition "right". Alle Module, welche im Backend dieser Position zugeordnet sind, werden hier ausgegeben. Da wir kein Styling irgendwelcher Art haben, macht es Sinn, pro forma einen horizontalen Teiler zwischen die beiden JDOC-Anweisungen zu platzieren.

Diesen erbärmlichen Zustand wollen wir möglichst rasch beheben, indem wir uns überlegen, auf welche Basis wir das Webdesign des Flows Templates stellen.

Das grundlegende HTML/CSS Konstrukt

Es ist nur klar, dass unser Template, wie fast jedes andere, zwei oder drei Spalten besitzen wird. Zeit sich zu überlegen, welches HTML/CSS Konstrukt wir für die Darstellung der Inhalte heranziehen. Diese Entscheidung ist die Wichtigste bei der Erstellung eines Webdesigns. Es gibt nämlich unzählige Methoden ein 2- oder 3-Spalten Layout zu realisieren.
Einige davon sind sehr einfach und einleuchtend, bieten jedoch wenig Potential, wenn die Inhalte komplexer werden. Andere sind spezialisiert auf Suchmaschinenoptimierung und ordnen die Inhalte so, dass der Content an erster Stelle steht, obwohl in der Browserdarstellung Header, Navigation und andere Elemente darüber liegen. Unsere Seite nutzt z. B. solch ein Konstrukt. Dieses Verfahren würde das Tutorial aber ziemlich verkomplizieren und deswegen habe ich mich für das bewährte "Equal-Height-Columns"-Layout von Matthew James Taylor entschieden, welches auch bei einigen Template Clubs eingesetzt wird. Es ist ein faszinierender Ansatz, Spalten zu erstellen, welche unabhängig von der Menge des darin liegenden Content stehts die gleiche Höhe besitzen. Wer sich ausgiebig mit diesem Ansatz auseinandersetzen will, kann das auf der Seite von Matthew tun.

Das für das Flows-Template angepasste Konstrukt:
Ansehen: Flows Template Step 2
Download: Flows Template Step 2

Ich habe im Template die Modulpositionen navi, header, search und footer eingefügt. Sie können diese mit Modulen belegen, um zu sehen, wie sich das Template verhält. Natürlich ist die Modulausgabe noch nicht gestyled. Damit die Seite etwas mehr Content hat, liegen in der index.php einige Absätze mit Blindtext.

Wir können nun schemenhaft das zu Grunde liegende Screendesign erkennen. Auch der Footer läuft bereits über die ganze Breite. Die Breite des Content und der rechten Spalte sind noch im CSS fest angegeben. Da wir diese Werte später über Template-Parameter editierbar machen wollen, wird sich hier sicher noch einiges ändern müssen.

Nachdem wir diesen elementaren Schritt innerhalb der Template-Entwicklung gegangen sind, sollten wir zusehen, dass das Template ein wenig mehr nach unserem Screendesign ausschaut. Will heißen, wir wollen einige der grafischen Elemente des Screendesigns integrieren. Dazu zählt erst einmal die "Papierblock"-Optik des Screendesigns. Um diese zu realisieren, benötigen wir...? Richtig! Wrapper-DIVs, welche wir um unser zentrales Content-Div legen (ID "middle"). Diese füllen wir dann per CSS mit entsprechenden grafischen Elementen. Wir erhalten sie, indem wir das Screendesign passend in einzelne Bilder (GIFs oder PNGs) zerschneiden. Dieser Vorgang wird auch Slicing genannt. Die einzelnen Slices werden dann als Hintergrundgrafiken für die neuen Wrapper-DIVs genutzt.

Na, wenn das nicht schon gewaltig nach unserem Screendesign ausschaut! Wenn Sie das Browserfenster skalieren, werden Sie feststellen, dass die leichten Schatten des "Papierblocks" die Bordüre überlagern. Das liegt daran, dass wir diese Slices als transparante PNGs hinterlegt haben. GIFs eigenen sich hierfür nicht, wie oben beschrieben. Dabei fällt mir auf, dass ich die Kringel und Farbtupfer vergessen habe. Nächstes Mal! Obwohl wir noch keinen Browserkompatibilitätstest gemacht haben (sprich IE Tests) scheint das momentane Konstrukt in verschiedenen Browsern einigermaßen stabil.
 

Flows-Template mit grafischen Elementen:
Ansehen: Flows Template Step 3
Download: Flows Template Step 3

Das sollte fürs Erste reichen. Sicher werden motivierte Leser genug damit zu tun haben, das eingesetzte HTML/CSS Konstrukt zu analysieren und womöglich an eigene Bedürfnisse anzupassen.

Im nächsten Teil des Tutorials gehen wir in die Vollen und beginnen Template-Parameter, verschiedene Template-Styles, Modul Chrome und flexible Content Breiten einzubauen. Das Styling unseres Templates selbst sollte auch einen ganzen Schritt weiter kommen.

Falls Sie Hinweise oder Wünsche für die Entwicklung des Flows-Template haben, nutzen Sie bitte die Kommentarfunktion.

Teil 3 des Joomla! 1.5 Template Tutorials ist fertig!

8 Kommentare

Zeige/Verstecke Kommentareingabe