Drupal 7 (Teil 33): Themes (4)

Transkript

1 Web >> Drupal Drupal 7 (Teil 33): Themes (4) Autor: daniel_koch Inhalt: Die ersten Schritte hin zum eigenen Drupal-Theme wurden bereits gemacht. Jetzt geht es weiter mit der Erstellung des Themes. Im Fokus dieses Tutorials steht dabei zunächst weiter die info-datei. Denn über diese werden beispielsweise auch die notwendigen CSS-Dateien und die im Theme verfügbaren Regionen definiert. Anschließend erfahrt ihr, wie sich das Layout der Seite temporär mittels Firebug anpassen lässt.

2 Bevor weitere Dinge am Theme geändert werden, könnt ihr es im Backend bereits als Standard-Theme einstellen. Ruft dazu Design auf und klickt bei eurem Theme auf den Link Aktivieren und als Standard festlegen. Jetzt können die nächsten Schritte unternommen werden. Nachdem die allgemeinen Informationen zum Theme über die Kopfdaten der info-datei angegeben wurden, geht es mit der Definition der zu verwendenden Stylesheet-Dateien weiter. ; Subtheme modular stylesheets. stylesheets[all][] = css/html-elements.css stylesheets[all][] = css/page.css stylesheets[all][] = css/fields.css stylesheets[all][] = css/nodes.css stylesheets[all][] = css/blocks.css stylesheets[all][] = css/comments.css stylesheets[all][] = css/navigation.css stylesheets[all][] = css/views-styles.css stylesheets[all][] = css/custom.css 2

3 Die Pfadangaben müssen dabei jeweils relativ zum Theme-Verzeichnis angegeben werden. Ihr findet die aufgeführten CSS-Dateien im css-verzeichnis von psdtutorials. Dort solltet ihr dann auch die CSS-Dateien hinterlegen, die ihr zusätzlich einfügen wollt. Achtet beim Einbinden der CSS-Dateien auch auf deren Reihenfolge. Denn das Besondere an CSS ist nun mal die Kaskadierung, also die Vererbung einer Eigenschaft von einem auf ein anderes Element. Dabei überschreibt die letzte Definition für ein Element immer die vorherigen. Über [all] wird festgelegt, dass das Stylesheets für alle Ausgabemedien gleichermaßen gilt. stylesheets[all][] = css/custom.css Alternativ dazu könntet ihr auch noch spezielle Stylesheets für den Ausdruck usw. definieren. stylesheets[print][] = css/print.css Weiter geht es mit dem Regionen-Bereich. ; The regions defined in the page.tpl.php file. The name in brackets is the ; name of the variable. The text after the = sign is the short description ; you see on the block configuration page. regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[content] = Main Content regions[highlighted] = Highlighted regions[leaderboard] = Leaderboard regions[header] = Header regions[secondary_content] = Secondary regions[tertiary_content] = Tertiary regions[footer] = Footer regions[help] = Help regions[page_top] = Page top regions[page_bottom] = Page bottom Was es mit den Regionen auf sich hat, wisst ihr natürlich längst. Innerhalb dieser Regionen könnt ihr Blöcke platzieren. 3

4 Wenn ihr die Einträge innerhalb des regions-bereichs eurer info-datei mit dem Auswahlfeld unter Struktur>Blöcke vergleicht, wird deutlich, was in der infodatei geschieht. Hier werden also die Regionen definiert, die später im Auswahlfeld zur Verfügung stehen. Die Definition der Regionen folgt dabei immer demselben Prinzip. regions[page_bottom] = Page bottom Innerhalb der eckigen Klammern steht der eigentliche Variablenname für die Region. Das, was im Backend zu sehen ist, wird nach dem Gleichheitszeichen notiert. 4

5 Hilfreich ist es, wenn man sich einmal die für das Theme verfügbaren und definierten Regionen anzeigen lässt. Ruft dazu Struktur>Blöcke auf und klickt auf den Link Block-Regionen (psdtutorials) veranschaulichen. 5

6 Achtet darauf, eurer Theme zuvor als Standard einzurichten. Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis. 6

