Designs 2.0

Moodle2.0 Willkommen in der neuen Welt der Designs in Moodle 2.0!

Dieser Artikel beschreibt, wie Designs in Moodle 2.0 funktionieren. Er soll helfen, Designs für Moodle 2.0 neu zu entwickeln bzw. alte Designs für Moodle 2.0 anzupassen. Wenn Sie Informationen zur Design-Implementierung in Moodle 1.9 und älteren Versionen suchen, lesen Sie den Artikel Design-Grundlagen.

Einleitung

Designs in Moodle sind dafür verantwortlich, wie eine Moodle-Seite "aussieht". Ein Design stellt CSS-Code für Farbe, Fonts und Layout einer Moodle-Seite bereit. Ein Design kann darüberhinaus den strukturellen XHTML-Code einer Seite verändern.

Ein Design in Moodle kann alle nötigen CSS-Definitionen enthalten - dann handelt es sich um ein eigenständiges Design. Ein Design kann aber auch ein bestehendes Design erweitern oder modofizieren.

Die meisten Designer wählen die zweite Variante, indem sie auf ein bestehendes Design aufsetzen und neuen CSS-Code hinzufügen bzw. Layoput-Definitionen ergänzen oder modifizieren. Wenn in einem Design eine bestimmte CSS-Definition nicht vorhanden ist, dann greift Moodle auf die entsprechende Definition im übergeordneten Design (innerhalb der Design-Hierarchie) zurück.

Was ist neu in Moodle 2.0

Das Design-System wurde in Moodle 2.0 komplett neu implementiert. Dabei wurden bekannte Probleme behoben und neue Funktionalität entsprechend den Anforderungen der Community bereitgestellt.

Leider ist es nicht gelungen, Rückwärtskompatibilität sicherzustellen. D.h. alle Designs, die unter Moodle 1.x entstanden sind, müssen neu erstellt werden.

Im folgenden sind die wichtigsten Änderungen aufgelistet:

Sauberere und konsistentere CSS Klassen und IDs über alle Moodle-Seiten hinweg
Einführung von Layout-Dateien (Vorlagen), die das Gesamtlayout für viele verschiedene HTML-Seiten in Moodle beschreiben
Einführung von Renderern, die kleine "Teile" von HTML-Seiten erzeugen; diese können von abgeleiteten Designs überschrieben werden
Einführung von standardisierten Methoden, um Javascript in Designs einzubinden
Vereinfachte Kontrolle von Grafiken und Symbolen in Moodle
Das alte Standard-Design wurde in zwei Designs aufgesplittet:
- base - enthält ein minimales Basislayout
- standard - ergänzt das Basis-Design base mit CSS, so dass das Aussehen dem alten Standard-Design gleicht
Geschwindigkeitsverbesserungen: Im normalen Produktivmodus werden die CSS-Dateien in einer optimierten Datei zusammengeführt, die CSS- und Javascript-Dateien werden minimiert, um möglichst wenig Datenverkehr zu gewährleisten, Dateien werden vorzugsweise gecacht und versioniert

Die Struktur eines Designs in Moodle

Wichtige Punkte, die man berücksichtigen muss, wenn man "gute" Designs entwickeln möchte:

config.php - Diese Datei wird in jedem Design benötigt. Sie enthält die Konfigurationseinstellungen und Definitionen, damit das Design in Moodle funktioniert.
Layouts und Layout-Dateien - in der Konfigurationsdatei config.php gibt es für jeden Moodle-Seitentyp (siehe Anhang A: Design-Layouts für eine Liste der mehr als 12 Seitentypen) eine Definition. Jede dieser Seitentypdefinitionen beschreibt, welche Layout-Datei Moodle verwenden soll, welche Block-Bereiche die Seite anzeigen soll usw. Die Layout-Datei enthält HTML-Code und ein Minimum an PHP-Code, um die Grundstruktur der entsprechenden Moodle-Seite anzuzeigen. (Wenn Sie die Designs von Moodle 1.9 kennen, dann entspricht das dort einer Kombination der Dateien header.html und footer.html).
Das Basis-Design base ist nicht für die Verwendung in produktiven Moodle-Installationen gedacht. Es stellt das einfachste generische Layout bereit und enthält nur ein Minimum an CSS-Code, der für dieses generische Layout bzw. für Moodle insgesamt benötigt wird. Es enthält keine unnötigen Regeln und basiert auf einem Minimum an Annahmen. Es ist die perfekte Ausgangsbasis, um darauf aufbauend eigene Designs zu implementieren, da es nur wenige Farben, Ränder, Abstände und Ausrichtungen enthält, die überschrieben werden können. Beginnen Sie einfach damit, Ihre benötigten Einstellungen hinzuzufügen.

