Drupal: Themes Teil 1

In Drupal werden Inhalt und Design konsequent voneinander getrennt. Während die eigentlichen Inhalte in der Datenbank liegen, sind Themes für das Design verantwortlich. Das ist ein riesiger Vorteil von CM-Systemen wie Drupal. Denn ein kompletter grafischer Relaunch der Seite ist dank der Themes im Handumdrehen und mit wenigen Mausklicks erledigt. In diesem und den nächsten Tutorials erfahrt ihr, wie ihr Themes effektiv nutzen könnt.

Wir empfehlen:
Drupal-Training

Themes kann man sich wie eine Schablone vorstellen, über die das Design der Seite gesteuert wird. Diese Schablone dient als Vorlage, in die die relevanten Inhalte geladen werden. Das Theme definiert dabei das HTML-Layout der Seite. An den Stellen, an denen später die Drupal-Funktionen hinzukommen sollen, stehen PHP-Aufrufe.

Diese Aufrufe werden, wenn die Webseite im Frontend generiert wird, durch die echten Inhalte ausgetauscht. Zunächst einmal solltet ihr euch einen Überblick über die bei euch vorhandenen Themes verschaffen. Ruft dazu den Menüpunkt Designs auf.

Mit dieser Seite werdet ihr es immer wieder zu tun bekommen, wenn ihr mit Themes arbeitet. Auf ihr sind alle installierten Themes aufgeführt. Die ganze Seite kommt dank der Screenshots recht übersichtlich daher. Zwei Themes sind in Drupal 7 standardmäßig mit dabei.

• Das Bartik-Theme ist das Standard-Frontend-Theme.
• Zudem gibt es mit Seven ein Standard-Theme für das Backend. (Wobei in diesem Tutorial der Fokus tatsächlich auf den Frontend-Themes liegen wird).

 

Eines der aktivierten Themes ist immer das Standard-Theme, das immer dann zu sehen ist, wenn die Seite aufgerufen wird. Alle anderen aktivierten Themes können von den angemeldeten Besuchern als persönliches Theme ausgewählt werden. Sämtliche nicht aktivierten Themes sind im Bereich Deaktivierte Themes aufgeführt.

 

Die Theme-Einstellungen

Um sich mit den Themes etwas besser vertraut zu machen, klickt ihr beim Bartik-Theme auf den Einstellungen-Link.

Die auf dieser Seite verfügbaren Optionen sind bei den jeweiligen Themes unterschiedlich. Unter anderem lässt sich Folgendes definieren:

• Farbschema
• Logo und Slogan
• Favicon, Menüs

 

Beim Bartik-Theme (übrigens nicht nur dort) lässt sich das Farbschema sehr komfortabel einstellen. Zunächst einmal gibt es da das allgemeine Farbauswahl-Feld mit vordefinierten Farbschemata.

 

Wird beispielsweise der Wert von Blaue Lagune in Eis verändert, ergibt sich – natürlich, nachdem die Änderungen gespeichert wurden – im Frontend ein völlig anderes Bild.

 

Neben diesen vordefinierten Schemata könnt ihr die Farben der einzelnen Elemente aber auch manuell anpassen. Dazu muss lediglich auf das gewünschte Farbfeld geklickt und dann der entsprechende Farbwert eingestellt werden.

Ein weiterer interessanter Bereich ist Anzeige ein-/ausschalten.

 

Denn hierüber könnt ihr explizit festlegen, welche Elemente im Frontend zu sehen sein sollen. Wollt ihr also beispielsweise kein Logo im Frontend angezeigt bekommen, deaktiviert ihr das vor Logo stehende Kontrollkästchen und übernehmt das mit Konfiguration speichern. Ein anschließender Blick ins Frontend liefert das gewünschte Ergebnis.

 

Ein Element, das gerne übersehen/nicht beachtet wird, ist das Favicon. Dieses sollte in jedem Fall aktiviert werden. Auch dafür gibt es in den Theme-Einstellungen unter Anzeige ein-/ausschalten einen entsprechenden Punkt.

