10.5 Erstellen eines eigenen Themes in Drupal

Der erste Schritt bei der Erstellung eines eigenen Themes ist der schwerste. Wo soll man anfangen? Wie schon angesprochen, muss man beachten, dass ein Drupal-Theme oft für Frontend und Backend eingesetzt wird, also die Anzeige der Reiter-Menüs sowie der tabellarischen Übersichten für Module, Themes, Blöcke enthalten muss. Wie Sie ein separates Verwaltungs-Theme konfigurieren, erfahren Sie in Abschnitt 7.12 Verwaltungs-Theme.

Eine Möglichkeit ist, ein bestehendes Theme abzuändern. Insbesondere dann, wenn man lediglich Farben, Titelbilder oder Logos usw. ändern möchte, empfiehlt sich diese Variante. Möchte man hingegen Drupal ein ganz eigenes Gewand verpassen, empfiehlt es sich, entweder bei Null anzufangen oder ein Theme zu verwenden, das von vornherein darauf ausgelegt ist, angepasst zu werden. Dafür ist vor allem das Zen-Theme⁷ geeignet, da der Quelltext komplett kommentiert ist.

HINWEIS

Wenn Sie bereits mit dem CSS-Framework YAML von Dirk Jesse vertraut sind, dann

sollten Sie sich unbedingt das Projekt YAML für Drupal von Alexander Hass einmal

anschauen.

• YAML allgemein: http://yaml.de/

• YAML für Drupal: http://www.yaml-fuer-drupal.de

10.5.1 Ein Drupal-Theme „von Null an“

Mit Drupal 6 stehen Werkzeuge zur Verfügung, die das Erstellen von eigenen Themes extrem erleichtern.

10.5.2 Das Modul Devel: Firebug für Drupal-Themer

Das wichtigste dieser Werkzeuge ist das Devel-Modul mit dem mitgelieferten Theme developer-Modul⁸ (Beschreibung siehe Kapitel 13). Positionieren Sie den Development-Block in der rechten Seitenleiste (Abbildung 10.4).

Abbildung 10.4: Platzierung des Development-Blocks

10.5.3 Start in drei Schritten

In drei Schritten erstellen Sie ein eigenes Theme, das Sie über die Oberfläche von Drupal aktivieren können. Für Ihr eigenes Theme ist lediglich eine themename.info-Datei nötig.

Schritt 1

Erstellen Sie einen neuen Ordner mit dem Namen neuestheme für Ihr Theme unter sites/all/themes

Schritt 2

Erstellen Sie eine neue Datei mit dem Namen neuestheme.info mit dem Inhalt wie in Listing 10.5 im neuen Verzeichnis sites/all/themes/neuestheme:

; $Id:$

name = Neues Theme

description = Unser neues Drupal 6 Theme.

core = 6.x

engine = phptemplate

Listing 10.5: Inhalt der Datei neuestheme.info

Schritt 3

Aktivieren Sie Ihr neues Theme auf der Theme-Administrationsseite (Abbildung 10.5).

Abbildung 10.5: Aktivieren des neuen Themes

Drei Schritte waren genug, und Sie haben ein eigenes Theme erstellt. Zugegeben, das Design entspricht sicherlich noch nicht Ihren Erwartungen, aber die nächsten Schritte schaffen schnell Abhilfe.

10.5.4 Die Website im neuen Theme

Wechseln Sie in Ihrem neuen Theme zur Block-Administrationsseite und überprüfen Sie, ob die Blockeinstellungen, die wir zuvor in Garland vorgenommen haben, für das neue Theme übernommen worden sind.

Aktivieren Sie nun das Theme Developer-Modul durch einen Klick auf den Link Enable Theme developer im Development-Block.

In der linken unteren Ecke sehen Sie nun eine Checkbox mit dem Namen Themer info.

Abbildung 10.6: Aktivierte „Themer info“-Checkbox