Dateien und Verzeichnisse

Die Dateien der einzelnen Designs befinden sich im Moodle-Verzeichnis moodle/theme bzw. in den dort enthaltenen Unterverzeichnissen. Die Dateien sind wie folgt aufgebaut:

Verzeichnis	Datei	Beschreibung
	/config.php	Enthält alle Konfigurationseinstellungen und Definitionen des Moodle-Designs
	/lib.php	Enthält spezielle Klassen und Funktionen, die vom entsprechenden Moodle-Design verwendet werden
	/renderers.php	Enthält die spezifischen Renderer des Moodle-Designs
	/settings.php	Enthält spezifische Design-Einstellungen - diese lokalen Einstellungen erlauben es dem Designer, die Einstellungen auf einfache Weise zu ändern (z.B. Farben, Logos im Kopfbereich usw.)
/javascript/		Alle spezifischen Javascript-Dateien, die das Design benötigt, werden in diesem Unterverzeichnis abgelegt.
/lang/		Alle spezifischen Sprachdateien, die das Design benötigt, werden in diesem Unterverzeichnis abgelegt.
/layout/		Enthält alle Layout-Dateien des Moodle-Designs
/pix/		Enthält alle Grafiken, die von den CSS- bzw. Layout-Dateien des Moodle-Designs benötigt werden
/pix	/favicon.ico	Das favicon des Moodle-Designs
/pix	/screenshot.jpg	Ein Screenshot des Moodle-Designs, der auf der Designauswahlseite in Moodle angezeigt wird
/style		Standardverzeichnis für die CSS-Dateien des Moodle-Designs
	/*.css	CSS-Dateien, die das Moodle-Design benötigt

Es gibt einige weitere Stellen, von denen aus Stylesheets eingebunden werden können, Details dazu finden Sie im CSS-Abschnitt weiter unten.

Design-Einstellungen

Alle Design-Einstellungen werden in der Konfigurationsdatei config.php des Designs vorgenommen. Folgende Einstellungen werden am häufigsten verwendet: parents, sheets, layouts und javascripts. Ein Konfigurationsbeispiel finden Sie in der Tabelle weiter unten.

Beispiel für eine Konfigurationsdatei

Lassen Sie uns einen Blick auf die Konfigurationsdatei des Basis-Designs werfen und sehen, wie der prinzipielle Aufbau einer solchen Datei ist: $THEME->name = 'newtheme';

$THEME->parents = array(

   'base'

);
$THEME->sheets = array(

   'admin',
   'blocks',
   'calendar',
   'course',
   'grade',
   'message',
   'question',
   'user'

);
$THEME->layouts = array(

   'base' => array(
       'theme' => 'newtheme',
       'file' => 'general.php',
       'regions' => array(),
   ),
   'standard' => array(
       'theme' => 'newtheme',
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post',
   )
   //.......

);
$THEME->javascripts_footer = array(

   'navigation'

);

Erläuterungen zum Konfigurationsdateibeispiel

Als erstes stellen wir fest, dass alle Einstellungen zum Objekt $THEME hinzugefügt werden. $THEME ist das Konfigurationsobjekt des Designs, es wird von Moodle angelegt und mit Standardwerten belegt und kann mit beliebigen Einstellungen erweitert werden.

Die erste Einstellung $THEME->name ist der Name des Designs. Sie können diesen Namen beliebig wählen, normalerweise wird derselbe Name für das zugehörige Design-Unterverzeichnis in moodle/theme verwendet.

Die Einstellung $THEME->parents legt fest, von welchem übergeordneten Design das vorliegende Design abgeleitet ist. Im vorliegenden Beispiel wurde das Design vom Basis-Design base abgeleitet.

Das Array $THEME->sheets enthält die Namen der CSS Stylesheets, die für das vorliegende Design eingebunden werden müssen. Beachten Sie, dass nur die Namen der Stylesheets angegeben werden, nicht jedoch die Unterverzeichnisse und Dateiendungen! Moodle geht automatisch davon aus, dass die CSS Stylesheets im Unterverzeichnis moodle/theme/styles liegen und die Dateiendung *.css haben.

Als nächstes kommen die Layout-Definitionen $THEME->layouts. Im Beispiel werden zwei Layouts definiert, die die Layout-Definitionen des Basis-Designs base überschreiben. Detaillierte Informationen finden Sie im Abschnitt Layouts weiter unten.

Die letzte Einstellung bindet eine Javascript-Datei $THEME->javascripts_footer. Wie bei den Stylesheets muss hier nur der Name der datei angegeben werden ohne Angabe des Unterverzeichnisses und der Dateiendung. Moodle geht automatisch davon aus, dass die Javascript-Dateien im Unterverzeichnis moodle/theme/javascript liegen und die Dateiendung *.js haben.

Tipp: Bevor Sie mit der Entwicklung eines eigenen Designs beginnen, werfen Sie einen Blick in die Konfigurationsdateien der Designs, die in der Moodle-Standardinstalltion mit ausgeliefert werden. Dann bekommen Sie einen guten Überblick darüber, wie die Dinge zusammenhängen und wer was wie einbindet bzw. überschreibt

CSS

Wo befinden sich die CSS-Dateien?

Lassen Sie uns zuerst anschauen, an welchen Stellen in Moodle CSS eingebunden werden kann:

/theme/themename/styles/*.css: Das ist das Standardverzeichnis für alle CSS Stylesheets eines Designs.

Design-Entwickler sollten beachten, dass die Reihenfolge, in der CSS-Dateien gefunden und eingebunden werden, eine Hierarchie erzeugt. Durch diese Hierarchie wird sichergestellt, dass die Regeln im Stylesheet eines Designs gleichnamige Regeln in übergeordneten Stylesheets überschreiben. Auf diese Weise können bestehende Regeln erweitert werden (siehe Abschnitt parent in der Design-Konfigurationsdatei config.php), und gleichzeitig wird gewährleistet, dass die Regeln in den Stylesheets des aktuellen Designs das letzte Wort haben.

Es gibt weitere Stellen in Moodle, in denen (wenn auch selten) CSS eingebunden werden kann. Der Programmierer eines Moodle-PHP-Skripts kann an jeder beliebigen Stelle im Code ein CSS Stylesheet manuell einbinden. Normalerweise sind das Konfigurationseinstellungen oder Plugin-Einstellungen im Code, die nicht design-spezifisch sind, aber CSS-Informationen benötigen. Als Design-Entwickler sollten Sie das im Hinterkopf haben, müssen sich aber ansonsten nicht weiter darum kümmern. Hier folgen einige Beispiele:

{pluginpath}/styles.css, z.B. /block/blockname/styles.css oder /mod/modname/styles.css: Jedes Plugin kann sein eigenes CSS Stylesheet haben. Dieses Stylesheet sollte nur Plugin-spezifische Regeln und Definitionen enthalten, die wirklich erforderlich sind. Design-spezifische Regeln für das Plugin sollten weiterhin in den Stylesheets im entsprechenden /theme-Unterverzeichnis definiert werden.

{pluginpath}/styles_themename.css: Dieses Stylesheet sollte ausschließlich von Design-Entwicklern verwendet werden. Es erlaubt, CSS für ein bestimmtes Design zu schreiben, ohne das entsprechende Design zu ändern. Es wird nirgends innerhalb der Standard-Moodle-Installation verwendet und nur zur Verwendung in Code von Dritten gedacht.

Als Design-Entwickler sollten Sie generell nur die erste Methode zur Einbindung von CSS verwenden, nämlich durch Hinzufügen von Regeln und Definitionen in einem Stylesheet im Verzeichnis /moodle/theme/themename.

Struktur des CSS-Codes in Moodle

Als nächstes sehen wir uns den Aufbau der CSS Definitionen und Regeln innerhalb eines Designs an. Natürlich steht es Ihnen als Design-Entwickler frei, Ihre CSS Stylesheets ganz nach Ihrem Belieben zu strukturieren. Dennoch empfiehlt es sich, sich am klaren Aufbau der Stylesheets von Moodle zu orientieren, die in den Designs der Standardinstallation ausgeliefert werden.

Als erstes kommt das Stylesheet pagelayout.css. Es enthält das CSS für die Darstellung des Layouts. Es enthält keinerlei Regeln, die Inhalte betreffen, die von Moodle generiert werden.

Des weiteren gibt es das Stylesheet core.css. Wenn Sie sich diese Datei anschauen, finden Sie darin eine Vielzahl von allgemeinen Regeln und Definitionen, die das Aussehen von Moodle insgesamt betreffen, nicht aber einzelner Bereiche in Moodle.

Es kann jedoch auch Definitionen geben, die bestimmte Bereiche innerhalb von Moodle betreffen. Solche Regeln werden gruppiert und durch Kommentare voneinander getrennt, in denen der betreffende Bereich genannt wird.

Schließlich gibt es weitere CSS Stylesheets für die einzelnen Bereiche von Moodle.

Anmerkung: Für alle, die den Aufbau der Stylesheets von Moodle 1.9 kennen, bedeutet dies eine große Änderung. In Moodle 1.9 war das CSS nach Design-Elementen (z.B. Farbe, Layout, usw.) strukturiert.

Wie schreibt man effektive CSS-Regeln in Moodle?

In Moodle 2.0 ist es sehr wichtig, "gute" CSS-Regeln zu definieren.

Aus Performanzgründen und wegen Browser-Einschränkungen werden alle CSS Stylesheets in einer einzigen CSS-Datei zusammengeführt, die jedes Mal eingebunden wird. Das bedeutet, dass alle Regeln so definiert werden sollten, dass es möglichst keine Widersprüche gibt bzw. die falschen Stylesheets verwendet werden. Während das Schreiben von "gutem" CSS Code eine originäre Aufgabe von Designern ist, wurden in Moodle 2.0 darüber hinaus verschiedene body-Klassen implementiert, so dass es Aufgabe der Moodle-Entwickler ist, diese Klassen richtig zu verwenden.

Das body-Element

Ab Moodle 2.0 ist das ID-Attribut des body-Elements immer eine Repräsentation der URI. Wenn Sie z.B. nach einem Forumsbeitrag suchen und die URI ist /mod/forum/view.php, dann ist die ID des body-Elements #page-mod-forum-view.

Genau wie das ID-Attribut des body-Elements wird auch die URI aufgelöst, so dass mehrere CSS-Klassen entstehen, die zum body-Element hinzugefügt werden. Im obigen Beispiel /mod/forum/view ergeben sich daraus die CSS-Klassen .path-mod, .path-mod-forum, die an das body-Element angehängt werden. Beachten Sie, dass 'path-mod-forum-view'# dagegen nicht als CSS-Klasse hinzugefügt wird. Das wurde absichtlich so gemacht, um Verwirrungen und Dopplungen zu vermeiden, da CSS-Regeln sich auch direkt auf eine Seite unter Verwendung der ID beziehen können und nicht die finale CSS-Klasse benötigen.

Die beschriebenen body-ID und body-Klassen sind wesentlicher Bestandteil der CSS-Regeln, die Sie für Ihr eigenes Design definieren müssen. Darüber hinaus gibt es weitere praktische CSS-Klassen, die zum body-Element hinzugefügt werden können. Einige davon werden im folgenden aufgelistet:

Wenn JavaScript aktiviert ist, dann wird jsenabled als Klasse zum body-Element hinzugefügt, so dass Sie unterschiedliche Regeln definieren können, je nachdem, ob JavaScript aktiviert ist oder nicht.
Je nach Schreibrichtung des Sprachpakets wird dir-rtl (Schreibrichtung von rechts nach links) oder dir-ltr (Schreibrichtung von links nach rechts) als Klasse zum body-Element hinzugefügt. Auf diese Weise ist es möglich, die Textausrichtung bei Bedarf der jeweiligen Sprache anzupassen.
Es wird eine weitere Klasse zum body-Element hinzugefügt, die das aktuell verwendete Sprachpaket repräsentiert. Standardmäßig wird von Moodle das Sprachpaket en_utf8 verwendet, was dazu führt, dass die Klasse lang-en_utf8 zum body-Element hinzugefügt wird.
Das Moodle-Verzeichis wwwroot wird ebenfalls in eine Klasse umgewandelt und zum body-Element hinzugefügt. Auf diese Weise ist es möglich, das Design in Abhängigkeit von der URL, über die Moodle erreichbar ist, zu definieren. Z.B. wird aus http://sam.moodle.local/moodle/ die Klasse .sam-moodle-local—moodle.
Wenn der aktuelle Nutzer nicht angemeldet ist, wird die Klasse .notloggedin' zum body-Element hinzugefügt.

Wie sieht das alles in der Praxis aus? Im obigen Beispiel /mod/forum/view.php erhalten Sie mindestens folgendes body-Element: <body id=”page-mod-forum-view” class=”path-mod path-mod-forum” />

Eigene Regeln definieren

Die bestmögliche Nutzung von body-Element-IDs und -Klassen hilft, Probleme zu reduzieren.

Es gibt viele spezifische CSS-Klassen in Moodle. Die Moodle-Entwickler versuchen, diese Klassen an allen Stellen zu verwenden, an denen möglicherweise Design-spezifische Darstellungen erwünscht sind. Bedenken Sie jedoch, dass kein Entwickler alle Klassennamen im Kopf haben kann. Es ist Aufgabe des Design-Entwicklers, "gute Regeln zu definieren und die Gefahr von Widersprüchen und Konflikten zu reduzieren.

Bevor Sie beginnen, Regeln zu definieren, müssen Sie sich ein klare Verständnis dafür verschaffen, wo Ihre Regeln angewendet werden sollen. Es empfieht sich die oben erwähnten Klassen des body-Elements zu definieren. wenn Sie eien Regel für eine bestimmte Seite definieren wollen, verwenden Sie die ID der Seite, z.B.:

#page-mod-forum-view .forumpost {border:1px solid orange;)

Wenn Sie eine Regel definieren möchten, die auf jeder Forumsseite angewendet werden soll, schreiben Sie:

.path-mod-forum .forumpost {border:1px solid orange;}

Eine weitere wichtige Sache ist die Struktur die zu dem Element führt, für das Sie eine Design-Regel definieren wollen. Bei Konflikten verwenden Browser die spezifischere Regel. Es kann sehr hilfreich sein, Selektoren zu verwenden, die die vollständige Struktur des Elements abbilden, das designt werden soll.

Wenn Sie body-IDs und -Klassen sowie vollständige Selektoren verwenden, dann reduzieren Sie das Risiko von Konflikten jetzt und in Zukunft.

Layouts

Alle Moodle-Designs müssen Layouts definieren. Wenn Sie ein Design von einem anderen Design abgeleiten, dann müssen Sie entscheiden, welche Layouts vom neuen (abgeleiteten) Design überschrieben werden sollen. Wenn Sie das Design von Grund auf neu entwickeln, dann müssen Sie auch die einzelnen Layouts definieren. Die Layouts werden in beiden Fällen in der Konfigurationsdatei config.php festeglegt.

Beachten Sie, dass ein neues Design, dass von einem anderen Design abgeleitet wird, nicht notwendigerweise Layouts definieren oder Layout-Dateien verwenden muss, wenn Sie keine Änderungen im Vergleich mit dem übergeordneten Design vornehmen möchten. Ein Beispiel für diesen Fall ist das Standard-Design, das vom base-Design abgeleitet ist und keine eigenen Layouts definiert, sondern das Aussehen ausschließlich über CSS-Definitionen festlegt.

Wie bereits weiter oben gesagt, werden Layouts in der Konfigurationsdatei config.php in der Variablen $THEME->layouts konfiguriert.

Beispiel: $THEME->layouts = array(

   // Standard layout with blocks, this is recommended for most pages with general information
   'standard' => array(
       'theme' => 'base',
       'file' => 'general.php',
       'regions' => array('side-pre', 'side-post'),
       'defaultregion' => 'side-post'
   )

) Das erste, worauf Moodle schaut, ist der Name des Layouts. Im obigen Beispiel ist das standard (der Array-Schlüssel in PHP). Dann werden die Einstellungen des Layouts geprüft, also im Beispiel theme, file, regions und defaultregion. Es gibt noch einige weitere Einstellungen, die für ein Layout gesetzt werden können.

theme: Bezeichnet das Design, in dem die Layout-Datei existiert. Auf diese Weise können Sie beliebige Layout-Dateien von anderen Designs in Ihrem Design verwenden.

file: Das ist der Name der Layout-Datei, die das vorliegende Layout verwendet.

regions: Das sind die verschiedenen Block-Bereiche des Designs (Bereiche auf der Moodle-Seite, in denen Moodle-Blöcke platziert werden können).

defaultregion: Das ist der Standardbereich, in dem neue Moodle-Blöcke hinzugefügt werden.

options: Das ist ein Array mit Design-spezifischen Einstellungen. Detaillierte Informationen dazu finden Sie weiter unten.

Die ersten vier Einstellungen sind Pflichteinstellungen für jedes Layout, die Einstellung options dagegen ist optional. Diese Einstellung erlaubt dem Design-Entwickler spezielle Optionen zu definieren, auf die später von den Layout-Dateien aus zugegriffen werden kann.

Diese Vorgehensweise wird z.B. im base-Design verwendet: Wenn Sie sich die zugehörige Konfigurationsdatei theme/base/config.php ansehen, dann werden Sie feststellen, dass einige Layouts die Optionen nonavbar und nofooter spezifizieren, die jeweils auf wahr oder falsch gesetzt sein können. Wenn Sie sich dann die Datei theme/base/layout/general.php anschauen, dann finden Sie dort folgenden Code: <?php $hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar()); $hasfooter = (empty($PAGE->layout_options['nofooter'])); ?> ............ <?php if ($hasnavbar) { ?>


<?php echo $OUTPUT->navbar(); ?>
 <?php echo $PAGE->button; ?>

<?php } ?> Sie sehen hier die Verwendung von diesen Design-Optionen in der Layout-Datei. Im konkreten Beispiel geht es um die Anzeige der Navigationsleiste und der Fußzeile.

Layout-Dateien

Eine Layout-Datei enthält die grundlegende HTML-Struktur eines Layouts einschließlich der Bereiche für Kopfzeile, Inhalt, Blöcke und Fußzeile. In der Design-Struktur von Moodle 1.9 entspricht das einer Kombination der Dateien header.html und footer.html. Der Code in einer Layout-Datei besteht aus HTMl und einigen einfachen PHP-Anweisungen, die Inhalte von Moodle-Seiten generieren.

Der folgende Code zeigt beispielhaft den Aufbau einer Layout-Datei: <?php echo $OUTPUT->doctype() ?> <html <?php echo $OUTPUT->htmlattributes() ?>> <head>

   <title><?php echo $PAGE->title ?></title>
   <?php echo $OUTPUT->standard_head_html() ?>

</head>
<body id="<?php echo $PAGE->bodyid ?>" class="<?php echo $PAGE->bodyclasses; ?>">
<?php echo $OUTPUT->standard_top_of_body_html() ?>




<?php echo $PAGE->heading ?>
<?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?>




           <?php echo $OUTPUT->blocks_for_region('side-pre') ?>



           <?php echo core_renderer::MAIN_CONTENT_TOKEN ?>



           <?php echo $OUTPUT->blocks_for_region('side-post') ?>





<?php echo page_doc_link(get_string('moodledocslink')) ?>
           <?php
           echo $OUTPUT->login_info();
           echo $OUTPUT->home_link();
           echo $OUTPUT->standard_footer_html();
           ?>

<?php echo $OUTPUT->standard_end_of_body_html() ?> </body> </html>

Wir gehen davon aus, dass Sie über ausreichende HTML-Kenntnisse verfügen, um die Grundstruktur des obigen Codes zu verstehen. Was Sie aber vermutlich nicht verstehen, sind die PHP-Aufrufe - lassen Sie uns deshalb einen genaueren Blick auf diese werfen. <?php echo $OUTPUT->doctype() ?> Dieser Aufruf erfolgt ganz oben auf der Seite. Das ist der allererste Teil der Ausgabe, der die (X)HTML Document Type Definition zur Seite hinzufügt. Diese wird bestimmt durch die Einstellungen der Seite, darauf hat der Design-Entwickler keinen Einfluss.

<html <?php echo $OUTPUT->htmlattributes() ?>> Das ist das öffnende HTML-Element inklusive der HTML-Attribute, die angewendet werden sollen. Diese werden bestimmt durch Einstellungen der HTML-Installation.

<?php echo $PAGE->title ?> Das liefert den Seitentitel.

<?php echo $OUTPUT->standard_head_html() ?> Dieser wichtige PHP-Aufruf generiert den HTML-Code innerhalb des Head-Elements der Seite. Hier werden JavaScript- und CSS-Optionen ausgegeben, sowie alle anderen speziellen Script- bzw. Style-Elemente.

<body id="<?php echo $PAGE->bodyid; ?>" class="<?php echo $PAGE->bodyclasses; ?>"> Hier folgt der HTML-Code des body-Elements inklusive der erforderlichen ID und CSS-Klassen.

<?php echo $PAGE->heading; ?><?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?>

Hier wird der Kopfbereich der Seite generiert. In diesem konkreten Beispiel wird die Seitenüberschrift und die Login-Information (Name des aktuellen Nutzers bzw. Link zum Anmelden) sowie das Auswahlmenü des Kopfbereichs ausgegeben.

<?php echo $OUTPUT->blocks_for_region('side-pre') ?> Das ist der HTML-Code zur Anzeige der Moodle-Blöcke auf der Seite. In diesem Beispiel sind das alle Blöcke, die zum Bereich side-pre hinzugefügt wurden.

<?php echo core_renderer::MAIN_CONTENT_TOKEN ?> Das ist einer der wichtigsten Aufrufe in der Layout-Datei: Er generiert den eigentlichen Seiteninhalt der gegebenen Moodle-Seite.

<?php echo $OUTPUT->blocks_for_region('side-post') ?> Das ist der HTML-Code, der für die Anzeige der Blöcke verantwortlich ist, die zum Bereich side-post hinzugefügt wurden.

<?php echo $OUTPUT->login_info(); echo $OUTPUT->home_link(); echo $OUTPUT->standard_footer_html(); ?> Dieses letzte Code-Fragment generiert den Inhalt des Fußbereichs der Seite. Dazu gehört die Login-Information (wie im Kopfbereich der Seite), ein Home-Link sowie der HTML-Code für die Fußzeile mit den zugehörigen Script- und Style-Elementen.

Anmerkung: In Moodle 2.0 wird JavaScript für eine Moodle-Seite meistens im Fußbereich eingebunden. Dadurch wird die Ladezeit einer Seite erheblich reduziert.

Wenn Sie Layout-Dateien schreiben, denken Sie an die verschiedenen Layouts und wie sich der zugehörige HTML-Code unterscheidet. Meistens werden Sie keine verschiedenen Layout-Dateien für die einzelnen Layouts benötigen, sondern die Layout-Dateien über verschiedene Layouts hinweg wiederverwenden können. Darüber hinaus können Sie Layout-Optionen verwenden, um die Zahl der verschiedenen Layout-Dateien weiter zu reduzieren.

Wie bereits erwähnt, kann es auch sein, dass Sie überhaupt keine neuen Layouts und Layout-Dateien, wenn Sie ein vorhandenes Design anpassen.

Verwendung von Bildern

Eine wichtige Funktionalität der neuen Designs in Moodle 2.0 ist die Möglichkeit, jede einzelnes Standard-Bild innerhalb von Moodle durch eigene, Design-spezifische Bilder überschreiben zu können. In diesem Abschnitt wird erklärt, wie man eigene Bilder im eigenen Design verwendet und wie man Bilder von Moodle im eigenen Design überschreibt.

Zunächst kommen ein paar grundlegende Informationen:

Bilder, die Sie in Ihrem Design verwenden wollen, müssen im Unterverzeichis /moodle/theme/themename/pix Ihres Designs abgelegt werden.
In diesem Unterverzeichnis pix können Sie weitere Unterverzeichnisse anlegen.
Bilder, die standardmäßig in Moodle verwendet werden, liegen im Unterverzeichnis /moodle/pix.
Module, Blöcke und andere Plugins sollten ihre Bilder ebenfalls in einem Unterverzeichis /pix ablegen (also z.B. in /moodle/mod/modname/pix oder /moodle/blocks/blockname/pix).

Nehmen wir also an, Sie wollen eigene Bilder in Ihrem Design verwenden und haben diese im Unterverzeichnis /moodle/theme/themename/pix abgelegt:

/moodle/theme/themename/pix/image1.jpg
/moodle/theme/themename/pix/subdir/image2.png

Beachten Sie, dass eins der Bilder ein JPEG Bild im Verzeichnis /pix ist, während das andere ein PNG Bild in einem Unterverzeichnis /pix/subdir ist.

Das folgende Codefragment zeigt, wie Bilder in HTML eingebunden werden, z.B. in einer Layout-Datei: <img src="<?php echo $OUTPUT->pix_url('image1', 'theme');?>" alt="" /> <img src="<?php echo $OUTPUT->pix_url('subdir/image2', 'theme');?>" alt="" /> Sie sehen, dass eine Methode der Moodle-internen output-Bibliothek verwendet wird, anstatt die URL des Bildes direkt einzufügen. Es ist nicht wichtig, im Detail zu verstehen, wie diese Methode funktioniert, es ist nur wichtig, diese Methode tatsächlich im Code zu verwenden, weil genau diese Vorgehensweise es ermöglicht, Bilder zu überschreiben.

Das nächste Codefragment zeigt, wie Bilder in CSS als Hintergrundbilder eingebunden werden können: .divone {background-image:url(image1);} .divtwo {background-image:url(subdir/image2);} In diesem Beispiel sehen Sie einige spezielle Notationen, die Moodle in bestimmter Weise behandelt: Moodle sucht in jeder CSS-Datei nach Elementen der Form irgendetwas und ersetzt diese entsprechend den Erfordernissen.

Beachten Sie, dass in keinem der aufgeführten Codebeispiele die Dateiendungen der Bilder angegeben wurden. Das hängt mit der neuen Möglichkeit zusammmen, Bilder zu überschreiben. Innerhalb eines Designs können Sie nämlich auf ganz einfache Wesie jedes beliebige Standardbild von Moodle überschreiben, indem Sie das geänderte Bild im Unterverzeichnis /moodle/theme/themename/pix ablegen, und zwar mit demselben Dateinamen und im selben Unterverzeichnis wie das Standardbild in der Verzeichnisstruktur von /moodle/pix.

Beispiel: Angenommen, Sie wollen die Standardbilder /pix/moodlelogo.gif und /pix/i/user.gif überschreiben. Dann müssen Sie Ihre eigenen Bilder unter /theme/themename/pix/moodlelogo.gif bzw. /theme/themename/pix/i/user.gif ablegen.

Das ist alles! Und das Beste an der Sache ist: Die neuen Bilder können ein beliebiges Bildformat haben, es muss nicht dasselbe Format wie die Standarddatei sein. Daher werden im Code auch keine Dateiendungen verwendet. Im obigen Beispiel würden die Standardbilder auch dann richtig überschrieben, wenn Sie Ihre eigenen Bilder als /theme/themename/pix/moodlelogo.png bzw. /theme/themename/pix/i/user.bmp ablegen.

Weitere detaillierte Informationen finden Sie in diesem Artikel (in englisch).

Anhang A

Design-Einstellungen - Stand 28. April 2010

Einstellung	Effekt
$THEME->csspostprocess	erlaubt es dem Nutzer, den Namen einer Funktion anzugeben, der an allen CSS-Code übergeben wird, bevor dieser ausgewertet wird
$THEME->editor_sheets	Array von Stylesheets, das im body des Editors eingebunden wird
$THEME->enable_dock	falls auf true gesetzt, wird der Seiten-Dock für Blöcke aktiviert
$THEME->hidefromselector	wird verwendet, um Designs in der Design-Auswahl zu verbergen (es sei denn, der Designer-Modus ist aktiviert), kann true oder false sein
$THEME->filter_mediaplugin_colors	wird zur Steuerung der Fraben in den kleinen Media-Playern der Filter verwendet
$THEME->javascripts	Array mit den Namen der JavaScript-Dateien im Unterverzeichnis /javascript/ des Designs (wird im Kopfbereich eingebunden)
$THEME->javascripts_footer	Array mit den Namen der JavaScript-Dateien im Unterverzeichnis /javascript/ des Designs, die im Fußbereich eingebunden werden
$THEME->larrow	Überschreibt das "Pfeil-nach-links-Symbol" in Moodle
$THEME->layouts	Array, das die Layouts des Designs festlegt
$THEME->name	Name des Designs (mnormalerweise der Name des zugehörigen Unterverzeichnisses)
$THEME->parents	Array mit Designs, von denen das gegebene Design abgeleitet ist
$THEME->parents_exclude_javascripts	Array mit den JavaScript-Dateien, die nicht von den übergeordneten Designs vererbt werden
$THEME->parents_exclude_sheets	Array mit den Stylesheets , die nicht von den übergeordneten Designs vererbt werden
$THEME->plugins_exclude_sheets	Array mit den Plugin-Sheets die ignoriert bzw. nicht eingebunden werden sollen
$THEME->rarrow	Überschreibt das "Pfeil-nach-rechts-Symbol" in Moodle
$THEME->renderfactory	setzt eine Render Factory, die im Design verwendet wird (bei Verwendung von eigenen Renderers)
$THEME->resource_mp3player_colors	steuert die Farben für den MP3 Player
$THEME->sheets	Array mit den Stylesheets, die im Design eingebunden werden; liegen im Unterverzeichnis /styles/ style directory.

Layouts - Stand 29. März 2010

Layout	Zweck
base	bestes rückwärts kompatibles Layout ohne Blöcke - standardmäßig verwendetes Layout
standard	Standard-Layout mit Blöcken, wird für die meisten Seiten mit allgemeinen Informationen empfohlen
course	Kursseite
coursecategory	wird verwendet zum Navigieren in Kursbereichen
incourse	Standard-Layout für das Navigieren innerhalb eines Kurses, typisch für Module
frontpage	Startseite
admin	Administrationsseiten und -skripte
mydashboard	Mein Dashboard
mypublic	Meine öffentliche Seite
login	Login-Seite
popup	Seiten, die in Popup-Fenstern angezeigt werden (keine Navigation, keine Blöcke, keine Kopfzeile)
frametop	nur für alte Frame-basierte Layouts (keine Blöcke, minimaler Fußbereich)
embedded	eingebettete Seiten (iframe/object, die in Moodle-Formularen eingebettet sind) - brauchen so viel Platz wie möglich
maintenance	wird während der Installation oder Aktualisierung von Moodle verwendet, darf keine Blöcke enthalten und sollte keine Links zu anderen Seiten enthalten (z.B. kein Home-Link im Fußbereich)

Siehe auch

en:Development:Themes 2.0 creating your first theme - Schritt-für-Schritt-Anleitung für ein eigenes Design (englisch)
en:Development:Themes 2.0 overriding a renderer - Tutorial, wie man einen eigenen Renderer entwickelt und den HTML-Code ändert, den Moodle erzeugt (englisch)
en:Development:Themes 2.0 How to use images within your theme - erklärt, wie man in einem Design Bilder verwendet und überschreibt (englisch)
en:Development:Themes 2.0 adding a settings page - erklärt, wie man eine Konfigurationsseite anlegt, die ein Design einfach anpassbar macht (englisch)
en:Development:Styling and customising the dock - erklärt, wie man das Dock designt und anpasst.
en:Development:Theme changes in 2.0 - Änderungen in Bezug auf das Design in Moodle 2.0
en:Development:Using jQuery with Moodle 2.0 - Verwendung von jQuery in Moodle 2.0

Documentation