Ebenso könnt ihr in diesem Bereich festlegen, ob das Haupt- und/oder das Sekundärmenü zu sehen sein soll. Um diese Funktionen zu testen, lasst ihr euch zunächst einmal das normale Bartik-Theme im Frontend anzeigen.

 

Sehr schön zu sehen sind hier das Favicon und das Hauptmenü. Deaktiviert nun innerhalb der Bartik-Einstellungen die zwei Kontrollkästchen vor Favicon und Hauptmenü. Nachdem die Einstellungen gespeichert wurden, liefert ein Blick ins Frontend der Seite folgendes Ergebnis:

Die Elemente sind jetzt verschwunden. Dieses Beispiel hat gezeigt, wie einfach sich die Seite auch mit Bordmitteln anpassen lässt.

 

Das eigene Logo und Favicon

Standardmäßig wird auf der Webseite das Drupal-Logo angezeigt. Das mag recht schick daherkommen, ist aber für den Live-Betrieb der Seite nur bedingt geeignet. Nun gibt es zwei Möglichkeiten, diesen Logo-Missstand zu beheben.

• Es wird überhaupt kein Logo angezeigt. (Wie das funktioniert, wurde bereits beschrieben).
• Man blendet sein persönliches Logo bzw. das der Firma ein.

Um ein eigenes Logo einzubinden, ruft ihr die Einstellungen des betreffenden Themes auf. Interessant ist der Bereich Logo-Einstellungen. Dort aktiviert man Standardlogo benutzen. Jetzt gibt es prinzipiell zwei Möglichkeiten:

• Sollte das Logo bereits auf dem Server liegen, braucht man nur den Pfad und den Dateinamen anzugeben.
• Soll das Logo zunächst noch auf den Server geladen werden, klickt man auf die Schaltfläche Datei auswählen und wählt das Logo aus. Mit Konfiguration speichern übernimmt man die Einstellungen. Anschließend ist der Dateiname des Logos im Feld Pfad zum eigenen Logo zu sehen.

Wird das Frontend der Seite aufgerufen, ist das neue Logo zu sehen.

 

Genauso funktioniert das dann übrigens auch mit dem Favicon. Ihr müsst also auch dabei dann das Kontrollkästchen Standard-Favicon benutzen deaktivieren. Anschließend kann das Favicon direkt auf den Server geladen werden.

Globale Einstellungen nutzen

Wenn ihr die Seite Design aufruft, wird euch im oberen Fensterbereich das Register Einstellungen auffallen. Die Optionen, die man bei Einstellungen festlegt, gelten für alle Themes gleichermaßen. Das, was bei den einzelnen Themes definiert wird, hat hingegen ausschließlich für das betreffende Theme Bedeutung.

Es ist somit also klar, dass für ein Theme an zwei verschiedenen Stellen Anpassungen gemacht werden können. Nämlich einmal in der globalen Konfiguration und dann auch noch in der Konfiguration des Themes selbst. Spätestens jetzt stellt sich unweigerlich die Frage, was eigentlich passiert, wenn man an den beiden Stellen unterschiedliche bzw. sich widersprechende Werte angibt?

Angenommen also, man deaktiviert bei der globalen Konfiguration das Logo, während man es beim Theme selbst anzeigen lässt. Drupal folgt dem Motto: Theme geht vor Global. Bei sich widersprechenden Einstellungen gehen also immer die Theme-eigenen vor.

Der Vorteil dieser Variante liegt auf der Hand. So könnt ihr in den globalen Einstellungen angeben, dass der Slogan der Webseite nicht zu sehen sein soll. Dazu deaktiviert ihr das Kontrollkästchen Slogan der Webseite.

Diese Einstellung wird jetzt standardmäßig für alle anderen Themes übernommen. Wenn ihr also ein beliebiges Theme öffnet, ist dort von Hause aus dieses Kontrollkästchen deaktiviert, der Slogan im Frontend also nicht sichtbar. Wird innerhalb der Theme-Einstellungen nun aber dieses Kontrollkästchen aktiviert, ist der Slogan in diesem Theme verfügbar.

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