Drupal: Themes Teil 2

Nachdem im ersten Teil dieser Themes-Tutorials bereits gezeigt wurde, was es prinzipiell mit Themes auf sich hat, wird nun weiter in diese Thematik eingestiegen. Im einfachsten Fall werdet ihr – um das Design eurer Seite anzupassen – auf vorgefertigte Themes zurückgreifen. Diese gibt es mittlerweile tatsächlich zuhauf. Angeboten werden kommerzielle und kostenlose Themes. In diesem Tutorial erfahrt ihr, woher ihr Themes bekommt und wie ihr diese installieren und anwenden könnt.

Wir empfehlen:
Drupal-Training

Zahlreiche Themes werden kostenlos angeboten. Zentrale Anlaufstelle für diese kostenlos verfügbaren Themes ist die Seite http://drupal.org/project/Themes. Bevor ihr ein Theme herunterladet, achtet unbedingt darauf, dass dieses auch für die richtige – also die von euch verwendete – Drupal-Version entwickelt wurde. Stellt die entsprechende Version im Feld Filter by compatibility ein.

 

Mit Search wird die Suche gestartet. Auf der ersten Seite der Trefferliste werden einige Themes angeboten, die als Basis für die Entwicklung eigener Themes herhalten können. (Mehr dazu dann übrigens im nächsten Tutorial). Bei den meisten angebotenen Paketen handelt es sich aber tatsächlich um ganz normale Themes.

Um zu testen, wie sich Themes in Drupal installieren lassen, ladet ihr euch ein beliebiges Theme herunter. (Ich gehe vom Professional Theme http://drupal.org/project/professional_theme aus). Wie bei den Modulen könnt ihr auch hier zwischen einem tar.gz –und zip-Archiv wählen.

 

Nach dem Download des Themes wird dieses nicht manuell entpackt. Ruft stattdessen Design>Neues Theme installieren auf. Über die Schaltfläche Datei auswählen kann das Archiv ausgewählt werden. Mit Installieren wird die Installation des Themes eingeleitet. Drupal installiert das neue Theme automatisch in das Verzeichnis sites/all/themes. Um das Theme zu aktivieren, klickt ihr nach erfolgreicher Installation auf den Link Enable newly added themes. Das führt euch auf die bekannte Theme-Übersichtsseite. Das neu installierte Theme ist im Bereich Deaktivierte Themes aufgeführt.

 

Ihr könnt es über den gleichnamigen Link Aktivieren und als Standard festlegen. Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Sollte das Theme nicht direkt zu sehen sein, überprüft, ob vielleicht noch ein anderes Theme aktiviert ist. Über den Einstellungen-Link kann das Theme anschließend konfiguriert werden. Welche Optionen hier letztendlich zur Verfügung stehen, hängt vom installierten Theme ab.

 

Auf die Details achten

Wenn ihr euch die Detail-Ansicht zu einem Theme auf der Seite http://drupal.org/project/themes anzeigen lasst, werden dort zahlreiche Informationen geliefert, die einen Blick wert sind.

Neben einer allgemeinen Beschreibung sind dort auch die im Theme definierten Features enthalten. Einen Blick solltet ihr dabei immer auf die vom Theme unterstützten Browser werfen. In jedem Fall wichtig ist aber die Information, unter welchen Drupal-Versionen das Theme einsetzbar ist. Denn ein für Drupal 6 entwickelt Theme lässt sich nicht in Drupal 7 installieren.

 

Mittlerweile gibt es zu sehr vielen Themes eine Live-Vorschau.

Darüber kann man sich einen guten Eindruck davon verschaffen, wie die Themes tatsächlich aussehen.

Achtet in jedem Fall auch auf den Bug-Bereich. Entscheidend ist hier – anders als vielleicht anzunehmen ist – nicht die reine Anzahl der Bugs. Interessant ist vielmehr, wie schnell und ob überhaupt die Bugs entfernt werden.

 

Werft außerdem einen Blick auf die unterstützte Theme-Version. Denn wie bereits erwähnt, müssen die Themes auch tatsächlich für die richtige Drupal-Version entwickelt worden sein. Zu erkennen ist das auf der Theme-Seite im Downloads-Bereich.

 

Versucht man trotzdem, ein Theme für eine andere Drupal-Version zu installieren, wird das mit einer Fehlermeldung quittiert.

Vorsicht ist außerdem bei solchen Themes geboten, die im Beta- oder Alpha-Status sind. Diese Themes beinhalten noch Fehler und sollten in aller Regel nicht in Produktivumgebungen eingesetzt werden.

Die folgende Liste liefert einen kleinen Überblick von Seiten, auf denen ihr Gratis-Themes bekommt.

http://www.siteground.com/drupal-hosting/drupal-themes.htm
http://drupal2u.com/

 

Und auch eine Auswahl kommerzieller Anbieter soll an dieser Stelle nicht fehlen. Dazu aber gleich der übliche Hinweis, dass das lediglich eine Auswahl darstellt, ohne wertend zu sein.

http://www.templatemonster.com/drupal-themes.php
http://www.osskins.com/
http://mydrupal.com/downloads

Noch ein Tipp, bevor ihr euch für den Kauf eines Themes entscheidet: Achtet unbedingt darauf, dass es eins Live-Demo gibt, ihr das Template also auf Herz und Nieren untersuchen könnt. Zusätzlich sollte eine entsprechende Photoshop-Datei beiliegen.

Diese bildet nämlich die Basis, wenn ihr beispielsweise die Farben von Hintergrundgrafiken oder Schaltflächen ändern wollt. Fehlt die PSD-Datei, lassen sich Änderungen ausschließlich über den HTML- und CSS-Code umsetzen. Dabei ist man dann in den Möglichkeiten sehr eingeschränkt.

Die Benutzer die Themes auswählen lassen

Es ist natürlich klar, dass das von euch gewählte Design der Seite nicht jedem Besucher gefallen wird. Da Drupal bei dem Design vollständig auf Themes setzt, kann man das Aussehen der Seite aber bekanntermaßen im Handumdrehen anpassen. Dazu braucht man einfach nur ein anderes Theme einzustellen.

Noch besser wäre es aber natürlich, wenn man die Auswahl des Themes gleich ganz den Seitenbesuchern überlässt. Keine Bange, Zugriff auf den Verwaltungsbereich muss den Besuchern nicht gewährt werden. Realisieren lässt sich eine solche Anwendung mittels eines sogenannten Theme-Wechslers.

Über ein Auswahlfeld lässt sich das gewünschte Theme auswählen. Parallel dazu gibt es auch noch die Möglichkeit, sich eine Vorschau möglicher Themes durch Anklicken der im rechten Fensterbereich untergebrachten Theme-Abbildung anzeigen zu lassen. (Das Modul, das hier vorgestellt wird, beherrscht "nur" die Variante über das Auswahlfeld. Die reicht aber in den meisten Fällen völlig aus).

 

Realisieren lässt sich eine solche Anwendung über das Modul Switchtheme, das von der Seite http://drupal.org/project/switchtheme heruntergeladen werden kann. Nach der Aktivierung des Moduls muss es konfiguriert werden. Ruft dazu Module auf und klickt bei Switchtheme auf Konfigurieren.

In diesem Dialogfenster passt man die Einträge für die einzelnen Themes an. Das, was in den Feldern steht, wird später auf der Webseite in dem Auswahlfeld angezeigt, über das sich die Themes einstellen lassen. Versucht sprechende Namen zu wählen. Gute Namen sind beispielsweise Rot/Hell, Düster o.Ä. Ihr solltet auf jeden Fall dafür sorgen, dass sich die Besucher etwas unter den Namen vorstellen können.

 

Mit Konfiguration speichern werden die Einstellungen übernommen. Über Struktur>Blöcke muss man nun nur noch dafür sorgen, dass das Modul an der richtigen Stelle angezeigt wird.

Weist Switch theme der gewünschten Region zu und bestätigt das mit Blöcke speichern. Ein Blick ins Frontend liefert das gewünschte Ergebnis.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training