Durch das Ankreuzen der Checkbox Themer info stehen Ihnen detaillierte Informationen über Ihr neues Theme zur Verfügung. Oben rechts erscheint eine Infobox, die uns mitteilt, dass wir durch einen Klick auf ein Element die zugehörigen Template-Dateien bzw. Theme-Funktionen angezeigt bekommen.

10.5.5 Welche Datei ist für was verantwortlich?

Zunächst wollen wir wissen, welche Template-Datei für die Ausgabe unseres Themes verantwortlich ist. Wir klicken auf ein beliebiges Element, z.B. auf den Link Home unterhalb des Seitentitels Drupal (Abbildung 10.7). 

Abbildung 10.7: Info zur Breadcrumb-Navigation durch Klick auf den Link „Home“

Im Fenster oben rechts erscheint nun die Information zu dem eben angeklickten Element. Die Funktion, die für die Ausgabe der Breadcrumb-Navigation zuständig ist, theme_breadcrumb(), wird eingeblendet. Für uns interessant ist aber zunächst die Zeile darüber. Hier wird die „zuständige“ Template-Datei angezeigt. In unserem Fall ist das die Datei page.tpl.php.

Aber woher nimmt Drupal diese Datei?

Wir haben doch noch keine Datei mit diesem Namen in unserem Theme!

Drupal nutzt eine Default-Datei, und ein einfacher Klick auf den Dateinamen in der Themer info-Anzeige verrät uns, wo wir diese Datei finden (Abbildung 10.8).

Abbildung 10.8: Info zur verwendeten page.tpl.php

Die Themer info-Anzeige gibt an, dass die page.tpl.php-Datei im Verzeichnis modules/system/page.tpl.php zu finden ist. Für das Anpassen der Anzeige ist es zunächst aber gar nicht nötig, diese Datei zu überschreiben. Die obige Erklärung dient an dieser Stelle dazu, das Prinzip zu beschreiben, nach dem Drupal immer vorgeht.

Drupal sucht zunächst im aktuellen Theme-Verzeichnis nach entsprechenden Template-Dateien oder Theme-Funktionen, die wir eventuell in der template.php-Datei überschrieben haben. Wenn dort nichts Entsprechendes gefunden wird, nimmt Drupal die im Drupal-Core enthaltenen Standard-Dateien. Und das Theme Developer-Modul informiert uns darüber, wo diese Dateien zu finden sind.

10.5.6 Die HTML-Struktur der Seite

Wie kommen wir nun mit unserem Theme weiter? Zuerst deaktivieren wir das Theme Developer-Modul durch einen Klick auf den Link Disable Theme developer im Development-Block. Dieser Schritt ist nötig, weil das Theme Developer-Modul den Quelltext leicht umschreibt.

Ein Blick mit der Firebug-Funktion Inspect Element in den Quelltext unserer Anzeige im Browser lässt schnell erkennen, warum unser Theme – nennen wir es mal – „unbefriedigend“ aussieht.

Wie im rechten Teil der Firebug-Anzeige zu erkennen ist, wird noch keine CSS-Datei für die wichtigsten Elemente unserer Seite wie <body> oder <div id="header"> verwendet (Abbildung 10.9).

Abbildung 10.9: Das Theme in der Ansicht in Firebug

Das werden wir jetzt ändern! Um unser Theme voranzubringen, müssen wir es stylen.

10.5.7 Eine style.css für Ihr neues Theme

Drupal sucht, wenn nicht anders in der themename.info-Datei vermerkt, nach einer Datei namens style.css. Diese Datei (sites/all/themes/neuestheme/style.css) legen wir nun mit folgendem Inhalt in unserem Theme-Verzeichnis an:

body {

background-color:#F3F3F3;

color:#666666;

font-family:Arial,"Trebuchet MS",Verdana;

font-size:70%;

margin:0;

padding:0;

}

#page {

background-color:#FFFFFF;

border:15px solid #FFFFFF;

margin:auto;

width:960px;

}

/* Sidebars & Main-Content Bereich nebeneinander anordnen (float) */

#sidebar-left,

#main,

#sidebar-right {

float: left;

margin-right: 1%;

}

