Eigenes Drupal Theme erstellen (Drupal Template)

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:
tutorial-theme-layout.png

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

tutorial-theme-filestructure.png

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:

; $Id:$
name = Name deines Themes
description = Beschreibung deines Themes.
core = 6.x
engine = phptemplate

(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:

tutorial-theme-firebug.gif

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

body {
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", Verdana, Arial;
  font-size: 14px;
  line-height: 1.4em;
  color: #444;
}

h1, h2, h3, h4, h5 {
  font-family: Georgia;
  color: #892538;
  margin-top: 0;
  font-style:italic;
  font-weight:normal;
  line-height:1.3em;
}

h1 { font-size:34px; }
h2 { font-size:28px; }
h3 { font-size:24px; }

a {
  color: #FF6633;
  text-decoration: none;
}

#page {
  width: 990px;
  margin: auto;
}

#sidebar-left {
  float: left;
  width: 340px;
}

#main {
  float: left;
  width: 650px;
}

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.

tutorial-theme-firebug.gif

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:

#logo-title {
  width: 270px;
  float: left;
}

h1#site-name {
  margin: 0;
}

h1#site-name  a{
  display: block;
  text-indent: -9999px;
  width: 270px;
  height: 95px;
  background-image: url(img/logo.gif);
}

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:

#header-region #block-menu-primary-links {
  float: right;
}

#block-menu-primary-links li {
  display: block;
  float: left;
  height: 95px;
  line-height: 95px;
  padding: 0 1.25em;
  font-family: Georgia;
  font-style: italic;
  font-size: 21px;
  margin: 0;
}

#block-menu-primary-links li a {
  text-decoration: none;
  color: #6A6A6A;
}

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:

#header {
  height: 435px;
  background-image: url(img/header.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
}

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.

#container {
  position: relative;
  padding-top: 45px;
}

#breadcrumb {
  position: absolute;
  top: 0px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  font-style: italic;
}

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.

#sidebar-left .block {
  padding-left: 30px;
  font-style: italic;
  font-size: 11px;
}

#container {
  background-image: url(img/balken.gif);
  background-repeat: no-repeat;
}

Geschafft!

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

AnhangGröße
logo.gif3.71 KB
header.jpg135.54 KB

Kommentare

Danke für diese hilfreiche

Danke für diese hilfreiche Einführung. Welcome to the Jungle ;-)

Vielen Dank für dein gutest

Vielen Dank für dein gutest Tutorial !! hab zum ersten mal ein template zum laufen bekommen nur durch deine css datei !!!

wie bekomme ich das hintergrundbild nicht nur auch eine kleine fläche sondern überall hin, so wie es auf deiner seite ist ?

vielen dank, werde mich wohl in css einlesen müssen

gruss

mesut

Hallo mesut, danke für dein

Hallo mesut, danke für dein Lob.

Um ein Hintergrundbild so wie hier auf der Seite zu positionieren gibt es verschiedene Tricks. Hier ist es ein CSS Trick.

Zwei divs (ich schreibe das CSS als style Attribut damit es hier deutlich wird)

<div style="z-index: 1;">
  Der Seiteninhalt wird mit z-index vor das Bild gebracht
</div>
<div>
  <img src="pfad-zum-bild.jpg" style="position: fixed; top: 0; left: 0;" />
</div>

Klasse Tutorial. Bei mir

Klasse Tutorial. Bei mir funktioniert es so weit, aber wenn ich die Dateien unter sites/all/themes/meintheme erstellt habe, kommen folgende Fehlermeldungen oben auf der Seite mit der Theme-Auflistung:

* warning: Invalid argument supplied for foreach() in /mnt/web5/53/16/52109916/htdocs/drupal/includes/theme.inc on line 485.
* warning: Invalid argument supplied for foreach() in /mnt/web5/53/16/52109916/htdocs/drupal/includes/theme.inc on line 490.

Hast du ne Idee anhand dieser Fehlermeldungen, was ich falsch mache?

Gruß
Johannes

hallo, denke das es an den

hallo,
denke das es an den admin plugin liegt, hatte nach installation auch 2 fehlermeldungen.

darf ich eigentlich deine webseite mit diesen tutorial verlinken ?
weil so ein gutes !!!!!! tutorial sollte wirklich verbreitet werden.
Selbst ich der keine ahnung von CSS hat hat es zum laufen bekommen.
Kann zwar HTML (wer nicht ???) aber das es nur mit einer css rennt ist mir komplett neu.
Bei allen anderen tutorials braucht man mehrere php seiten, denke es waren 2.

aber da ich nun weiss das man css können muss werde ich mir deine !! css genauer anschauen und diese auch lernen und vereinfachen für mich.

kann man mit deiner css auch ein fluid template bauen ? das den gesamten bildbereich ausfüllt ?

sorry für mein gespame aber bin wirklich possitiv von deinen tut angetan.
ich hoffe das deine Firma gut läuft !!

gruss

mesut

Klar kannst du das Tutorial

Klar kannst du das Tutorial verlinken! Würde mich freuen.

Ein fluid Template geht relativ einfach. Du musst nur die width des divs mit der id="pagewrapper" auf 100% setzen.

@#4 hast du versucht den

@#4 hast du versucht den cache zu leeren (z.b. mit der funktion des admin menu's?). Oder wechsle auf die Seite admin/build/themes, das leert die theme-registry. Den Fehler hatte ich noch nie.

Hi. Das Tutorial ist super

Hi.
Das Tutorial ist super verständlich!
Allerdings kommt bei mir wenn ich auf Blöcke gehe nur eine leere Seite!

lg.
Grasco

Du nutzt Drupal 6,

Du nutzt Drupal 6, oder?

Komisch. Versuch mal in der .info Datei des Themes einige regions hinzuzufügen (http://drupal.org/node/171205), am besten die standard Regionen.

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

Das bringt auch nix. Aber

Das bringt auch nix. Aber wenn ich die Datei hochgeladen habe, kommen auch mehrere Warnungen.
Also ich habe jetzt unter dem Verzeichnis Blumenmeer (unter sites/all/themes) die dateien blumenmeer.info und style.css, die gefüllt sind wie oben und eben in der .info zusätzlich die regions.
Fehlen da vielleciht noch Dateien? Bei vielen Templates sind noch php Dateien.

LG Grasco

Das Verzeichnis muss

Das Verzeichnis muss "blumenmeer" heißen. Alles klein geschrieben. Du brauchst nur eine gleichnamige info Datei (blumenmeer.info) mit dem Inhalt wie oben beschrieben und eine style.css. Alle php Dateien sind optional. Wenn du z.B. die page.tpl.php anpassen willst, dann kopiere (kopieren!) die page.tpl.php aus dem verzeichnis /modules/system in deinen Theme Ordner (blumenmeer) und verändere sie dort. Die Dateien sind im Allgemeinen gut dokumentiert. Das funktioniert mit jeder (!) .tpl.php Datei so. Einfach in den Theme Ordner kopieren und dort verändern (nur nicht umbenennen). Sie wird automatisch erkannt.

Was muss ich denn darin

Was muss ich denn darin ändern?

Du musst gar nichts ändern,

Du musst gar nichts ändern, aber du kannst, falls du alleine mit CSS nicht weiterkommst. Drupal-Theming hat sozusagen verschiendene Schwierigkeitsgrade:
1. nur CSS
2. tpl.php Dateien anpassen
3. Theme Funktionen in der template.php Datei überschreiben
4. hooks in eigenen Modulen anpassen

also kriege es nicht hin, das

also kriege es nicht hin, das

Der Seiteninhalt wird mit z-index vor das Bild gebracht

habe es nun so probiert aber das gefällt mir überhaupt nicht

body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, Arial;
font-size: 20px;
line-height: 1.4em;
color: #444;
background-image: url(Desert.jpg);
background-repeat: no-repeat;

also meine mail adresse stimmt ! wenn du mir einen wink mit dem zaunpfahl geben könntest waere es echt nett.
denn ich weiss nicht wo ich deinen tip in die css einlegen kann.

gruss

mesut

Spitze die Beschreibung !!!

Spitze die Beschreibung !!! Endlich mal gut erklärt !

Hallo zusammen, danke für das

Hallo zusammen,

danke für das schöne Tutorial!

@ #4 Johannes:
Mir war der Fehler inzwischen auch schon untergekommen. Überprüfe bitte ob Du in Deiner *.info Umlaute verwendest. Dies ist glaube ich das häufigste Problem bei der Fehlermeldung.
Falls Du keine Umlaute in der *.info verwendet hast, würde ich überprüfen ob irgendwo noch alte *.info's von bereits gelöschten Themes rumliegen.

Beste Grüße,
Matthias

Das Problen mit s.u war bei

Das Problen mit s.u war bei mir auch. Lag wohl an dem Bindestrich im Themenamen. Nachdem ich das mal probiert hatte gings.

* warning: Invalid argument supplied for foreach() in /mnt/web5/53/16/52109916/htdocs/drupal/includes/theme.inc on line 485.
* warning: Invalid argument supplied for foreach() in /mnt/web5/53/16/52109916/htdocs/drupal/includes/theme.inc on line 490.

Hallo und danke für das

Hallo und danke für das schöne Tutorial. Können Sie mir Literatur zum Thema Theming empfehlen, wenn's sein muss auch in englischer Sprache? Ich hab bisher nichts wirklich Prickelndes gefunden...
Beste Grüße
Gregor Ganz

Vielen Dank zuerst einmal für

Vielen Dank zuerst einmal für das gute Tutorial. :-) Zwei Dinge möchte ich dazu noch loswerden:

1. Das Problem mit der Fehlermeldung "... /theme.inc on line 485." hatte ich auch. Gelöst hat es sich bei mir durch das Speichern der Dateien im UTF-8 Format. (Lässt sich z.B. mit Notepad++ erreichen.)

2. Ein anderes Problem habe ich allerdings noch. Vielleicht kennt ja jemand dafür eine Lösung.

Ich habe im Ordner "sites/all/themes/fm" die fm.info und die style.css angelegt. Wenn ich nun aber das Theme in der Administration auswähle, fehlt mir der komplette linke Seitenbereich inkl. den Blöcken Navigation und Benutzeranmeldung. Die Blöcke sind auch nicht irgendwie deaktiviert, so dass ich sie einschalten könnte. Sie sind schlicht und ergreifend nicht vorhanden ... Jemand ne Idee?

Beste Grüße
Oliver

Habe zum vorrigen Kommentar

Habe zum vorrigen Kommentar (#19 von Oliver) Klärungsbedarf. Kann hier jemand auf Olivers Kommentar eingehen? Ich habe nämlich gleiches Problem. THX

Eine Frage dazu. Sind die

Eine Frage dazu. Sind die Blöcke vielleicht unterhalb des Inhalts zu sehen? solange noch keine styles in der style.css vorhanden sind, werden die Blöcke nicht rechts und links sondern einfach unterhalb des Inhalts ausgegeben.

Hallo, erstmal vielen Dank

Hallo,

erstmal vielen Dank für das Tutorial - es hat mir gezeigt wie einfach Drupal eigentlich zu benutzen ist (sein kann? :))

ich habe nur noch das Problem, dass meine style.css nicht eingebunden wird..
ich habe alle Dateien erstellt und angepasst und das Theme im Backend aktiviert und als Standard defininert... ich habe es sogar schon mit enem "stylesheets[all][] = style.css" in der Info-Datei versucht.
Kann mir jemand sagen was ich noch falsch mache? :S Ist das Tutorial vielleicht nicht mit Drupal 7 kompatibel?

Vielen Dank!

Ich muss einen Rückzieher

Ich muss einen Rückzieher machen: es war nur ein serverseitiges Caching Problem :)

Auch von mir vielen Dank für

Auch von mir vielen Dank für das Tutorial. Wäre sehr nett, wenn es für Drupal 7 aufgearbeitet werden würde. Es haben sich doch sehr viele Einstellungen bzw. Bezeichnungen geändert. Oder gibt es schon ein "Drupal Tutorial: Eigenes Drupal 7 Theme erstellen"?

Ich habe vor ein paar Tagen

Ich habe vor ein paar Tagen mit Drupal 7 meinen Einstieg in die Welt des CMS gestartet. Heute wollte ich endlich beginnen, ein eigenes Theme zu bauen - die Königsdisziplin. Und hatte ein paar Probleme, die ich hier gerne samt Lösung erläutern möchte:

Diese wunderbare Anleitung hier basiert auf Drupal 6.x; wenn man nun mit Drupal 7 startet, funktioniert dieses Beispiel leider nicht auf Anhieb, weil die .info-Datei im Verzeichnis \\Server\web\drupal\sites\all\themes\meintheme\ unter Drupal 7 im Gegensatz zu Drupal 6 die folgende Zeile braucht, und sonst die style.css Datei schlichtweg ignoriert:

stylesheets[all][] = style.css

Dann bitte als Administrator in Drupal unter "Konfiguration/Leistung/Gesamten Chache löschen" auszuführen.
Dann klappt es auch mit diesem Beipiel :-)

Viele Grüße
Stefan

Hallo, das tutorial finde ich

Hallo,

das tutorial finde ich auch gut. aber ich komme nicht weiter an dem punkt, wo ich die css datei und die info datei erstellen soll, also schon bei schritt zwei.
hat jemand einen tipp, wie ich eine leere css und info datei erstelle?
vielen Dank
annett

Hallo annett, dazu gehst du

Hallo annett,

dazu gehst du einfach in deinen Theme Ordner und erstellst mit rechtsklick eine neue Datei: meintheme.info und eine Datei style.css

Was schaffst du denn da genau nicht?

Das habe ich gesucht - Super!

Das habe ich gesucht - Super! Funktioniert unter Drupal 7.x!

Hallo Super Tutorial an

Hallo

Super Tutorial an sich,
aber ich hab ne Frage, in welcher Datei editiere ich das Html?
Das versteh ich nicht?

Das kann man in den einzelnen

Das kann man in den einzelnen tpl Dateien bearbeiten.

Kommentar verfassen

Der Inhalt dieses Feldes wird nicht öffentlich gezeigt.