Know-how Alexander Schmidt/Andreas Lehr · Templates für Joomla! 2.5 und 3.x Design und...

30
Templates für Joomla! 2.5 und 3.x Design und Implementierung > Grafische Freiheit für Joomla!-Websites: verschiedene Designs in einem Template > So entwerfen Sie ein Template-Design mit Photoshop und setzen es in Joomla! um > Responsive Webdesign mit dem Blank Template und Twitter Bootstrap Alexander Schmidt/Andreas Lehr Know-how ist blau. Überzeugende Vorlagen für das beliebte Content-Management-System

Transcript of Know-how Alexander Schmidt/Andreas Lehr · Templates für Joomla! 2.5 und 3.x Design und...

Templates fürJoomla! 2.5 und 3.xDesign und Implementierung

> Grafische Freiheit für Joomla!-Websites: verschiedene Designs in einem Template

> So entwerfen Sie ein Template-Design mit Photoshop und setzen es in Joomla! um

> Responsive Webdesign mit dem Blank Template und Twitter Bootstrap

Joomla! bietet Webdesignern eine Fülle von Möglichkeiten. DennTemplates für Joomla! können unterschiedliche Designs für dieStartseite und die Folgeseiten haben. Alexander Schmidt und Andreas Lehr zeigen Ihnen, wie Sie ein komplettes Website-Template erstellen, das alle Register von Joomla! zieht. Sie erfahren,wie Sie das Screendesign mit Photoshop erstellen und es dann mitHTML, PHP und CSS in ein Joomla!-Template umsetzen. Demons-triert wird außerdem, wie Sie das Template durch eine Foto-Slide-show ergänzen und Social Media wie Twitter in die Vorlage inte-grieren. Die Autoren haben Ihr Template dabei nicht nur für dieVersion 2.5, sondern auch für die neuesten Versionen 3.x getestetund angepasst, sodass Sie hier auch für zukünftige Entwicklungendes CMS auf der sicheren Seite sind.

� Die Grundlage: Ein Blanko-TemplateZuerst zeigen die Autoren, wie Sie ein Blanko-Template realisieren. Ein solches Template bildet die perfekte Ausgangsbasis für alle Designprojekte.Sie lernen dabei den Aufbau von Joomla!-Templates kennen und können jederzeit auf dieses Grundgerüst zurückgreifen, das bereits alle grundlegendenPHP- und Stylesheet-Dateien enthält. So verlieren Sie keine Zeit, wenn Sieein neues Template-Projekt angehen.

� Von der Idee zum ScreendesignUm ein Template zu gestalten, brauchen Sie ein stimmiges Webdesign. Ineinem umfangreichen Tutorial zeigen Ihnen die Autoren, wie Sie in AdobePhotoshop eine solche Vorlage erstellen. Alexander Schmidt und AndreasLehr demonstrieren, wie Sie die Benutzerführung entwerfen und optischeBlickfänge in Form von Fotos sowie eine Slideshow integrieren. Sie erfahren,wie Sie die einzelnen Zonen des Templates wie den Header, den Footer undden Content-Bereich stimmig gestalten und wie Sie eine Folgeseite entwerfen,die zum Stil des Front-Templates passt.

� Das Screendesign als Template umsetzen + Responsive WebdesignUm das Screendesign in ein lauffähiges Joomla!-Template zu verwandeln,müssen Sie es in handliche Einzelteile zerlegen, die Sie den Layoutzonen zuordnen. Sie erfahren, wie Sie die PHP- und CSS-Daten der Blankovorlageändern müssen, um die erwünschten grafischen Effekte zu erzielen, und wieSie das fertige Template prüfen und validieren. Ein völlig neuer Abschnittzeigt, wie Twitter Bootstrap genutzt werden kann, um ein Responsive Web-design zu erzeugen, das sich der Bildschirmgröße des Users variabel anpasst.

Über die Autoren:Alexander Schmidt ist Webent-wickler und Dozent. Er leitet und organisiert Seminare für dieNutzung vom Joomla!. Seit 2005realisiert Schmidt Websites, die auf dem CMS basieren. Sein Spezialgebiet ist die Entwicklunghochwertiger Joomla!-Templates.

Andreas Lehr ist Designer fürScreen- und Printmedien. NebenDTP und Grafik kümmert er sich als Frontend-Webworker mit Vor-liebe um gelungenes CSS. Seit2006 ist er selbstständig im Auftrag von Agenturen und für eigene Kunden tätig.

Auf www.buch.cdDas Beispiel-Template aus dem Buch zum Download.

Alexander Schmidt/Andreas Lehr

30,– EUR [D]ISBN 978-3-645-60180-1

Tem

plat

es fü

rJoo

mla

! 2.5

und

3.x

Alexander Schmidt/Andreas LehrKnow-how

ist blau.

Überzeugende Vorlagen für das beliebteContent-Management-System

Schm

idt/

Lehr

Web-Entwicklung

Besuchen Sie unsere Website

www.franzis.de

Aus dem Inhalt:• Die Standard-Templates von Joomla!

• Das Blank Template für Joomla!

• PHP in HTML integrieren

• Die Cascading Stylesheets in Joomla!

• CSS-Overrides

• Browserweichen für den Internet Explorer

• Template-Parameter

• Fehler- und Offlineseiten anpassen, Favicons

• Ein Screendesign in Photoshop erstellen

• Key Visuals und Hintergründe

• Eine Slideshow integrieren

• Kopf- und Fußleisten, Navigationselemente

• Das Layout in ein Template umsetzen

• Header, Content-Bereich und Footer

• Ein CSS-Sprite erstellen

• Die Datei TemplateDetails.xml bearbeiten

• Programmierung der zentralen PHP-Dateien index.php, component.php & Co.

• Anlegen der Menüs

• Integration der Sprachdateien

• Joomla-Template-Befehle

• Responsive Webdesign mit Blank Templateund Twitter Bootstrap

Templates fürJoomla! 2.5 und 3.xDesign und Implementierung

60180-1 U1+U4 28.06.12 13:23 Seite 1

Alexander Schmidt/Andreas Lehr

Templates fürJoomla! 2.5 und 3.x

Design und Implementierung

60180-1 Titelei_X 28.06.12 13:22 Seite 1

Alexander Schmidt/Andreas Lehr

Templates fürJoomla! 2.5 und 3.xDesign und Implementierung

60180-1 Titelei_X 28.06.12 13:22 Seite 3

Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer

Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,

darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte

Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen

oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei

Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder

zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung

ist nur mit Zustimmung des Lizenzinhabers möglich.

© 2012 Franzis Verlag GmbH, 85540 Haar bei München

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und

Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des

Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt.

Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden,

sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produkt-

bezeichnungen im Wesentlichen den Schreibweisen der Hersteller.

Lektorat: Anton Schmid

Satz: DTP-Satz A. Kugge, München

art & design: www.ideehoch2.de

Druck: GGP Media GmbH, Pößneck

Printed in Germany

ISBN 978-3-645-60180-1

60180-1 Titelei_X 28.06.12 13:22 Seite 4

5

Einleitung

Dieses Buch richtet sich an alle, die ihre eigenen, individuellen Templates für Joomla ge-stalten wollen. Anfänger fi nden hier einen umfangreichen Einstieg in die Template-Ent-wicklung, und professionelle Webdesigner werden ihre Kenntnisse um eine ausgeklügelte Template-Engine erweitern können.

Mithilfe dieses Buchs setzen Sie ein selbst gestaltetes Screendesign in ein Joomla-Template um. Dabei lernen Sie neue Techniken kennen und erfahren, worauf es bei der Umsetzung ankommt. Die Fähigkeiten, die Sie beim Durcharbeiten des Buchs erwerben, werden Ihnen später nicht nur unter Joomla von Nutzen sein, sondern allgemein im Webdesign.

In den einzelnen Kapiteln werden Ihnen die Abläufe exakt aufeinanderfolgend erklärt. In der Praxis zeigt sich jedoch, dass man Programme zum Arbeiten und Dateien zum Bear-beiten parallel geöffnet hat und zwischen ihnen hin und her wechselt. So beschreibt dieses Buch – das durchaus als Super-Tutorial gesehen werden kann – nur eine mögliche Vorge-hensweise. Wenn Sie dieses Werk einmal durchgearbeitet haben, werden Sie Ihre eigenen Abläufe fi nden und das Webdesign als Handwerk effi zienter nutzen können.

Der sichere Umgang mit Joomla und Photoshop wird vorausgesetzt. CSS und HTML soll-ten Ihnen vertraut sein; Basiswissen reicht aber vollkommen aus. Der Wille, Neues zu er-lernen und ein Template mit PHP und Joomla-eigenen Anweisungen zu programmieren, wird dazu beitragen, dieses Buch erfolgreich einzusetzen.

Steht Ihnen Photoshop nicht zur Verfügung, können Sie auch ein anderes Bildbearbei-tungsprogramm, wie zum Beispiel GIMP, verwenden. Die Screendesign-Anleitung können Sie dann allerdings nicht eins zu eins verwenden.

Falls Sie bis jetzt WYSIWYG-Editoren wie Dreamweaver oder Expression Web genutzt ha-ben, werden Sie nun lernen, direkt im Quelltext zu arbeiten. Einfache Editoren wie Note-pad oder TextEdit reichen dazu vollkommen aus. WYSIWYG-Editoren wie Dreamweaver werden nicht ausdrücklich benötigt, können aber im Quelltextmodus eingesetzt werden.

Template-Entwicklung

Wenn Sie zum ersten Mal ein Template entwickeln, ist es wichtig, zu verstehen, dass es sich hierbei nicht »nur« um Webdesign handelt. Ein Template unter Joomla bestimmt das Aus-sehen einer Website. Vor der Template-Entwicklung kommt daher immer das Gestalten eines Screendesigns. In diesem Design zeichnet sich die spätere Funktionalität der Website ab. Erst wenn das Screendesign steht, kommt es zum Webdesign. Das Screendesign wird mit HTML, CSS, grafi schen Elementen und Bildern umgesetzt. Das Webdesign ist ein Be-

60180-1 Templates Joomla 1.6_NEU_1.indd 560180-1 Templates Joomla 1.6_NEU_1.indd 5 27.06.2012 18:00:5727.06.2012 18:00:57

6 Einleitung

standteil der Template-Entwicklung, die dann mit PHP, JavaScript und Template-Befehlenweitergeführt wird.

Ein weiterer Bestandteil der Template-Entwicklung ist die Parametrisierung. Mithilfe vonParametern können Sie über das Backend Einfl uss auf das Template nehmen und es bei-spielsweise in ganz anderen Farben erstrahlen lassen. Durch eine einfache Auswahl könnenSie ein anderes Cascading Stylesheet auswählen, um die Website in einem neuen Licht zupräsentieren.

Durch Overrides können Sie die Gestaltung von Joomla-Komponenten beeinfl ussen, in-dem Sie Dateien einfach »überschreiben«. Ihnen den Umgang mit Overrides nahezubrin-gen, ist ebenfalls Bestandteil dieses Buchs.

Wenn Sie Texte im Template verwenden wollen, können Sie sie mithilfe von Sprachdateiender ganzen Welt zur Verfügung stellen.

Mit dem JavaScript-Framework Mootools, das Joomla von Haus aus mitbringt, müssen Sieweniger codieren und können schnell und effektiv das Fundament für animierte Effekteund Elemente legen.

Schließlich werden Sie die Template-Engine von Joomla besser kennenlernen, die kaumWünsche offen lässt. Schon bald werden Sie merken, dass die Entwicklung richtig Spaßmachen kann.

Hinweis

Das im Buch gestaltete Screendesign sowie das umgesetzte Template sind urheberrechtlichgeschützt. Beide dürfen nicht für kommerzielle Zwecke eingesetzt werden.

Dateien zum Buch

Alle nötigen Dateien zum Buch gibt es unter

http://franzis.blank.vc

Dort fi nden Sie unter anderem das Blank Template, das Screendesign zum Buch als Photo-shop-Datei, das hier im Buch erstellte Template in der fertigen Version sowie Bilder undQuelltexte. Eine Demoversion des Templates können Sie dort ebenfalls begutachten.

60180-1 Templates Joomla 1.6_NEU_1.indd 660180-1 Templates Joomla 1.6_NEU_1.indd 6 27.06.2012 18:01:1527.06.2012 18:01:15

7

Inhaltsverzeichnis

1 Joomla-Templates .................................................................................... 11

1.1 Was ist ein Joomla-Template? ................................................................ 111.2 Wieso werden Templates eingesetzt? ..................................................... 131.3 Die Standard-Templates von Joomla ...................................................... 14

2 Blank Template ........................................................................................ 17

2.1 index.php (mini) ................................................................................... 192.2 templateDetails.xml (mini) .................................................................... 212.3 Cascading Stylesheets .......................................................................... 232.3.1 index.html ............................................................................................ 232.3.2 template.css.php .................................................................................. 242.3.3 reset.css ............................................................................................... 262.3.4 template.css ......................................................................................... 272.3.5 editor.css .............................................................................................. 282.3.6 error.css ................................................................................................ 292.3.7 offl ine.css ............................................................................................. 292.3.8 phone.css ............................................................................................. 302.3.9 print.css ................................................................................................ 302.3.10 tablet.css .............................................................................................. 312.4 index.php (blank) .................................................................................. 312.4.1 Cascading Stylesheet Link ..................................................................... 312.4.2 Modernizr ............................................................................................. 322.4.3 Browserweiche (IE) ................................................................................ 332.4.4 PIE (Cross-Browser CSS3) ...................................................................... 352.4.5 Debug-Modul ........................................................................................ 362.4.6 Module Chrome .................................................................................... 362.4.7 $pageclass ............................................................................................ 402.4.8 Metatag-Generator ................................................................................ 402.4.9 Mobile Addons ...................................................................................... 402.4.10 Media Queries ....................................................................................... 412.4.11 Bookmark Icons .................................................................................... 412.5 Parameter ............................................................................................. 422.5.1 Defi nition .............................................................................................. 422.5.2 Typen .................................................................................................... 432.5.3 Datenbank ............................................................................................ 462.5.4 Verwendung .......................................................................................... 462.6 Fehlerseite ............................................................................................ 46

60180-1 Templates Joomla 1.6_NEU_1.indd 760180-1 Templates Joomla 1.6_NEU_1.indd 7 27.06.2012 18:01:1527.06.2012 18:01:15

Inhaltsverzeichnis8

2.7 Offl ine-Seite .......................................................................................... 482.8 Druckversion ......................................................................................... 512.9 Overrides .............................................................................................. 522.10 Bilder .................................................................................................... 532.10.1 Formate ................................................................................................. 532.10.2 Größe .................................................................................................... 542.10.3 Transparenz .......................................................................................... 542.11 JavaScripts ............................................................................................ 542.12 Sprachdateien ....................................................................................... 552.13 Photoshopdateien ................................................................................ 56

3 Erstellung eines Screendesigns ................................................................ 57

3.1 Vorüberlegung ....................................................................................... 573.2 Vorbereitung ........................................................................................ 583.3 Hintergrundfl ächen ............................................................................... 613.4 Logo ...................................................................................................... 653.5 Navigation ............................................................................................ 713.6 Suche & Icons ....................................................................................... 743.7 Die blaue Fläche .................................................................................... 763.8 Key Visual & Headline ........................................................................... 813.9 Button ................................................................................................... 893.10 Hintergrund ergänzen ............................................................................ 943.11 Content ................................................................................................. 983.12 Textebenen ......................................................................................... 1003.13 Rechte Spalte ...................................................................................... 1033.14 Footer ................................................................................................. 1113.15 Folgeseite ........................................................................................... 1193.16 Key Visuals .......................................................................................... 1303.17 Content ............................................................................................... 137

4 Vom Layout zum Template ...................................................................... 143

