Tutorial: Erstellen eines eigenen Drupal Themes

Ein eigenes Theme zu erstellen ist sicherlich eine der größten Herausforderungen für einen Drupal-Einsteiger. HTML und CSS sind für sich schon, zumindest auf den ersten Blick, »komplexe Monster«. Wie bei jedem Content-Management-System, kommt bei der Erstellung eines Drupal-Themes noch dazu, dass es schon standardmäßig CSS- und HTML-Code gibt, der entweder angepasst oder überschrieben werden muss.

Hier ein Versuch: Vom Photoshop-Layout zum funktionierenden Theme-Gerüst, in wenigen Minuten.

Die schwierigsten Entscheidungen auf dem Weg zum eigenen Theme haben wenig mit dem Theming selbst zu tun. Es geht um die Frage, mit welchen Funktionen oder Modulen setze ich bestimmte Elemente in meinem Layout um. Diese Entscheidungen setzen die meiste Erfahrung mit Drupal voraus. Aber dazu später mehr.

Der erste Schritt: Das Layout

Um die Sache zu vereinfachen, sollte beim Design des Themes in Photoshop darauf geachtet werden, unnötigen »Schnickschnack« wie Hintergrundgrafiken, Trennlinien, usw., wegzulassen. Möglich ist alles, aber alles kostet Zeit. Und wie sagt Mr. Wolf so treffend in Pulp-Fiction:

»If I'm curt with you it's because time is a factor. I think fast, I talk fast and I need you guys to act fast if you wanna get out of this.« ,-)

Hier unser Layout zum üben:

Der zweite Schritt: Erstellen der nötigen Theme-Dateien

Um das Layout in ein funktionierendes Theme zu verwandeln, erstellen wir zunächst ein nacktes Drupal-Theme, komplett ohne Styling. Das ist einfacher getan als gesagt, denn wie mir beim Schreiben gerade auffällt, dauert es zehnmal länger, diese Arbeitschritte in verständliche Worte zu fassen, als sie durchzuführen.

Die benötigten Dateien für unser neues Theme erstellen wir direkt auf dem Server, im Verzeichnis sites/all/themes.

ACHTUNG: In deinem Drupal Verzeichnis findest du bereits ein Verzeichnis /themes. Dieses Verzeichnis enthält die Drupal-Core Themes und sollte nicht angerührt werden! Wie auch für die Module, ist der richtige Ort für eigene Thems das Verzeichnis sites/all/. Hier erstellst du einfach 2 neue Ordner modules und themes.

In dem Ordner sites/all/themes erstellst du nun einen weiteren Ordner mit dem Namen deines neuen Themes. In unserem Fall nennen wir das Theme "fm" (für forward-media). Der neue Ordner heißt bei uns deshalb sites/all/themes/fm.

Alles was nun noch nötig ist, um ein funktionierendes Theme (noch ohne Styling) zu erstellen, sind 2 Dateien.

• eine leere Text-Datei namens style.css
• eine Text-Datei mit dem Namen des Themes und der Datei-Endung .info, in unserem Fall also fm.info

Die Datei mit der Endung .info enthält grundlegende Informationen über unser Theme, wie Name, Beschreibung, Drupal-Core Version und Theme-Engine. Für den Anfang reicht es aus, eine Datei mit folgendem Inhalt zu erstellen:

(Weitere Informationen über den Aufbau der .info Datei findest du hier)

Fertig! Nun kannst du dich als Administrator (user/1) bei deiner Drupal-Seite einloggen und das neue Theme aktivieren.

Naja, fast fertig ;-), denn das Theme kommt ohne CSS Informationen noch etwas »unstrukturiert« daher. Ausgegeben wird einfach der Inhalt der standard Drupal-Core Template Dateien. Wie man diese Dateien findet und gegebenenfalls überschreibt, erkläre ich später. Für jetzt reicht es aus, einige Zeilen in unsere leere Datei namens style.css einzufügen, um unserem Layout näher zu kommen.

Der dritte Schritt: Umsetzen des Grundrasters

An dieser Stelle kommt eines der Werkzeuge ins Spiel, ohne das ich mir Drupal-Theming nicht vorstellen kann. Firebug, das Entwickler Plugin für den Firefox.

Ein Rechtsklick in Firefox mit installiertem Firebug Plugin bietet uns die Option "Element untersuchen". Hier kann man die gesamte DOM-Struktur mit den dazugehörigen CSS Informationen untersuchen. Für unser Theme sieht die HTML-Struktur wie folgt aus:

Tipp: Ich empfehle die Verwendung des Drupal Moduls Administration menu. Damit behält man immer den Überblick im Backend.

Um die Ausgaben unserem Layout anzupassen definieren wir nun folgende Styles in der Datei style.css:

• Wir setzten margin und padding des body-Tags auf 0 (dies ist hilfreich um Abstände zu entfernen, die viele Browser standardmäßig setzen).
• Wir definieren das Styling für unsere Links und Überschriften
• Wir setzen eine Breite von 990px für das <div> mit der id="page", sowie einen automatischen Außenabstand margin:auto für die Zentrierung des gesamten Layouts.
• Eine Breite von 340px für das <div> mit der id="sidebar-left", sowie Eine Breite von 650px für das <div> mit der id="main". Mit float:left teilen wir dem Browser mit die sidebar-left und main nebeneinander, anstatt untereinander anzuordnen.

Inhalt der Datei style.css

Der vierte Schritt: Unser Header Bereich

Weiter oben hatte ich von Entscheidungen gesprochen, die etwas Erfahrung mit Drupal voraussetzen. Eine solche Entscheidung ist nun, wie wir unserer forward-media.de Hauptmenü ausgeben möchten. Wir wollen hierfür die standard "Primary Links" von Drupal verwenden. Allerdings wird das <div> mit der id="navigation", wie man mit Firebug sieht, nicht wie in unserem Layout im Header-Bereich ausgegeben, sondern unterhalb des Headers.

Eine Möglichkeit wäre, die entsprechende Template-Datei zu verändern. Dazu würden wir die Drupal Core Datei /modules/system/page.tpl.php in unser Theme-Verzeichnis kopieren und umschreiben, also in diesem Fall die Navigation an der gewünschten Stelle ausgeben und danach stylen.

Wir entscheiden uns aber hier für einen anderen Weg. Auf der Block Konfigurations-Seite für unser Theme admin/build/block/list/fm verschieben wir den inaktiven Block "Primary links" in den Kopfbereich. In der Konfiguration für diesen Block setzen wir den Blocktitel auf <none> um nur die Links anzuzeigen. Um die standard "Primary Links" zu verstecken deaktivieren wir auf der Seite admin/build/themes/settings alle Optionen außer "Site name" und "Shortcut icon".

Nun sind alle Elemente an Ihrem Platz und wir können mit dem Styling beginnen.

Wir ersetzen den Namen der Seite durch unser Logo. Das entsprechende Bild speichern wir als GIF in einem Unterordner namens "img" in unserem Theme-Verzeichnis (Die verwendeten Bilder logo.gif und header.jpg findest du zum Üben unten im Anhnag dieses Beitrags). Das entsprechende HTML-Element <h1 id="site-name"> lässt sich mit Firebug schnell identifizieren:

Um das Hauptmenü neben dem Logo anzuzeigen, lassen wir die Header-Region mit float: right rechts "fließen". Um die Hauptnavigation im Block mit der id="block-menu-primary-links" unserem Layout anzupassen sind nur wenige Zeilen CSS nötig:

Unser Headerbild setzen wir vorerst quick-and-dirty als Hintergrundbild in den Header. Das entsprechende Bild speichern wir als JPG in einem Unterordner namens "img" in unserem Theme-Verzeichnis. Später werden wir die Ausgabe durch ein eigenes Modul als Block im Header, wie bei der Hauptnavigation steuern:

Der letzte Schritt: Breadcrumb und Linke Spalte

Unser Theme besteht nur aus einer CSS-Datei mit weniger als 100 Zeilen CSS und sieht unserem Anfangs-Layout schon verblüffend ähnlich.

In unserem Layout befindet zwischen Header-Bereich und Inhalt ein Abstand von 45px, in dem unsere Breadcrumb Navigation angezeigt werden soll. Dies erledigen wir mit einem kleinen Trick. Durch die Definition position: relative für das <div> mit der id="container" können wir weiter unten das <div> mit der id="breadcrumb" absolut zu seinem übergeordneten Element ausrichten.

Als letztes fügen wir noch den Abstand und den Balken der in unserem Layout für die linke Spalte vorgesehen ist hinzu. Dazu erweitern wir die Definition für #container um ein Hintergrundbild.

Geschafft!

Wir haben unser Layout in wenigen Arbeitsschritten und weniger als 100 Zeilen CSS in ein funktionierendes Drupal-Theme verwandelt.

Anhang	Größe
logo.gif	3.71 KB
header.jpg	135.54 KB