/* Sidebars auf 20% Breite setzen */

#sidebar-right,

#sidebar-left {

width: 20%;

}

/* wenn zwei Sidebars sichtbar sind, Main-Content auf 56% setzen */

body.two-sidebars #main {

width: 56%;

}

/* wenn nur ein Sidebar sichtbar ist, Main-Content auf 76% setzen */

body.one-sidebar #main {

width: 76%;

}

Listing 10.6: style.css

Wir bedienen uns der Struktur der Standard page.tpl.php und nutzen lediglich CSS-Informationen, um die Anzeige unseren Wünschen anzupassen. Dabei nutzen wir auch die PHPTemplate-Logik, die dem Body-Tag dynamisch Klassen zuweist (z.B. two-sidebars oder one-sidebar, je nachdem, ob eine oder beide Sidebars angezeigt werden).

Wenn Sie nun einen Reload der Seite in Ihrem Browser machen, hat sich die Anzeige wie folgt verändert (Abbildung 10.10):

TIPP

Machen Sie einen „echten Reload“ mit gehaltener STRG- oder SHIFT-Taste, um sicherzugehen, dass die neuen CSS-Informationen geladen werden. Bei einem „normalen“ Reload kann es sein, dass die veralteten Daten des Browser-Caches übernommen werden.

Abbildung 10.10: Erste Erfolge beim Stylen des neuen Themes

10.5.8 Den Kopfbereich für das Theme ändern

Im folgenden Beispiel fügen Sie ein neues HTMLElement in die page.tpl.php ein. Wir kopieren dazu die Datei, wie weiter oben beschrieben, aus dem Standard-Verzeichnis (modules/system) in unser Theme-Verzeichnis (sites/all/themes/neuestheme) und fügen ein <div>-Tag mit einer passenden ID ein (Listing 10.7).

[Ausschnitt …]

</div> <!-- /navigation um die Zeile 139 -->

<!-- ###Dies wird unser Header-Bild### -->

<div id="headerimage"></div>

<?php if (!empty($left)): ?>

<div id="sidebar-left" class="column sidebar">

<?php print $left; ?>

</div> <!-- /sidebar-left -->

<?php endif; ?>

[Ausschnitt …]

Listing 10.7: page.tpl.php

In der Datei style.css fügen wir folgende Information hinzu:

#headerimage {

background-color:#FF9933;

width: 100%;

height: 100px;

}

Nach einem weiteren Reload sieht unsere Seite schon so aus wie in Abbildung 10.11. Unter Umständen müssen Sie den Cache von Drupal löschen.

Abbildung 10.11: Einfügen des Header-Bildes

Um in diesem Bereich jetzt noch ein Bild anzuzeigen, ist lediglich die Angabe des Attributs background-image in der Datei style.css nötig.

Innerhalb von wenigen Schritten haben wir nun unser Theme von „Null“ ein ganzes Stück weit in Richtung Four Seasons gebracht. Grundsätzlich sind die weiteren Anpassungen nicht Drupal-spezifisch, weshalb ich an dieser Stelle auf Literatur zum Thema CSS im Allgemeinen verweisen möchte.

Die Standard Template-Dateien, die Sie mithilfe des Theme Developer-Moduls im Drupal-Core finden, sind in aller Regel sehr gut dokumentiert. Sie können diese Template-Dateien theoretisch auch komplett um- oder neu schreiben, je nach Ihren Anforderungen und Kenntnissen.

Genauso, wie wir im vorherigen Beispiel die Datei page.tpl.php gefunden, kopiert und verändert haben, funktioniert das auch mit anderen Template-Dateien. Mit den Regeln aus Abschnitt 10.3 Die Dateien eines typischen Drupal-Themes im Einzelnen kann man alleine durch das gezielte Verändern von .css- und .tpl.php-Dateien eine Menge erreichen.

---

Bewertungen: Select ratingSchlechtOkayGutSuperRichtig Klasse

Ihre Bewertung: Nichts Durchschnitt: 4.4 (5 Stimmen)