4.1 Layout analysieren .............................................................................. 1434.1.1 Header ................................................................................................ 1454.1.2 Header2 .............................................................................................. 1464.1.3 Content ............................................................................................... 1474.1.4 Footer ................................................................................................. 1484.2 Bilder exportieren ............................................................................... 1484.2.1 CSS-Sprite: Header .............................................................................. 1494.2.2 Slideshow-Themen .............................................................................. 1544.2.3 Twitter-Vogel ....................................................................................... 1594.2.4 Icons und Hintergründe ....................................................................... 1614.2.5 Vorschaubilder .................................................................................... 1784.2.6 Favicon ............................................................................................... 1794.3 Die Datei templateDetails.xml bearbeiten ............................................ 1794.3.1 Infos und Beschreibung ....................................................................... 1804.3.2 Installationsroutine bestimmen ........................................................... 181

60180-1 Templates Joomla 1.6_NEU_1.indd 860180-1 Templates Joomla 1.6_NEU_1.indd 8 27.06.2012 18:01:1527.06.2012 18:01:15

Inhaltsverzeichnis 9

4.3.3 Modulpositionen festlegen .................................................................. 1834.3.4 Parameter bestimmen ......................................................................... 1844.4 Das Template programmieren .............................................................. 1854.4.1 index.php ........................................................................................... 1854.4.2 error.php ............................................................................................. 2004.4.3 component.php .................................................................................. 2044.4.4 offl ine.php .......................................................................................... 2054.5 Sprachdateien verfassen ..................................................................... 2114.6 Template installieren ........................................................................... 2124.7 Template einrichten ............................................................................. 2164.7.1 Slideshow erstellen ............................................................................. 2174.7.2 Twitter einbinden ................................................................................ 2214.7.3 Blindtexte schreiben ........................................................................... 2254.7.4 Kontakt erstellen ................................................................................. 2304.7.5 Menüs anlegen ................................................................................... 2314.7.6 Suchfunktion implementieren ............................................................. 2364.7.7 Social-Media-Icons einbinden ............................................................. 2374.7.8 Blindmodule schreiben ....................................................................... 2374.8 Stylesheets defi nieren ........................................................................ 2384.8.1 template.css ....................................................................................... 2384.8.2 error.css .............................................................................................. 2654.8.3 print.css .............................................................................................. 2664.8.4 offl ine.css ........................................................................................... 2684.8.5 editor.css ............................................................................................ 270

5 Prüfen und validieren ............................................................................. 271

5.1 Aufl ösung der Browser ........................................................................ 2715.2 W3C-Validator ..................................................................................... 2745.3 Darstellung in Browsern ...................................................................... 2765.3.1 Browser Collection .............................................................................. 2765.3.2 Unterschiedliche Betriebssysteme ....................................................... 2775.3.3 Screenshots ........................................................................................ 2785.4 Ladezeit der Website ........................................................................... 279

A Joomla-Verzeichnisstruktur .................................................................... 281

B Joomla-Template-Befehle ....................................................................... 283

C Programme ............................................................................................ 287

C.1 Editor .................................................................................................. 287C.2 FTP-Client ............................................................................................ 288C.3 Browser .............................................................................................. 288C.4 Browser-Tools ...................................................................................... 289C.5 Bildbearbeitung .................................................................................. 290C.6 Emulatoren ......................................................................................... 290C.7 Werkzeuge .......................................................................................... 291

60180-1 Templates Joomla 1.6_NEU_1.indd 960180-1 Templates Joomla 1.6_NEU_1.indd 9 27.06.2012 18:01:1627.06.2012 18:01:16

Inhaltsverzeichnis10

C.8 Online-Tools ........................................................................................ 292C.9 Nachschlagewerke .............................................................................. 292

D Abkürzungen und Begriffe ..................................................................... 295

E Upgrade ................................................................................................ 299

F Bootstrap .............................................................................................. 303

Index ..................................................................................................... 315

60180-1 Templates Joomla 1.6_NEU_1.indd 1060180-1 Templates Joomla 1.6_NEU_1.indd 10 27.06.2012 18:01:1627.06.2012 18:01:16

11

1 Joomla-Templates

1.1 Was ist ein Joomla-Templat e?

Ein Joomla-Template ist – grob gesagt – das Webdesign für Joomla und noch ein bisschen mehr. Um abgrenzen zu können, worum genau es sich handelt, bedarf es zunächst der Erklärung einiger Begriffe.

Screendesign

Unter Screendesign wird das statische Layout verstanden, das mit einem Bildbearbeitungs-programm erstellt wird. Es ist in aller Regel eine Photoshop-, Fireworks- oder Freehand-Datei mit dem Entwurf eines Webdesigns. In diesem Entwurf zeichnet sich die spätere Funktionalität einer Website bereits ab.

Webdesign

Webdesign ist die Umsetzung des Screendesigns in HTML, CSS, JavaScript und Grafi ken. Es kann mit einem WYSIWYG-Editor wie Dreamweaver oder Expression Web oder mit ganz einfachen textorientierten Editoren erstellt werden. Es umfasst den Aufbau, die Ge-staltung und die Nutzerführung einer Website. Der Webdesigner hat die Aufgabe, die An-forderungen des Auftraggebers mit den Wünschen des Nutzers, also des Besuchers der Seite, in Einklang zu bringen und dabei den elegantesten technischen Weg zu wählen.

Template

Ein Template ist das Webdesign für ein Content-Management-System (CMS), aber auch noch ein bisschen mehr. Es umfasst einerseits das klassische Webdesign und andererseits den CMS-eigenen Programmcode. Der Programmcode wird dazu eingesetzt, die Funk-tionalität des Webdesigns zu erweitern, beispielsweise Platzhalter für spätere Inhalte zu schaffen. Ein Template-Designer ist somit Webdesigner und Programmierer zugleich.

Ein Joomla-Template ist also das Webdesign in PHP, HTML, CSS und JavaScript, angerei-chert durch Bilder und Grafi ken. Sie benötigen einige Fähigkeiten, um ein Joomla-Tem-plate zu entwickeln. Vielleicht denken Sie an dieser Stelle: »Okay. Ich kann gar nichts von all dem. Das lasse ich lieber.« Dann sei Ihnen gesagt: Nur Mut! Sie werden es lernen, wenn Sie weiterlesen. Zugegeben, es wird manchmal ein bisschen kniffl ig. Doch mit etwas Moti-vation, Ausdauer und einer gut funktionierenden Kaffeemaschine werden Sie es schaffen.

60180-1 Templates Joomla 1.6_NEU_1.indd 1160180-1 Templates Joomla 1.6_NEU_1.indd 11 27.06.2012 18:01:1627.06.2012 18:01:16

1 Joomla-Templates12

Sinn und Zweck eines Templates

Ein Joomla-Template ist verantwortlich für das Aussehen und die Struktur einer Website.Es ist hingegen nicht verantwortlich für die Struktur des Inhalts. Die legt der Benutzervon Joomla in den jeweiligen Beiträgen fest. Ein Template besteht aus einem Bündel vonDateien, die zusammen den Rahmen der Seite bilden. Im Frontend sowie im Backend von Joomla dienen Templates als Vorlagen.

Bei jeder Installation von Joomla werden Standard-Templates installiert, die als Ausgangs-punkt dienen. Auf vielen Seiten im Internet fi nden Sie eine Reihe zusätzlicher Templates,die zum Teil von Webdesign-Profi s programmiert wurden, zum Teil aber auch von ab-soluten Anfängern. Wenn Sie dieses Buch durchgearbeitet haben, werden Sie die guten Templates von den schlechten zu unterscheiden wissen. Viele Templates im Netz sind freierhältlich; andere hingegen werden mit Nutzerlizenzen verkauft. Um den eigenen indivi-duellen Ansprüchen gerecht zu werden, kann man entweder ein vorhandenes Template anseine Bedürfnisse anpassen oder ein eigenes von Grund auf programmieren. Beide Wegewerden in diesem Buch beschrieben.

