Anzeige
Anzeige
UX & Design
Artikel merken

Tipps, Tricks und Ressourcen für Themes: Drupal: Layouts anpassen und entwickeln

Im dritten Teil unserer Drupalreihe dreht sich alles ums „Theming“. Drupal bietet hierzu, wie könnte es anders sein, eine Vielzahl von Möglichkeiten, das eigene Wunschlayout und Design umzusetzen. Hierfür kann man entweder auf eines der vielen frei verfügbaren Themes im Netz zurückgreifen, die bereits mitgelieferten Themes anpassen oder sein eigenes Theme entwickeln.

6 Min. Lesezeit
Anzeige
Anzeige

Theming in Drupal ist sehr flexibel. Drupal kennt neben speziellen Templates für das Gesamterscheinungsbild, für einzelne Artikel, Blöcke oder Benutzer auch „Regionen“ („Header“, „Footer“, „Left“, „Right“ usw.), in denen man über das Drupal-Backend bequem Inhalte platzieren kann. Die Anzahl der Templates, Regionen und Blöcke ist dabei zwar frei, unterliegt aber einigen Regeln.

Anzeige
Anzeige

Drupal kennt das Konzept der „Sub-Themes“. Damit lassen sich auf Basis eines Haupt-Themes weitere Unter-Themes anlegen. Ein Beispiel hierfür ist das Duo „Garland“ und „Minelli“. Minelli ist ein Sub-Theme von Garland und unterscheidet sich hauptsächlich darin, dass es ein Layout mit fester Breite („fixed“) verwendet – Garland hingegen mit flexibler Breite („liquid“). Ändert man nun in Garland die CSS-Styles, so werden diese Änderungen auch in Minelli verwendet, wenn dies gewünscht ist.

Wer sich einen genaueren Überblick über diese und weitere Möglichkeiten verschaffen will, dem seien die Showcase-Bereiche auf Drupal.org [1] und DrupalCenter.de [2] sowie das Drupal Museum [3] und Themegarden [4] ans Herz gelegt. Hier findet man eine interessante Auswahl an Designs.

Anzeige
Anzeige

Theming-Informationsquellen

Wer ins Theming mit Drupal einsteigt, für den ist der exzellente „Theme Developers Guide” auf Drupal.org zu empfehlen [5]. Hier gibt es einen sehr guten Einstieg, viele Verweise zu weiterführenden Artikeln und Code Snippets für den sofortigen Einsatz im eigenen Theme. Eine deutsche Übersetzung ist auf Drupalcenter.de zu finden [6].

Anzeige
Anzeige

Wem das noch nicht reicht, dem bietet das Buch „Drupal 5 Themes” aus dem Hause Packt Publishing noch mehr Informationen [7]. Es richtet sich vor allem an Einsteiger. Für Fortgeschrittene und Profis („Drupal Ninjas“ genannt) gibt es „Drupal Pro Development” von Apress [8]. Hier wird Theming zwar nur in einem Kapitel besprochen, dafür erfährt man aber eine Menge an technischen Grundlagen.

Beide Bücher werden für Drupal 6 neu aufgelegt, da das Theming hier weiter verbessert und vor allem vereinfacht wurde.

Anzeige
Anzeige

Themes für Drupal finden

Bis vor kurzer Zeit war es relativ einfach, Themes für Drupal zu finden. Die meisten wurden von der Community direkt auf Drupal.org zusammengetragen [9]. Während Drupal immer beliebter wird, wächst auch die Zahl der Themes. Eine Suche im Netz fördert einige Quellen für freie und kommerzielle Layouts zu Tage. Darunter sind auch bekannte Namen wie Template Monster [10].

Ist ein neues Theme gefunden, muss man es nur noch für die passende Drupal-Version herunterladen und entpacken. Themes sind wie Module versionsabhängig.

Ein neues Theme installieren

Themes werden in einen speziellen Ordner unterhalb des Ordners „sites/all/themes” abgelegt. Sollte der Ordner “themes” noch nicht vorhanden sein, so legen Sie ihn an.

Anzeige
Anzeige

Dem aufmerksamen Beobachter wird der „themes”-Ordner im Hauptverzeichnis von Drupal auffallen. Darin liegen die mit Drupal ausgelieferten Themes. Neue Themes sollten Sie nicht in diesem Ordner ablegen. Der Grund: Bei einem Update wird dieser Ordner ebenfalls ausgetauscht und die hinzugefügten Themes sind verloren. Der Ordner „sites“ ist von Updates hingegen nicht betroffen. Einstellungen, Module und Themes sind hier also sicher aufgehoben.

Nachdem Sie das Theme abgelegt haben, werfen Sie einen Blick in die „Readme.txt”-Datei des Themes und nehmen etwaige Einstellungen vor. Danach wechseln Sie als Administrator in den Verwaltungsbereich der Drupal-Installation, um das Theme zu aktivieren und abschließende Anpassungen vorzunehmen.