7 So sieht man direkt, welche Regionen innerhalb des Themes tatsächlich angeboten werden. Diese Aufteilung lässt sich - zumindest, wenn man ein Basis-Theme verwendet - in aller Regel sehr einfach anpassen. In den Basis-Themes gibt es dafür fast immer eine ausführliche Dokumentation. Wie sich eine solche Anpassung im Genesis-Theme umsetzen lässt, wird hier beschrieben. Verantwortlich für die Aufteilung ist die CSS-Datei layout.css, die im Verzeichnis sites/all/themes/genesis/css liegt. Hier ein Auszug dieser Datei: /* Standard #genesis-1a #genesis-1a #genesis-1a #genesis-1a #genesis-1a /* Standard #genesis-1b #genesis-1b #genesis-1b #genesis-1b #genesis-1b /* Standard #genesis-1c #genesis-1c #genesis-1c #genesis-1c #genesis-1c 3 column, em based widths. */.two-sidebars.content-inner{margin:0 22em;}.sidebar-first.content-inner{margin-left:22em;}.sidebar-second.content-inner{margin-right:22em;} #sidebar-first{width:20em;margin-left:-100%;} #sidebar-second{width:20em;margin-left:-20em;} 3 column, % based widths. */.two-sidebars.content-inner{margin: %;}.sidebar-first.content-inner{margin-left:25.25%;}.sidebar-second.content-inner{margin-right:25.25%;} #sidebar-first{width:24.25%;margin-left:-100%;} #sidebar-second{width:24.25%;margin-left:-24.25%;} 3 column, px based widths (default). */.two-sidebars.content-inner{margin:0 260px;}.sidebar-first.content-inner{margin-left:260px;}.sidebar-second.content-inner{margin-right:260px;} #sidebar-first{width:240px;margin-left:-100%;} #sidebar-second{width:240px;margin-left:-240px;} Es handelt sich um verschiedene Layoutdefinitionen. Werft zunächst einen Blick auf #genesis-1a. Das ist eine typische Aufteilung für ein Drupal-Theme. Die Seite besitzt einen Hauptbereich und jeweils einen Seitenbereich links und rechts. Die Breite der ersten Spalte ist auf 22em festgelegt. Innerhalb von #genesis-1a werden also em-werte verwendet. Vorteil dieser Variante: Vergrößert sich die Schriftgröße, werden auch automatisch die Spaltengrößen angepasst. Sehr schön zu erkennen ist das übrigens auch an den jeweiligen Kommentaren. /* Standard 3 column, em based widths. */ Das Besondere an einem Basis-Theme wie Genesis ist nun aber dessen Flexibilität. Denn man muss eben nicht die em-variante wählen. Deutlich wird das anhand des Kommentars, der die #genesis-1b -Definitionen einleitet. /* Standard 3 column, % based widths. */ Es ist also offensichtlich auch eine prozentuale Variante möglich. Und zu guter Letzt gibt es auch noch eine Pixelversion. /* Standard 3 column, px based widths (default). */ 7

8 An dieser Stelle kommt der Firebug ins Spiel. Denn damit kann man sich die Auswirkungen der Definitionen direkt anzeigen lassen. Ruft dazu im Firefox eure Drupal-Seite im Frontend auf und klickt auf das Firebug-Symbol. 8

9 Das Firebug-Fenster wird daraufhin im unteren Seitenbereich angezeigt. Öffnet jetzt das HTML-Register. 9

10 Darin ist die Struktur der Seite zu sehen. Entscheidende Bedeutung kommt dem einleitenden body zu. <body thmr="thmr_78" id="genesis-1c"> Hier fällt die ID genesis-1c auf. Das aktuelle Layout bezieht sich demnach auf die CSS-Definition #genesis-1c, somit also auf feste Pixelwerte. Sucht innerhalb des body-elements nach dem untergeordneten div-element mit der ID #content-inner. Klickt man auf das div-element, wird im rechten Fensterbereich die dazugehörende CSS-Definition angezeigt. 10

11 Wie bereits in einem anderen Tutorial beschrieben, kann man mit dem Firebug Anpassungen am Layout der Seite vornehmen, ohne die Quelldateien verändern zu müssen. Ihr könnt das ganz einfach testen. Klickt dazu im body-element auf die ID #genesis-1c. Die ID lässt sich daraufhin verändern. 11

12 Wenn ihr das jetzt beispielsweise in genesis-2b ändert, werden die Anpassungen automatisch angezeigt. Ihr seht also, wie flexibel ihr mit einem solchen Basis-Theme seid. Allein durch Anpassung der CSS-ID im einleitenden body könnt ihr ein völlig anderes Layout der Seite umsetzen. Wenn ihr euch vorstellt, dies allein durch die Definition zusätzlicher eigener CSS-Definitionen umsetzen zu müssen, könnt ihr ungefähr abschätzen, wie lange das dauern würde. Und noch etwas ist deutlich geworden: Firebug ist ein unerlässliches Mittel während der Erstellung von Themes. 12

13 Besuche jetzt unseren Shop Nachschub für kreative Köpfe Foto-Design Grafik-Design Web-Design 3D-/Motion-Design Finde dein passendes Training auf