Auf einer Website, die unter unserem bevorzugten Content-Management-System Joomlaläuft, dient ein Template also als gestalterische Vorlage. Es ist keine eigenständige Website und bestimmt auch nicht allein das Aussehen einer Website. Es ist vielmehr die Grund-defi nition der Website, und erst durch Hinzufügen des Inhalts entsteht letztendlich dieDarstellung der Site.

Bild 1.1: Website mit Inhalt

60180-1 Templates Joomla 1.6_NEU_1.indd 1260180-1 Templates Joomla 1.6_NEU_1.indd 12 27.06.2012 18:01:1627.06.2012 18:01:16

1.2 Wieso werden Templates eingesetzt? 13

Bild 1.2: Website ohne Inhalt

1.2 Wieso werden Templates eingesetzt?

Die Grundaufgabe eines Content-Management-Systems, also auch von Joomla, ist die Trennung des Inhalts (Content) von der Gestaltung (Layout). Auf jeder Website, die mit Joomla realisiert wird, kommen verschiedene Elemente zum Einsatz, die bestimmte Auf-gaben erfüllen sollen. Sie entscheiden im Vorfeld, welche Erweiterungen (Komponen-ten, Module und Plug-ins) für diese Aufgaben infrage kommen. So werden vielleicht ein Firmen logo, die Navigation, die Pfadangabe, der Inhalt und die Anmeldung ihren Platz auf Ihrer Website fi nden, der in den meisten Fällen auch auf den Unterseiten der gleiche bleibt. Dazu sollen auf allen Seiten Ihres Webauftritts einige Schriften, Hintergründe, Abständeund Farben wiederverwendet werden. Genau hier kommt die Stärke eines Templates zum Tragen. Im besten Fall brauchen Sie nämlich nur einmal zu defi nieren, wie eine Überschrift auszusehen hat, und Joomla wird diese auf allen Seiten genau so anzeigen lassen. Wenn Sie dann nachträglich die Farbe der Überschrift ändern, wird das für alle nachgeordneten Seiten übernommen. Wir wollen uns nicht vorstellen, welchen Krampf im Zeigefi nger eine statische HTML-Website hervorrufen würde, wenn wir auf jeder einzelnen von vielleicht 50 Seiten die Überschrift ändern wollten.

60180-1 Templates Joomla 1.6_NEU_1.indd 1360180-1 Templates Joomla 1.6_NEU_1.indd 13 27.06.2012 18:01:1627.06.2012 18:01:16

1 Joomla-Templates14

Und noch ein Vorteil: Stellen Sie sich vor, Sie setzen eine Website online mit Joomla auf,und Ihre Kollegen bestücken sie fl eißig mit Inhalten. Jetzt wäre es denkbar ungünstig, amselben System die Gestaltung umzusetzen. Sie können deshalb ohne Weiteres, etwa auf einer lokalen Joomla-Testumgebung, ein Template entwickeln, das sich später ganz einfachals Erweiterung im Backend online installieren lässt. So kommen Sie sich in keiner Weisein die Quere, und es herrscht perfekte Arbeitsteilung.

Gestalterische Änderungen an der Website werden ausschließlich im Template vorgenom-men und sind so sehr leicht zu realisieren. Sie können sogar der ganzen Website mit einemneuen Template ein komplett anderes Aussehen verschaffen.

Zusammengefasst: Die Darstellung der Inhalte wird vom Template übernommen. ImJoomla-Template werden sämtliche Defi nitionen der Gestaltung hinterlegt, die den äuße-ren Eindruck einer Website maßgeblich bestimmen. Wenn ein Template erst einmal steht,kann man dennoch durch Einfügen von Inhalten wie zum Beispiel Bildern und Tabellendie Gestaltung und Wirkung der kompletten Seite ändern.

1.3 Die Standard-Templates von Joomla

Bei jeder Installation von Joomla werden die Standard-Templates gleich mit installiert:

• BeezEin barrierefreies Template für Joomla.

• AtomicDas spartanische Template von Joomla lässt sich gut für eigene Projekte verwenden.

Anhand dieser Templates kann man sehr schön sehen, wie der gleiche Inhalt durch unter-schiedliche Templates wirkt.

60180-1 Templates Joomla 1.6_NEU_1.indd 1460180-1 Templates Joomla 1.6_NEU_1.indd 14 27.06.2012 18:01:1727.06.2012 18:01:17

1.3 Die Standard-Templates von Joomla 15

Bild 1.3: Standard-Template Beez

60180-1 Templates Joomla 1.6_NEU_1.indd 1560180-1 Templates Joomla 1.6_NEU_1.indd 15 27.06.2012 18:01:1727.06.2012 18:01:17

1 Joomla-Templates16

Bild 1.4: Standard-Template Atomic

60180-1 Templates Joomla 1.6_NEU_1.indd 1660180-1 Templates Joomla 1.6_NEU_1.indd 16 27.06.2012 18:01:1727.06.2012 18:01:17

17

2 Bl ank Template

Das Blank Template ist ein guter Ausgangspunkt für jedes neue Template-Projekt unter Joomla. Es ist ein voll funktionstüchtiges Template (es lässt sich direkt installieren) und bringt die Unterstützung für Tablets, Smartphones und Internet Explorer 6 bis 9 mit. Wäh-rend der Internet Explorer 6 Vergangenheit sein sollte, sind HTML5 und CSS3 die Zu-kunft. Und auch hierfür ist das Blank Template bestens gewappnet. HTML5-Tags, die von allen Browsern korrekt interpretiert werden können, werden jetzt schon eingesetzt, obwohl erst 2014 die Spezifi kationen dafür verabschiedet werden.

Mit PIE, dem Progressive Internet Explorer, einem JavaScript, ist es möglich, CSS3-Attri-bute browserkonform zu verwenden. Seien es Farbverläufe, runde Ecken oder Schatten: Für solche Effekte sind ab sofort keine Bilder mehr notwendig, sondern nur noch reinesCSS.

Ein weiteres JavaScript kommt zum Einsatz: Modernizr. Dieses Script wurde u. a. vonPaul Irish (Google) entworfen und dient dazu, herauszufi nden, welche HTML- und CSS-Eigenschaften vom Browser unterstützt werden. Auf Grund dessen werden Klassen verge-ben, mit denen man unterstützte Eigenschaften und – ggf. für ältere Browser – Fallback-Lösungen deklarieren kann.

Mit dem CSS-Reset werden alle Standardwerte für Abstände und Größen zurückgesetzt.Damit kann man bei Null anfangen, seine Website zu gestalten.

Über den vorgeschalteten Compressor werden alle Stylesheets komprimiert geladen. DerBrowser lädt so nur eine einzige CSS-Datei mit nur einer Zeile. Eine höhere Performance ist nicht erreichbar.

Als erweiterte Eigenschaft ist es möglich, CSS-Variablen zu verwenden. Wie? CSS und Va-riablen? Ja, das geht und zwar mit PHP. Solche Variablen sind bestens geeignet, um Para-meter zu bestimmen, die die Gestaltung beeinfl ussen.

Features

• Support für Tablets, Smartphones und – immer noch – IE 6

• PIE (Cross-Browser CSS3)

• Modernizr

• CSS-Reset

• Compressor

• CSS-Variablen

60180-1 Templates Joomla 1.6_NEU_1.indd 1760180-1 Templates Joomla 1.6_NEU_1.indd 17 27.06.2012 18:01:1727.06.2012 18:01:17

2 Blank Template18

Alle Dateien des Blank Templates, angefangen von der wichtigsten Datei, der index.php, bis zum favicon.ico, werden im Anschluss erklärt. Doch, wie schrieb es Sir Arthur Canon Doyle seinem Charakter Sherlock Holmes zu: »Einem großen Geist ist nichts zu klein«. Und sowird es gehandhabt. Jedes Detail ist wichtig. Streng nach dem Unix-Prinzip ist jede Dateieine Textdatei und kann mit dem Editor geöffnet und bearbeitet werden. Okay, okay – fürBilddateien nimmt man lieber ein Bildbearbeitungsprogramm.