Die Themeverwaltung finden Sie unter: „Verwalten“, „Strukturierung“, „Themes“. Hier sehen Sie alle verfügbaren Themes und Sub-Themes in einer Liste. Man kann eine beliebige Anzahl von Themes aktivieren, aber nur eins als Standard definieren. Allerdings gibt es auch Module, die einen „Theme-Switcher“ für das Frontend bereitstellen oder spezielle Themes an Nutzerrollen knüpfen.

Anzeige
Anzeige

Unter dem Punkt „Konfigurieren” finden Sie globale Einstellungen, die für alle Themes gelten. Darunter sind Optionen für die Auswahl und Anzeige des Logos, des Favicons, des Website-Namens und der Suche. Daneben können Sie hier auch festlegen, für welche Inhalte Datum und Autor angezeigt werden sollen.

Neben den globalen Optionen bringt jedes Theme seine eigenen Optionen (siehe Tabs neben „Globale Einstellungen“) mit. Garland zum Beispiel erlaubt es, die Farben des Themes selbst zu bestimmen.

Ein eigenes Theme mit „ZEN“

Wer kein bestehendes Theme nutzen möchte, dem erlaubt Drupal ein eigenes Theme auf Basis von „PHPTemplate“ zu entwickeln. Wer nicht komplett bei Null anfangen will, der startet am besten mit dem „ZEN“-Theme [11]. ZEN ist speziell als Ausgangspunkt bei der Entwicklung eines Themes gedacht. Dafür bringt es eine Vielzahl von Hilfen und Optionen mit, die je nach Bedarf aktiviert werden können.

Anzeige
Anzeige

Laden Sie also zunächst das ZEN-Theme von Drupal.org herunter und installieren Sie es wie bereits beschrieben. In der Themeverwaltung finden Sie nun drei neue Themes: „ZEN“ ist das Haupt-Theme, „Starter Kit“ ist die Basis für ein Sub-Theme und „Classic“ ein weiteres Sub-Theme. In der „Readme.txt“ im ZEN-Theme-Verzeichnis wird beschrieben, wie Sie ihr eigenes Sub-Theme mit Hilfe des Starter Kit erstellen.

Während Sie diesen Anweisungen folgen, wird beschrieben, dass Sie die verschiedenen PHP-Templates für „Page“ (Layout der gesamten Site), „Node“ (ein einzelner Artikel) oder „Block“ (ein Inhaltsblock) in den Ordner des Sub-Themes kopieren können. Wenn Sie dies tun, können Sie ein vollkommen neues Layout entwickeln, das mit ZEN nicht viel gemein hat. Sie haben auch die Wahl zwischen einem „fixed“ oder „liquid“ Layout. Alle Templates, die nicht im Sub-Theme Ordner liegen und für die Darstellung der Site genutzt werden, kommen weiterhin aus dem ZEN-Ordner. Ein ähnliches Vererben und Übersteuern gilt auch für die CSS-Dateien.

Wenn Sie fertig sind, finden Sie nun Ihr eigenes Sub-Theme in der Theme-Übersicht. Auf dieser Basis können Sie Ihre Veränderungen vornehmen und profitieren dabei von den vielen Optionen und Goodies, die in ZEN bereits eingebaut sind.

Anzeige
Anzeige

Drupal-Theming-Werkzeuge

Wer ein Theme anpasst oder entwickelt, der freut sich über jede Hilfe, die er bekommen kann. Vor allem wenn es darum geht, mit CSS vorhandene Styles zu überschreiben oder herauszufinden, wie die Struktur der XHTML-Ausgabe aufgebaut ist.

Drupal bietet hierfür das „Devel”-Modul [12]. Dieses hilft enorm bei der Modulentwicklung und auch beim Theming, hier jedoch nur für Drupal 6. Wenn Sie Devel installieren, finden Sie auch das Modul „Theme Developer“. Um es zu nutzen, aktivieren Sie den Devel-Block in ihren Themes. Wenn Sie Theme Developer aktivieren, erscheint ein Infofenster. Wenn Sie nun ein Element der Seite anklicken, erkennen Sie, welches Template verwendet wird, welche Variablen zur Verfügung stehen und welche Theming-Funktion aufgerufen wird.

Wer nicht mit Drupal 6 arbeitet, für den gibt es auch die Alternativen „Firebug“ und „Web Developer Toolbar“ – jeweils für Firefox. Wer mit Opera entwickelt, dem sei „Dragonfly” ans Herz gelegt, das in Opera 9.5 fester Bestandteil des Browsers ist. Was diesen Lösungen fehlt, ist der Blick hinein in Drupal. Mit ihnen kann man nur Struktur und CSS untersuchen.

Anzeige
Anzeige

Fazit

Wie man sieht, hat Drupal für jeden etwas zu bieten. Egal ob Sie Farben, Layout oder Schriftarten eines mitgelieferten oder frei erhältlichen Themes anpassen wollen, ob Sie ein eigenes Theme auf Basis von PHPTemplate entwickeln oder gar eine andere Theming Engine wie Smarty einsetzen wollen: Alles das ist mit Drupal möglich und lässt Ihnen somit beinahe unbegrenzte Freiheit bei der Umsetzung Ihres Wunschdesigns.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige