Templates

Das Template ist einer der wichtigsten Bestandteile einer Website. Es sorgt für das Erscheinungsbild, das Design. Es macht neue Besucher neugierig und sorgt dafür, dass sie sich auf der Website umsehen. Ständige Nutzer Ihrer Website freuen sich ebenfalls über ein schönes und nützliches Design.

Denken Sie einfach mal an andere Produkte. Ein Auto benötigt einen guten Motor und gute Reifen, aber einer der wichtigsten Gründe, ein Auto zu kaufen, ist oft das Design. Selbst wenn das Design nicht der Hauptgrund ist, so ist es doch oft ein Auslöser, um über andere Gründe nachzudenken, die für einen Kauf sprechen. Wenn das Design gut ist, meinen viele, dass der Rest auch gut sein wird (vergleiche Abbildung 1 und Abbildung 2).

Car parked in Santa Cruz, California. Feel free to add notes.

Are you Cyclelicious?Bumper sticker car

Abbildung 1: Auto mit Aufklebern (Richardmasoner)

Ferrari 599GTBFerrari 599GTB

Abbildung 2: Rotes Auto (FotoSleuth)

Beide Autos haben bestimmte Zielgruppen. Sie sind ist ein Beispiel für unterschiedliche Ideen im Design.

Webdesign ist ein Handwerk. Es ist notwendig, Fertigkeiten in bestimmten Techniken wie HTML, CSS, JavaScript, PHP, Bildbearbeitungsprogrammen und vielen anderen mehr zu haben. Joomla! ist nur ein Werkzeug in einer prall gefüllten Werkzeugkiste.

Ein gutes Template kümmert sich nicht nur um Farben und Grafiken. Die Gestaltung und Positionierung der Inhalte ist ebenfalls sehr wichtig. Die Website muss benutzerfreundlich und verlässlich sein. Diese Herausforderung erinnert mich wieder an die beiden Autos.

Webdesign ist noch ein sehr junges Betätigungsfeld, und Webdesigner müssen sich mit niedriger Bandbreite, inkompatiblen Browsern, unerfahrenen Benutzern und vielen anderen Menschen auseinandersetzen, die in den Prozess der Erstellung einer "guten" Website involviert sind. Oftmals ist die Erstellung einer Joomla!-Website auch ein Prozess, bei dem jeder Beteiligte eine Menge lernt. Gutes Webdesign ist schwere Arbeit. :-)

Joomla! und Templates

Das Joomla! Core-Paket ist für seine Qualität und Schlichtheit bekannt. In Joomla! wird eine einzelne Seite durch die HTML-Ausgabe einer Komponente, mehrerer Module sowie der HTML-Ausgabe des Templates erzeugt. Jede Seite ist über einen eindeutigen URL erreichbar. Nehmen wir als Beispiel die Startseite. Die Inhaltskomponente erzeugt die HTML-Ausgabe für die Artikel in der Mitte (siehe Abbildung 3). Die Blöcke neben den Beiträgen sind unterschiedliche Module. Sie können die HTML-Ausgabe einer Komponente mit der HTML-Ausgabe beliebig vieler Module kombinieren. Sie können existierende Module auf mehreren Seiten anzeigen.

Joomla! 1.6 cocoate.com/node/6003/
Joomla! 2.5 cocoate.com/node/10310Template structure

Abbildung 3: Joomla!-Frontpage

Positionen