Überblick

Ist das Blank Template heruntergeladen und entpackt, fi ndet man folgende Ordner undDateien vor:

Ordner

• css• html• images• js• language• psd

Dateien

• component.php• error.php• index.php• offl ine.php• templateDetails.xml• apple-touch-icon-57x57.png• apple-touch-icon-72x72.png• apple-touch-icon-114x114.png• template_preview.png• template_thumbnail.png• CHANGELOG.txt• favicon.ico

Streng genommen braucht man nur zwei Dateien, um ein vollständiges Template zu er-stellen:

• index.php• templateDetails.xml

Beide Dateien zusammengenommen ergeben das Mini-Template, das Template mit derkleinstmöglichen Anzahl an Dateien. Verfolgen Sie den Gedanken des Minimalen weiterund schauen Sie sich die kleinste index.php der Welt an.p

60180-1 Templates Joomla 1.6_NEU_1.indd 1860180-1 Templates Joomla 1.6_NEU_1.indd 18 27.06.2012 18:01:1827.06.2012 18:01:18

2.1 index.php (mini) 19

2.1 index.php (mini)

Die Datei index.php ist das Herzstück des Templates. Hier laufen alle Dateien zusammen. pSie ist maßgeblich für den Quelltext verantwortlich und letztendlich geht es nur darum, den Quelltext zu erstellen und zu beeinfl ussen.

Der minimale Aufbau der index.php sieht folgendermaßen aus:p

<?php defined(‚_JEXEC') or die; ?><!doctype html><html><head> <jdoc:include type="head" /></head><body> <jdoc:include type="message" /> <jdoc:include type="component" /></body></html>

Die erste Zeile ist in PHP geschrieben. Das Gute an PHP und HTML ist, dass es in einer Datei wahlweise geschrieben werden kann. Mit <?php eröffnet man einen PHP-Bereich – egal wo – und mit ?> schließt man ihn wieder. Mit der Anweisung innerhalb des PHP-Bereichs (erste Zeile) verbieten wir den direkten Zugriff der Datei. Dies geschieht über die Joomla-API mit dem Befehl _JEXEC, der nichts anderes ausgibt als ein Boolesches Argu-ment, das den Wert -1 oder 0 hat. Ist der Wert 0, wird die Datei über das System (Joomla) aufgerufen. Ist der Wert -1, wird die Datei direkt über den Browser aufgerufen. Der Besu-cher der Website wird so daran gehindert, dass er diese Datei direkt über die Adresseingabe des Browsers aufrufen kann, z. B. über http://www.example.com/templates/blank/index.php.

In der zweiten Zeile deklarieren wir mit <!doctype html> den Dokumententyp. Diese Zei-le ist eine große Errungenschaft von HTML5. Wer schon länger als Webdesigner dabei ist, der kennt das auch anders: Kryptische Dokumententypen, die für jede Version und jeden Einsatzzweck anders deklariert werden, zeilenlang und unmöglich aus dem Kopf heraus codierbar. Damit wollte man einst sichergehen, dass der Browser den Quelltext auch kor-rekt interpretiert. Mit HTML5 ist damit Schluss, denn das ist abwärtskompatibel und wird – oh Wunder – sogar vom Internet Explorer 6 korrekt erkannt. Es ist so, dass die Dialekte nun zu Gunsten des Hochdeutschen ... bzw. von HTML5 ... einpacken dürfen.

Was ab Zeile drei folgt, ist der kleinstmögliche Aufbau einer HTML-Seite. Diese Seite wird mit <html> geöffnet und endet mit </html>. Der Kopfbereich beginnt mit <head> undendet mit </head> und der Rumpf beginnt mit <body> und endet mit </body>. Innerhalb des Kopfbereichs laden wir die Header-Informationen mit <jdoc:include type="head" /> über die Schnittstelle von Joomla (API). Über den Typ head des jdoc:include-Befehls ist es Joomla möglich, die globalen Metadaten des Systems zu laden, sowie die Cascading Stylesheets, JavaScripte und RSS-Feeds.

Der jdoc:include-Befehl kommt auch zweimal im Rumpf vor: Einmal als Typ message und danach als Typ component. Über den Typ message werden die Systemnachrichten ausge-

60180-1 Templates Joomla 1.6_NEU_1.indd 1960180-1 Templates Joomla 1.6_NEU_1.indd 19 27.06.2012 18:01:1827.06.2012 18:01:18

2 Blank Template20

scheint an dieser Stelle die Meldung »Der Beitrag wurde erfolgreich abgespeichert«. So istes dem System möglich, mit dem Nutzer zu kommunizieren. Solche Rückmeldungen sindwichtig, um sicher zu gehen, dass eine Aktion auch erfolgt ist. Mit dem Typ component wirddann der eigentliche Inhalt, also die Beiträge und die Inhalte anderer Komponenten, geladen.Beiträge werden von der Komponente com_content verwaltet, bekommen aber, da es ich umein Content Management System handelt, einen besonderen Stellenwert. Daher erscheinthier der Typ component und nicht, wie man vielleicht vermuten mag, der Typ content. So,genug erklärt. Wie sieht denn der Quelltext dieser minimalen index.php aus?p

<!doctype html><html slick-uniqueid="1"> <head> <base href="http://localhost/joomla25/"> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta content="index, follow" name="robots"> <meta content="Joomla! – Open Source Content Management" name="generator"> <title>Home</title> <link href="/joomla25/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="/joomla25/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> <script src="/joomla25/media/system/js/mootools-core.js" type="text/javascript"></script> <script src="/joomla25/media/system/js/core.js" type="text/javascript"></script> <script src="/joomla25/media/system/js/caption.js" type="text/javascript"></script> <script type="text/javascript"> window.addEvent(‚load', function() { new JCaption(‚img.caption'); }); </script> </head> <body> <div id="system-message-container"> </div> <div class="blog-featured"> <h1>Home</h1> </div> </body></html>

60180-1 Templates Joomla 1.6_NEU_1.indd 2060180-1 Templates Joomla 1.6_NEU_1.indd 20 27.06.2012 18:01:1827.06.2012 18:01:18

2.2 templateDetails.xml (mini) 21

Der Quelltext fängt mit dem Dokumententyp <!doctype html> an. Danach folgt der html-Tag. Im Kopfbereich (head) werden dann die Header-Informationen geladen (base, meta, title, link und script). Im Rumpf (body) erscheint ein div der id="system-message-

container" für die Systemnachrichten und ein div der class="blog-featured" für die Beiträge. Im letzten div wird der Seitentitel als Überschrift ersten Grades (h1) ausgegeben.

Dieser Quelltext rührt von den Standardeinstellungen einer inhaltslosen Joomla-2.5-In-stanz her. Die globalen Metadaten (Schlüsselwörter und Beschreibung) sind noch nicht hinterlegt und werden daher nicht angezeigt. Im vorangelegten Hauptmenü gibt es den Eintrag »Home«; der für den Titel und die Überschrift verantwortlich ist. Dieser Eintrag wurde als Blog-Layout spezifi ziert, daher die Klasse »blog-featured«, mit aktivierter Feed-Anzeige, daher die Links im Kopfbereich mit dem Titel »RSS 2.0« und »Atom 1.0«. Auf den übrigen Quelltext hat man – vorerst – keinen Einfl uss über das Backend. Später, durch Code-Schnipsel, bekommt man aber die Möglichkeit, den Metatag namens »generator« zu beeinfl ussen und die JavaScripte, sofern sie nicht benötigt werden, herauszunehmen. JavaScripte gehören zudem ans Ende der HTML-Seite, vor dem schließenden body-Tag </body>. Um die Performance zu erhöhen, sollten alle JavaScripte zusammengefasst und komprimiert in einer Datei geladen werden. Es gibt allerdings Ausnahmen, wie das Ja-vaScript modernizr.js, das ausdrücklich in den Kopfbereich (head) gehört. Soweit zum ge-nerierten Quelltext der minimalen index.php.

