Teil 2: Designvorlagen mit Drupal
- Designvorlagen mit Drupal
- Teil 2: Designvorlagen mit Drupal
Steuerdateien des Themes Alle Template-Dateien tragen die Endung .tpl.php. Der Namensbestandteil vor den Endungen gibt das Bildschirmelement an, für dessen Formatierungsinformationen beziehungsweise -aufbereitung diese Datei zuständig ist. Box.tpl.php...
Steuerdateien des Themes
Alle Template-Dateien tragen die Endung .tpl.php. Der Namensbestandteil vor den Endungen gibt das Bildschirmelement an, für dessen Formatierungsinformationen beziehungsweise -aufbereitung diese Datei zuständig ist. Box.tpl.php
<div class="box"><?php if ($title) { ?><h2 class="title"><?php print
$title; ?></h2><?php } ?><div class="content"><?php
print $content; ?></div></div>Die Schablone für eine Box legt nur fest, welche Elemente (titleund class="content") in der Box sind. Die Eigenschaften der CSS-Klassen (content und box) werden in den Stylesheet-Dateien, die auf .css enden, festgelegt. Page.tpl.php Ähnlich wie box verhalten sich die anderen .tpl.php-Dateien. Wollen Sie Genaueres wissen, suchen in der Datei jeweils nach dem Namen der Datei, so kommen Sie schnell zur jeweils zentralen Stelle jeder Datei.
Die Dateien für block, box, comment und node sind eher einfach und definieren die Basiselemente. Die Datei page.tpl.php fügt alle Elemente auf einer Seite zusammen: Kopf- und Fußbereich, linke und rechte Seitenspalte, Menüs und Inhalte.
Drupals Firebug
Eine Herausforderung ganz anderer Art ist es herauszufinden, woher ein Element seine Formatierung erhält. Sie kennen sicherlich Firebug oder Web Developer . Drupal bietet ein vergleichbares Werkzeug an. Devel erhalten Sie unter . Installieren Sie dieses und aktivieren Sie devel und theme developer. Dabei wird die Funktion debug_backtrace() verwendet, mit der ältere Versionen des Zend-Optimizers nicht zurechtkommen. Ab Version 3.3.0 erhalten Sie keine Fehlermeldung mehr, sondern für den Administrator ist links unten eine Checkbox Themer info sichtbar. Klicken Sie im weißen Feld die Checkbox an und aktivieren die Funktion Themer info.
Einzelne Elemente der Seite werden rot eingerahmt, wenn Sie mit der Maus darüberfahren. Klicken Sie etwas an, so erhalten Sie rechts oben eine Informationsbox. Mittels Übergeordnete Begriffe erfahren Sie die Einbindung der aktuellen Funktion. Klicken Sie den Funktionsnamen unter Aufgerufene Funktion an, so erhalten Sie die Sourcecode der Funktion mit Beschreibung. Klicken Sie auf die Zeile unterhalb von Funktionsparameter, hier element (array, 20 Elemente). Sie bekommen eine Liste mit allen Parametern der aufgerufenen Funktion. Sehr hilfreich ist auch die Zeile Candidate function names. Diese gibt von links nach rechts die möglichen Funktionsnamen an, um die vorhandene Funktion zu übersteuern. Ein geeigneter Ort die eigene Funktion zu platzieren, ist die Datei template.php innerhalb des Themes. Ein kleines Stückchen Code ermöglicht Ihnen, herauszufinden, welche Funktionen existieren, die auf diesem Web übersteuert werden können. Alle Funktionen, die übersteuern können, beginnen mit theme_. Diesen Umstand können Sie sich zunutze machen:
<?php
print '<ul>';
$functions = get_defined_
functions();
foreach ($functions['user'] as
$function) {
if (substr($function,0,6)
== 'theme_')
print "<li>
$function</li>";
}
print '<ul>';
?>Legen Sie eine Seite an, die das Eingabeformat php-code zugewiesen bekommt, geben Sie obigen Code ein und speichern Sie die Seite. Sie erhalten die Liste aller Funktionen, die Elemente formatieren.
theme_aggregator_block_item
...
theme_username
theme_xml_iconJe nach aktivierten Modulen kann die Liste variieren. Wenn Sie das Präfix theme_ durch den Namen der Theme Engine ersetzen, so ist Ihre Funktion portabel zwischen verschiedenen Themes der gleichen Engine. Zur Veranschaulichung wollen wir den Text zu einem Radiobutton umgestalten und kopieren dazu die Funktion in die Datei templates.php und benennen die Funktion um. Zur Demonstration haben wir lediglich eine andere Klasse, Meine_option, zugeordnet, sodass ein Designer diese CSS-Klasse für die Gestaltung zur Verfügung hat.
function phptemplate_radio
($element) {
_form_set_class($element, array
('form-radio'));
$output = '<input type="radio" ';
$output .= 'name="'. $element
['#name'] .'" ';
$output .= 'value="'. $element
['#return_value'] .'" ';
$output .= (check_plain($element
['#value']) == $element['#return_value']) ? ' checked="checked" ' : ' ';
$output .= drupal_attributes
($element['#attributes']) .' />';
if (!is_null($element
['#title'])) {
$output = '<label class=
"Meine_option">'. $output .' '. $element[,#title'] .'</label>';
}
unset($element['#title']);
return theme('form_element',
$element, $output);
}Die Modifikation ist in der Datei template.php für das Theme Garland. Oft passiert, dass Änderungen nicht sichtbar sind oder anscheinend nicht funktionieren. Dann haben Sie vielleicht gerade mit Erfolg die Caching- Funktion getestet und die letzte Version aus dem Cache erhalten. Das Modul Devel stellt auf jeder Seite einen Link bereit, den Cache zu leeren. Ihren Browser weisen Sie mit Shift+Ctrl und Reload an, die Seite tatsächlich vom Server zu holen.
Einsatz von Style Sheets
Sind in der .info-Datei des Themes keine CSS-Dateien angegeben, so wird die Datei style.css bzw. style rtl.css geladen. Die meisten Module beinhalten eigene CSS-Dateien mit Angaben für die Formatierung der Inhalte, die das Modul erzeugt beziehungsweise anzeigt. Hervorzuheben ist die Datei system.css aus dem Modul 8i]system. Diese Datei ist zuständig für das Menü und viele allgemeine Elemente.
Wollen Sie eine CSS-Datei ersetzen, so fügen Ihre Version der CSS-Datei zu Ihrem Theme und erstellen einen entsprechenden Eintrag in der .info-Datei Ihres Themes. So würde der Eintrag
Stylesheets[all][]=system-menus.cssdie Datei des system-Moduls übersteueren. Ihre Version der system-menu.css muss dazu im Hauptverzeichnis des Themes liegen. Dort finden Sie in der Regel auch style.css. Wenn Sie in der .info CSS-Dateien angeben und style.css auch geladen werden soll, so muss diese Datei ebenso explizit angegeben werden.
Alternative
Wenn Sie eine CSS-Datei des Kerns übersteuern, so erstellen Sie eine Kopie und übernehmen alle Werte auch für Objekte, die Sie nicht abändern, damit diese weiterhin die Standard-Formatierung erhalten. Nun haben Sie alle Informationen zusammen, die Sie benötigen, um Themes für Drupal zu erstellen. Sie wissen nun, wie Sie Funktionen nutzen können, um Elemente der Ausgabe mit eigenen CSS-Klassen zu versehen. Jetzt können Sie die Stylesheets ändern.