Sie müssen natürlich wissen, an welcher Stelle Sie die Module überhaupt anzeigen können. Für diesen Zweck beinhaltet ein Template sogenannte Positionen. Um die Positionen sehen zu können, müssen Sie die Vorschau der Modulpositionen einschalten (Erweiterungen → Templates → Optionen). Danach können Sie Ihre Website mit dem Parameter tp=1 aufrufen (http://localhost/index.php?tp=1). Jetzt sehen Sie die eingerahmten Modulpositionen und ihre Namen (siehe Abbildung 4). In Erweiterungen → Module können Sie die einzelnen Module diesen Positionen zuordnen. Wenn Sie ein Modul an unterschiedlichen Positionen benötigen, können Sie es kopieren. 

Joomla! 1.6 cocoate.com/node/6003/
Joomla! 2.5 cocoate.com/node/10310Template positions

Abbildung 4: Vorschau der Modulpositionen

Core-Templates

Joomla! wird mit drei Site- und zwei Administrator-Templates ausgeliefert. Eine Vorschau können Sie in Erweiterungen → Templates → Tab Templates (siehe Abbildung 5) sehen.

cocoate.com/node/6003Site Templates

Abbildung 5: Site-Templates

Das Atomic-Template zeigt, wie die einfachste Form eines Joomla!-Templates aussieht. In XXX LINK TODO werden wir dieses Template als Grundlage für ein eigenes Template benutzen. Das Beez5-Template ist die HTML 5-Version von Beez2. Auch für den Administratorbereich steht ein weiteres Template zur Auswahl (siehe Abbildung 6).

cocoate.com/node/6003Admininistrator Templates

Abbildung 6: Admin-Templates

Styles

Styles sind ein neues Feature in Joomla! 1.6. Sie bieten die Möglichkeit, unterschiedliche Versionen eines Template zu erzeugen und zu benutzen. Ein Template hat mindestens einen Style. In diesem Style können Sie vom Template abhängige Einstellungen vornehmen, beispielsweise die Farben verändern oder ein Logo hochladen. Sie können den Standard-Style Ihrer Webseite in Erweiterungen → Templates → Styles festlegen. Sie können zwischen Site- und Administrator-Styles durch das Setzen des Bereichsfilters umschalten. Das Standard-Template Beez2 bietet zwei vordefinierte Styles: default und Parks Site.

Sie können weitere Styles erzeugen, indem Sie sie kopieren. Jeder Style kann einem Menüeintrag zugeordnet werden. Wenn Sie beispielsweise einen grünen Hintergrund auf Ihrer Website haben wollen, wenn jemand auf Menüeintrag A klickt, und einen blauen Hintergrund bei einem Klick auf Menüeintrag B, dann können Sie die Styles entsprechend zuordnen (siehe Abbildung 7).

cocoate.com/node/6003Assign a style to a menu item

Abbildung 7: Zuordnung eines Styles zu einem Menüeintrag

Mehr über Templates finden Sie im Kapitel Arbeiten mit Templates.

Kommentare

XXX LINK TODO Gehört das da hin?

Sven

Oh, natürlich nicht. Hab's jetzt verlinkt :-)

Hallo Herr Graf,
ist meine erste Homepage die ich erstelle.
Habe das "Joomla-Bild" im Header über die Template-Einstellung mit einem Logo von uns ausgetauscht.
Nun hätte ich gerne, dass dieses verlinkt wird und immer zur Startseite zurückführt.
Was kann ich tun?

Vielen Dank und Grüße
Marcus

Naja, kommt jetzt ein bischen drauf an, wie das Logo eingebaut worden ist.

Als <img>-Tag muss es einfach nur in einen <a href="/"><img src="..."></a> eingebaut werden und der Link ist fertig.

Wenn es als Background Image per CSS eingebunden ist, ist das so direkt nicht möglich. Da kommt es auf die Umstände an, wie man es am geschicktesten löst.

Hallo Herr Graf, danke erst mal. Ich verwende das oben gezeigte Template beez_20. Und habe das Joomla Bild durch eines von mir ausgetauscht. Über die Template Einstellungen. Ich habe jetzt in der Index.php den unten markierten Satz eingebaut. Weiß nicht ob das die richtige Art war aber es funktioniert.

<div id="all">
   <div id="back">
     <div id="header">
       <div class="logoheader">
         <h1 id="logo">
Diesen Satz===>>><a href="index.php/homepage"><<===
         <?php if ($logo): ?>
           <img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($logo); ?>"  alt="<?php echo htmlspecialchars($templateparams->get('sitetitle'));?>" />
         <?php endif;?>
         <?php if (!$logo ): ?>
           <?php echo htmlspecialchars($templateparams->get('sitetitle'));?>
         <?php endif; ?>
         <span class="header1"><?php echo htmlspecialchars($templateparams->get('sitedescription'));?></span></h1></div><!-- end logoheader -->

Guten Tag

Ich habe in meinem Template-Ordner ein neues Template angelegt. Warum erscheint es nicht in Joomla? In 1.5 ging es doch automatisch, oder habe ich irgend etwas übersehen, vergessen, ...

Vielen Dank im Voraus!

Juliet

Servus,

ich bin Joomla Neuling, aber habe irgendwo gelesen das ab der V1.6 die Templates auch in die Datenbank eingetragen werden müssen, d.h. Du solltest das Template per Backend installieren und nicht nur auf den Webspace laden.

Güße,
Swen