2.2 templateDetails.xml (mini)

Die Datei templateDetails.xml wird mit großem D geschrieben und ist die zweitwichtigste lDatei des Templates, direkt hinter der Datei index.php. In der templateDetails.xml werden lallgemeine Informationen (Name, Autor, etc.) des Templates hinterlegt und die Installa-tionsroutine festgelegt. Die Installationsroutine ist nichts anderes als eine Aufl istung allerOrdner und Dateien, die zum Template gehören, damit diese bei der Installation auch mit entpackt und abgelegt werden. Zudem werden die Modulpositionen hier hinterlegt, um sie danach in der index.php mittels p jdoc:include-Befehl des Typs modules einzubinden.Optional können hier Parameter angelegt werden, um das Template über das Backend ein-stellbar zu machen. Vielleicht soll das Template in verschiedenen Farbvarianten erstrahlen, dann kann man das über Parameter ermöglichen. Wie wäre es z. B. mit einem hübschen Rosa wie im BEEZ-Template (Joomla! 1.5)?!

Die minimale Version der templateDetails.xml sieht so aus:l

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install Public "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd"><extension version="2.5" type="template" method="upgrade"> <name>mini</name> <creationDate>11.11.11</creationDate> <author>Alexander Schmidt</author> <copyright>Copyright 2012 EDVAS</copyright>

60180-1 Templates Joomla 1.6_NEU_1.indd 2160180-1 Templates Joomla 1.6_NEU_1.indd 21 27.06.2012 18:01:1827.06.2012 18:01:18

2 Blank Template22

<authorEmail>[email protected]</authorEmail> <authorUrl>http://www.edvas.de</authorUrl> <version>1.0.0</version> <description>The smallest template ever.</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> <position> <position>debug<position> </positions></extension>

Was sieht man hier? In der ersten Zeile wird, ähnlich wie mit PHP, ein XML-Bereich ge-schaffen, indem Version und Zeichensatz (utf-8) festgelegt sind. Danach kommt, welch'Grauen, die Deklaration des Dokumententyps. Hier wünscht man sich unweigerlich denEinzug des gleichen Gedankens, der dafür verantwortlich war, unter HTML5 den Doku-mententyp zu vereinfachen. Aber was fi nden wir stattdessen vor? Eine Deklaration, dieSie und ich und die Macher von XML nicht einfach aus dem Gedächtnis hinschreibenkönnten. Uah! Aber zum Glück gibt es das Blank Template, indem das alles schon vorco-diert ist. Weitere Erklärungen hierzu werden wir uns hier ersparen, da unter der joomla.org-Adresse, die hier angegeben ist, nicht einmal eine Datei vorzufi nden ist. Da fragt mansich zu Recht: Wieso das Ganze?

Gut. Kommen wir zum angenehmen Teil der templateDetails.xml. Der beginnt mit deminstall-Bereich, der mit der Joomla-Version ausgestattet wird, für die das Template be-stimmt ist. Der Typ lautet template. Die Methode upgrade erlaubt es, das Template nach-träglich über eine vorhandene Version zu installieren. Dabei werden neue Dateien undneuere Versionen von Dateien installiert. Alte Dateien, die nicht mehr gebraucht werden,bleiben allerdings erhalten; werden also nicht gelöscht. Was nun folgt, sind die allgemei-nen Informationen (Name des Templates, Erstellungsdatum, Autor, Copyright, E-Mail-Adresse, Website, Version und Beschreibung) zum Template, die im Backend von Joomlaunter dem Template-Manager angezeigt werden. Danach wird die Installationsroutine inForm einer Aufl istung geschrieben. Mit <folder> werden Ordner und mit <filename>Dateien eingebunden, die zum Template gehören. Die Modulpositionen fi nden danachPlatz. Jede Position wird in eine eigene Zeile geschrieben und steht fortan zur Einbindungin die Datei index.php bereit. Zudem ist sie über den Modul-Manager im Backend von pJoomla auswählbar.

Steckten die beiden Dateien index.php und p templateDetails.xml in einem Ordner namens lmini und würde dieser Ordner in eine ZIP-Datei zusammengepackt, dann könnte diesesiMini-Template erfolgreich unter Joomla installiert werden.

Das Mini-Template ist allerdings wenig geeignet als Ausgangspunkt einer Template-Ent-wicklung und wird daher erweitert. Wesentliche Bestandteile der Erweiterungen sind:

• Cascading Stylesheets

• Modernizr

60180-1 Templates Joomla 1.6_NEU_1.indd 2260180-1 Templates Joomla 1.6_NEU_1.indd 22 27.06.2012 18:01:1827.06.2012 18:01:18

2.3 Cascading Stylesheets 23

• Browserweiche (Internet Explorer)

• PIE (Cross-Browser CSS3)

• Debug-Modul

2.3 Cascading Stylesheets

Die Cascading Stylesheets des Blank Templates fi nden sich im Ordner css. Öffnet man den Ordner, fi ndet man zu den Sheets noch andere Dateien:

• editor.css

• error.css

• index.html

• offl ine.css

• phone.css

• print.css

• reset.css

• tablet.css

• template.css

• template.css.php

Die Dateien index.html und l template.css.php sind keine CSS-Dateien. Aber wofür sind sie pda?

2.3.1 index.html

Die Datei index.html ist ein »Sicherheitsding«. Sie ist ausschließlich dazu da, eine weißelSeite anzeigen zu lassen. Unter bestimmten Voraussetzungen ist es möglich, sofern keine Datei index.html oder l index.php vorhanden ist, alle Dateien des jeweiligen Ordners aufl is-pten zu lassen; Stichwort: Directory Listing. Um Script-Kiddies daran zu hindern, existiert in jedem Ordner von Joomla solch eine Datei mit leerem Inhalt.

Meine Damen und Herren, machen Sie sich gefasst auf die kleinste index.html der Welt:l

<html><body bgcolor="#FFFFFF"></body></html>

Applaus!

Was man letztendlich sieht, wenn man diese Datei aufruft, bleibt der eigenen Fantasie überlassen. Ein Schummler sieht weißen Text auf weißem Hintergrund. Ein Künstler sieht einen weißen Hasen im Schnee (schnief). Aber ein Programmierer sieht einen Rumpf mit der hexadezimalen Hintergrundfarbe FFFFFF. Und das ist auch gut so.

60180-1 Templates Joomla 1.6_NEU_1.indd 2360180-1 Templates Joomla 1.6_NEU_1.indd 23 27.06.2012 18:01:1827.06.2012 18:01:18

2 Blank Template24

2.3.2 template.css.php

Die template.css.php ist eine PHP-Datei. Alle PHP-Dateien des Blank Templates haben einspgemeinsam: den PHP-Kopf.

/*------------------------------------------------------------# author your name or company# copyright Copyright 2012 example.com. All rights reserved.# @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL# Website http://www.example.com------------------------------------------------------------*/

Leider ist dieser Kopf ein Zwang der JED-Redaktion (JED = Joomla Extension Directory) und muss in jede PHP-Datei des Blank Template, wenn es in der JED gelistet werden will.Es bleibt allerdings dem Entwickler überlassen, ob er den Kopf mit seinen Daten ausfüllt,oder einfach löscht. In den folgenden Dateien steht dieser Kopf, er wird allerdings hier imBuch nicht weiter betrachtet:

• component.php

• error.php

• index.php

• offl ine.php

• template.css.php (Ordner p css)

• modules.php (Ordnerp html)

• template.js.php (Ordner p js)

Hinweis: Da Joomla unter der GPL steht, stehen auch die Erweiterungen zwangsweise un-ter der GPL. Das betrifft die Templates allgemein und so auch das Blank Template.

Allerdings sind Layout-Elemente urheberrechtlich geschützt. Das betrifft die Bilder im Zu-sammenhang mit den Cascading Stylesheets.

Mit der Datei template.css.php werden alle Template-relevanten Cascading Stylesheets ge-pladen.

<?phprequire(‚reset.css');require(‚template.css');require(‚../../../media/system/css/system.css');require(‚../../system/css/system.css');require(‚../../system/css/general.css');?>

Das hat den Vorteil, dass in der index.php nur ein Cascading Stylesheet verlinkt werden pmuss. So werden die Abfragen des Browsers vermindert (HTTP-Requests) und die Perfor-mance gesteigert.

60180-1 Templates Joomla 1.6_NEU_1.indd 2460180-1 Templates Joomla 1.6_NEU_1.indd 24 27.06.2012 18:01:1827.06.2012 18:01:18

2.3 Cascading Stylesheets 25

Mit Hilfe der Datei reset.css werden alle Standardwerte zurückgesetzt, damit man »wirk-slich« bei Null anfangen kann zu kodieren. Per Standard wird z. B. dem Rumpf ein Außen-abstand (margin) zugewiesen oder den Überschriften (h1 bis h6) Größe und Abstand. Dies alles ist unerwünscht und soll selbst defi niert werden. Deshalb existiert die Datei mit einem allgemeingültigen, in Webdesigner-Kreisen anerkannten Reset. Die Datei template.css steht szur freien Defi nition eines Templates zur Verfügung. Hier können alle Selektoren mitsamt Attributen und Werten hinterlegt werden, die unmittelbar zum Template gehören.

Die drei Dateien system.css (2x) unds general.css sind System-Sheets, wobei die gleichnami-sgen für die Gestaltung der Systemnachrichten und der Debug-Ausgabe verantwortlich sind und die dritte für die Formularüberprüfung, Buttons, Tooltips, Caption und den Kalender.

Ein weiterer Schritt zu besserer Performance ist die Kompression der Sheets. Alle inkludier-ten Dateien werden, bevor sie im Browser ausgegeben werden, durch einen Kompressor gejagt, um die Dateigröße zu minimieren und das Sheet somit schneller ladbar zu machen.

<?php/* initialize ob_gzhandler to send and compress data */ob_start ("ob_gzhandler");/* initialize compress function for whitespace removal */ob_start("compress");/* required header info and character set */header("Content-type: text/css;charset: UTF-8");/* cache control to process */header("Cache-Control: must-revalidate");/* duration of cached content (1 hour) */$offset = 60 * 60 ;/* expiration header format */$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";/* send cache expiration header to broswer */header($ExpStr);/* Begin function compress */function compress($buffer) { /* remove comments */ $buffer = preg_replace(‚!/\*[^*]*\*+([^/][^*]*\*+)*/!', ‚', $buffer); /* remove tabs, spaces, new lines, etc. */ $buffer = str_replace(array("\r\n","\r","\n","\t",' ‚, ‚ ‚,' ‚),'',$buffer); /* remove unnecessary spaces */ $buffer = str_replace(‚{ ‚, ‚{‚, $buffer); $buffer = str_replace(‚ }', ‚}', $buffer); $buffer = str_replace(‚; ‚, ‚;', $buffer); $buffer = str_replace(‚, ‚, ‚,', $buffer); $buffer = str_replace(‚ {‚, ‚{‚, $buffer); $buffer = str_replace(‚} ‚, ‚}', $buffer); $buffer = str_replace(‚: ‚, ‚:', $buffer); $buffer = str_replace(‚ ,', ‚,', $buffer);

60180-1 Templates Joomla 1.6_NEU_1.indd 2560180-1 Templates Joomla 1.6_NEU_1.indd 25 27.06.2012 18:01:1827.06.2012 18:01:18

2 Blank Template26

$buffer = str_replace(‚ ;', ‚;', $buffer); $buffer = str_replace(‚;}', ‚}', $buffer); return $buffer;}?>

Mit dem ob_gzhandler werden die Daten komprimiert. Dafür ist die Funktion »compress«zuständig, die dafür verantwortlich ist, sämtliche Leerzeichen herauszunehmen. Über hea-der werden der Content-Type, der Zeichensatz und der Cache-Control weitergegeben. Diekomprimierte Ausgabe der Sheets soll eine Stunde im Cache zum Abrufen bereitliegen.Dafür muss über header auch die Zeit mitgegeben werden. Was dann folgt, ist die erwei-terte Funktion der Komprimierung, in der alle Kommentare, Einrückungen, Leerzeichen,Zeilenumbrüche und unnötigen Leerzeichen herausgenommen werden. Na, wenn das malnicht die Performance steigert?!

2.3.3 reset.css

Wie weiter oben schon beschrieben, dient die Datei reset.css dazu, es zu ermöglichen, bei sNull mit den CSS-Defi nitionen anzufangen. Eine Quick'n'Dirty-Lösung hierfür wäre fol-gende Defi nition:

* {margin:0; padding:0;}

Diese Methode hat einen Nachteil: Über den Universalselektor * werden alle Elementeangesprochen und deren Abstände, innen wie außen (padding und margin), auf Null ge-setzt. Die Betonung hierbei liegt auf ALLE Elemente. Unter Umständen existieren auf einerWebsite so viele Elemente, dass diese Anweisung zu Performance-Verlusten führt.

Um dem zu entgehen, gibt es einen weitaus besseren Reset:

/* reset */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,caption, tbody, tfoot, thead, tr, th, td {border:0; font-size:100%; margin:0;padding:0;}a {outline:none;}table {border-collapse:collapse; border-spacing:0;}fieldset,img {border:0;}img {vertical-align:bottom;}del,ins {text-decoration:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}q:before,q:after {content:'';}abbr,acronym {border:0; font-variant:normal;}sup,sub {vertical-align:baseline;}legend {color:#000;}input,button,textarea,select,optgroup,option {

60180-1 Templates Joomla 1.6_NEU_1.indd 2660180-1 Templates Joomla 1.6_NEU_1.indd 26 27.06.2012 18:01:1827.06.2012 18:01:18

2.3 Cascading Stylesheets 27

font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit;}input,button,textarea,select {font-size:100%;}

Das ist ein guter Reset und genau das, was man braucht, um vorne anzufangen mit den Defi nitionen, die alle am besten in die Datei template.css gepackt werden.

2.3.4 template.css

In die Datei template.css wird die Gestaltung des Templates deiner Website geschrieben.s

Hier bleibt es einem selbst überlassen, welche Selektoren man gebraucht. Eine kleine Start-hilfe sei mit auf den Weg gegeben:

/* TEMPLATE CSS*********************************************/html {height:100%; margin-bottom:1px; overflow-y:scroll;}body {background-color:#fff; color:#000; font:normal normal normal 75%/125%arial,sans-serif; height:100%; text-align:center;}

Statt TEMPLATE muss hier natürlich besser der Name des eigenen Templates geschrieben werden.

Das Attribut overflow-y des html-Selektors dient dazu, einen Scrollbalken anzeigen zulassen, auch wenn keiner gebraucht wird. Dies verhindert den unschönen Linksrutsch ei-ner zentrierten Website, der sich einstellt, wenn man von einer Seite ohne Scrollbalken (kurzer Content) zu einer Seite mit Scrollbalken (langer Content) surft. Dem Besucher fällt der Scrollbalken nicht auf.

Der Rumpf ist voreingestellt mit einer weißen Hintergrundfarbe und schwarzem Text, ge-folgt von der Schriftdefi nition. Das Attribut text-align ist auf center eingestellt, um dieWebsite zu zentrieren. Soll die Website linksbündig erscheinen, sollte hier besser left stattcenter stehen.

/* LAYOUT*********************************************/#overall {height:100%; margin:0 auto; text-align:left; width:100%;} #header {} #main {} #footer {}/* Layout Classes */ .inheader {} .inmain {} .infooter {}

Hier fängt das eigene Layout an. Der umspannende Container mit der ID overall bekommt die eigentliche Breite und Höhe der Website (hier: 100%). Eine gute Breite für Desktops ist z. B. 960 Pixel. Um die Website mittig auszurichten, werden die Werte des Außenabstands (margin) für links und rechts auf auto gesetzt. Ein text-align auf left lässt den Text da-rin linksbündig erscheinen, der ja zuvor im body mittig gesetzt wurde.

60180-1 Templates Joomla 1.6_NEU_1.indd 2760180-1 Templates Joomla 1.6_NEU_1.indd 27 27.06.2012 18:01:1827.06.2012 18:01:18

2 Blank Template28

Voreingestellt und nach dem Boxmodell (div-Container) werden jetzt die IDs geschrie-ben, die sämtliche Defi nitionen beinhalten. Danach kommen die Klassen, die alle mit demSuffi x »in« anfangen und nur die Innenabstände (padding) beherbergen. Die Innenab-stände werden von den Browsern der älteren Generationen falsch interpretiert. Mal wer-den diese Abstände zur Breite addiert, mal subtrahiert, was zur falschen Darstellung desLayouts führt. Um dies von vornherein anzufangen, wird die Layout-Struktur in der Dateiindex.php nach dem Boxmodell codiert.p

/* Floats */.float-left {float:left;}.float-right {float:right;}.group:before, .group:after {content:""; display:table;}.group:after {clear:both;}.ie6 .group {zoom:1;}.ie7 .group {zoom:1;}

Die Klassen float-left, float-right und group sind Helferklassen des Templates, umSpalten-Layouts zu ermöglichen. Mit diesen Klassen kann ein Zwei-Spalten-Layout in derindex.php nach dem Boxmodell folgendermaßen realisiert werden:p

<div class="group"> <div id="" class="float-left"> <div class=""> </div> </div><div id="" class="float-left"> <div class=""> </div></div></div>

Die Klasse ie6 unter den Float-Helferklassen wird mittels Browserweiche in der index.php nur vom Internet Explorer 6 interpretiert. Genauso verhält es sich mit der Klasse ie7, diefür den Internet Explorer 7 zuständig ist. Für beide Klassen (ie6 und ie7) wird die Klassegroup mit dem Attribut zoom versehen, um das Layout in den älteren Browsern korrekt anzeigen zu lassen. Die Float-Helferklassen sind sehr nützlich und haben sich in der Praxisbewährt.

2.3.5 editor.css

Das Cascading Stylesheet editor.css ist für den WYSIWYG-Editor im Backend und Fron-stend vorgesehen. Hier bekommst Du die Möglichkeit, den Inhalt im Editor so aussehenzu lassen, wie er später auch auf der Website anzusehen ist. Die meisten Editoren unterJoomla können so konfi guriert werden, dass ein eigenes Stylesheet dafür greift.

/* EDITOR CSS*********************************************/body {background-color:#fff; color:#000;}

60180-1 Templates Joomla 1.6_NEU_1.indd 2860180-1 Templates Joomla 1.6_NEU_1.indd 28 27.06.2012 18:01:1827.06.2012 18:01:18

2.3 Cascading Stylesheets 29

Voreingestellt erscheint der Text schwarz auf weißem Hintergrund. Hier empfi ehlt es sich, die gleichen Defi nitionen zu hinterlegen wie in der Datei template.css. Warum nicht gleichdie template.css dem Editor zuweisen, fragt man sich? Nun, das führt meistens zu unschö-snen Darstellungen innerhalb des Editors. Zudem ist auch nur ein Teil der template.css für sden Inhalt zuständig, so dass dieser Teil nochmals, ohne vorangestellte IDs und Klassen der Layout-Container, effektiver in eine separate Datei gepackt wird.

2.3.6 error.css

Die Datei error.css wird über die Dateis error.php verlinkt. Beide Dateien dienen der Feh-plerausgabe, also der Ausgabe, die erscheint, wenn der Besucher z. B. eine Seite aufruft, die nicht existiert (Error 404). Die Standardfehlerausgabe von Joomla ist so hässlich, dass hier unbedingt eigene Dateien codiert werden sollten. Eigene Fehlerseiten gehören zu jedem guten Template und sind somit Pfl icht und keine Kür.

Die Defi nitionen der error.css sind folgendermaßen voreingestellt:s

/* ERROR CSS*********************************************/body {background:#fff; color:#000; font-family:Arial,Helvetica,Sans Serif; font-size:78%; margin:0; padding:0; text-align:center;}

#error { margin:0; padding:0; padding-top:40px; padding-bottom:60px; width:814px; }h1 {margin:0 0 20px 0;}.search label {display:none}

Im body werden Hintergrund und Typographie hinterlegt. Zudem wird der Innenab-stand (padding) auf Null gesetzt und der Inhalt zentriert ausgegeben (text-align). DerContainer mit der ID error wird anschließend mit Abständen und Breite defi niert. Die Überschrift (h1) bekommt einen unteren Außenabstand. Das Label des Suchfelds wird ausgeblendet.

2.3.7 offl ine.css

Nach dem Prinzip der Fehlerseite, wird die Datei offl ine.css über die Dateis offl ine.php ver-plinkt. Die Offl ine-Seite wird immer dann angezeigt, wenn Joomla in der globalen Konfi gu-ration auf offl ine gesetzt ist. Der Besucher bekommt dann den Hinweis angezeigt, der in der Konfi guration hinterlegt wurde. Das Aussehen, sprich die CSS-Defi nitionen, werden in dieser Datei hinterlegt.

/* OFFLINE CSS*********************************************/body {color:#000; font-family:Arial,Helvetica,Sans Serif; font-size:78%; margin:0; padding:0; text-align:center;}img {border:0 none;}

60180-1 Templates Joomla 1.6_NEU_1.indd 2960180-1 Templates Joomla 1.6_NEU_1.indd 29 27.06.2012 18:01:1827.06.2012 18:01:18

2 Blank Template30

/* LAYOUT*********************************************/#frame {margin:20px auto; padding:20px; width:400px;}#frame form {text-align:left;}

/* class styles */.outline {background:#fff; border:1px solid #ebe7d9; padding:2px;}.inputbox {width:130px;}

/* form styles */form {margin:auto;}form p {margin:0; padding:0;}form fieldset {border:0 none; margin:0; padding:0.2em;}label {display:block; float:left;}input {padding:3px;}input.button {cursor:pointer; width:auto;}label {margin:5px 0 2px 0; width:10em;}form p {padding:0.2em 0 0.2em 0;}form br {display:none;}#frmlogin {margin:0 10px 0 10px;}#frmlogin fieldset.button {text-align:right;}

2.3.8 phone.css

Um die Website für Smartphones anzeigen zu lassen, wird die Datei phone.css verlinkt. sDies geschieht über eine Abfrage nach dem Medium, Stichwort »Media Queries«, in derindex.php. Ist das Medium mindestens 320 und höchstens 480 Pixel breit, greift diesesSheet. Je nach Aufbau Ihrer Struktur können Sie hier eine Smartphone-gerechte Darstel-lung defi nieren. Das Sheet selbst ist, bis auf den Anfangskommentar, leer.

/* PHONE CSS*********************************************/

2.3.9 print.css

Die Datei print.css wird über die Dateis component.php verlinkt. Joomla bietet an, den Inhaltpin einer Druckansicht anzeigen zu lassen. Dies geschieht mit einem Klick auf das Drucki-con, dessen Ansicht man in den Beiträgen unter Optionen einstellen kann.

Über diese Datei ist es möglich, eine druckerfreundliche Ausgabe zu defi nieren. So kannstDu z. B. den Kontrast der Textfarbe zum Hintergrund erhöhen, um die Texte besser lesbarzu machen. Dabei wird der Hintergrund am besten weiß defi niert, um Druckertinte zusparen. Im Blank Template wird das Reset-Sheet reset.css in die Datei s print.css importiert. sDer weitere Aufbau ähnelt dann der der template.css, allerdings ohne den Ballast von Me-nüs, Modulen und andere Elementen.

60180-1 Templates Joomla 1.6_NEU_1.indd 3060180-1 Templates Joomla 1.6_NEU_1.indd 30 27.06.2012 18:01:1927.06.2012 18:01:19