Designs 2.0

Diese Seite ist noch nicht vollständig übersetzt.

Siehe en:Development:Themes_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.

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:

1. config.php - Diese Datei wird in jedem Design benötigt. Sie enthält die Konfigurationseinstellungen und Definitionen, damit das Design in Moodle funktioniert.
2. 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).
3. 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'
   )

) The first thing Moodle looks at is the name of the layout, in this case it is `standard` (the array key in PHP), it then looks at the settings for the layout, this is the theme, file, regions, and default region. There are also a couple of other options that can be set by a layout.

theme

is the theme the layout file exists in. That's right you can make use of layouts from other installed themes.

file

is the name of the layout file this layout wants to use.

regions

is the different block regions (places you can put blocks) within the theme.

defaultregion

is the default location when adding new blocks.

options

an array of layout specific options described in detail below.

The first four settings are required by each layout definition however the final setting `options` is a special case that only needs to be set if you want to make use of it. This setting allows the theme designer to specify special options that they would like to create that can be later accessed within the layout file. This allows the theme to make design decisions during the definition and react upon those decisions in what ever layout file is being used.

One such place this has been used is infact within the base theme. If you take a look first at theme/base/config.php you will notice that several layouts specify options nonavbar and nofooter which can both be set to either true or false. Then if we take a look at theme/base/layout/general.php you will spot lines like the following: <?php $hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar()); $hasfooter = (empty($PAGE->layout_options['nofooter'])); ?> ............ <?php if ($hasnavbar) { ?>

<?php } ?> What you are seeing here is the use of those settings from the layout within the layout file. In this case it is being used to toggle the display of the navigation bar and page footer.

Layout-Dateien

A layout file is a file that contains the core HTML structure for a layout including the header, footer, content and block regions. For those of you who are familiar with themes in Moodle 1.9 this is simply header.html and footer.html combined. Of course it is not all HTML, there is bits of HTML and content that Moodle needs to put into the page, within each layout file this will be done by a couple of VERY simple PHP calls to get bits and pieces including content.

The following is a very simple layout file to illustrate the different bits that make it up: <?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>

Lets assume you know a enough HTML to understand the basic structure above, what you probably don't understand are the PHP calls so lets look at them. <?php echo $OUTPUT->doctype() ?> This occurs at the VERY top of the page, it must be the first bit of output and is responsible for adding the (X)HTML document type definition to the page. This of course is determined by the settings of the site and is one of the things that the themer has no control over.

<html <?php echo $OUTPUT->htmlattributes() ?>> Here we have started writing the opening html tag and have asked Moodle to give us the HTML attributes that should be applied to it. This again is determined by several settings within the actual HTML install.

<?php echo $PAGE->title ?> This gets us the title for the page.

<?php echo $OUTPUT->standard_head_html() ?> This very important call gets us the standard head HTML that needs to be within the HEAD tag of the page. This is where CSS and JavaScript requirements for the top of the page will be output as well as any special script or style tags.

<body id="<?php echo $PAGE->bodyid; ?>" class="<?php echo $PAGE->bodyclasses; ?>"> Much like the html tag above we have started writing the body tag and have asked for Moodle to get us the desired ID and classes that should be applied to it.

<?php echo $PAGE->heading; ?>

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

Here we are creating the header for the page. In this case we want the heading for the page, we want to display the login information which will be the current users username or a link to log in if they are not logged in, and we want the heading menu if there is one.

<?php echo $OUTPUT->blocks_for_region('side-pre') ?> Here we get the HTML to display the blocks that have been added to the page. In this case we have asked for all blocks that have been added to the area labelled side-pre.

<?php echo core_renderer::MAIN_CONTENT_TOKEN ?> This is one of the most important calls within the file, it determines where the actual content for the page gets inserted.

<?php echo $OUTPUT->blocks_for_region('side-post') ?> Here we get the HTML to display the blocks that have been added to the page. In this case we have asked for all blocks that have been added to the area labelled side-post.

<?php echo $OUTPUT->login_info(); echo $OUTPUT->home_link(); echo $OUTPUT->standard_footer_html(); ?> This final bit of code gets the content for the footer of the page. It gets the login information which is the same as in the header, a home link, and the standard footer HTML which like the standard head HTML contains all of the script and style tags required by the page and requested to go in the footer.

Note: Within Moodle 2.0 most of the JavaScript for the page will be included in the footer. This greatly helps reduce the loading time of the page.

When writing layout files think about the different layouts and how the HTML that each makes use of will differ. You will most likely find you do not need a different layout file for each layout, most likely you will be able to reuse the layout files you create across several layouts. You can of course make use of layout options as well to further reduce the number of layout files you need to produce.

Of course as mentioned above if you are customising an existing theme then you may not need to create any layouts or layout files at all.

Verwendung von Bildern

Right at the start when listing the features of the new themes system one of the features mentioned was the ability to override any of the standard images within Moodle from within your theme. At this point we will look at both how to make use of your own images within your theme, and secondly how to override the images being used by Moodle. So first up a bit about images within Moodle,

1. Images you want to use within your theme need to be located within your theme's pix directory.
2. You can use sub directories within the pix directory of your theme.
3. Images used by Moodle's core are located within the pix directory of Moodle.
4. Modules, blocks and other plugins should also store there images within a pix directory.

So making use of your own images first up. Lets assume you have added two image files to the pix directory of your theme.

• /theme/yourthemename/pix/imageone.jpg
• /theme/yourthemename/pix/subdir/imagetwo.png

Notice that one image is a JPEG image, and the second is a PNG. Also the second image is in a subdirectory.

The following code snippet illustrates how to make use of your images within HTML, such as if you wanted to use them within a layout file. <img src="<?php echo $OUTPUT->pix_url('imageone', 'theme');?>" alt="" /> <img src="<?php echo $OUTPUT->pix_url('subdir/imagetwo', 'theme');?>" alt="" /> In this case rather than writing out the URL to the image we use a method of Moodle's output library. Its not too important how that functions works but it is important that we use it as it is what allows images within Moodle to be over-rideable.

The following is how you would use the images from within CSS as background images. .divone {background-image:url(imageone);} .divtwo {background-image:url(subdir/imagetwo);} If this case we have to use some special notations that Moodle looks for. Whenever Moodle hands out a CSS file it first searches for all something tags and replaces them with what is required.

The final thing to notice with both of the cases above is that at no point do we include the images file extension. The reason for this leads us into the next topic, how to override images.

From within a theme you can VERY easily override any standard image within Moodle by simply adding the replacement image to the theme's pix directory in the same sub directory structure as it is in Moodle. So for instance we wanted to override the following two images:

1. /pix/moodlelogo.gif
2. /pix/i/user.gif

We would simply need to add our replacement images to the theme in the following locations

1. /theme/themename/pix/moodlelogo.gif
2. /theme/themename/pix/i/user.gif

How easy is that!

Now the other very cool thing to mention is that Moodle looks for not just replacements of the same image type (jpg, gif, etc...) but also replacements in any image format. This is why above when working with our images we never specified the images file extension. This means that the following would also work:

1. /theme/themename/pix/moodlelogo.png
2. /theme/themename/pix/i/user.bmp

For a more detailed description of how this all works see the page on using images within your theme

Anhang A

Design-Einstellungen - Stand 28. April 2010

Setting	Effect
$THEME->csspostprocess	Allows the user to provide the name of a function that all CSS should be passed to before being delivered.
$THEME->editor_sheets	An array of stylesheets to include within the body of the editor.
$THEME->enable_dock	If set to true the side dock is enabled for blocks
$THEME->hidefromselector	Used to hide a theme from the theme selector (unless theme designer mode is on). Accepts true or false.
$THEME->filter_mediaplugin_colors	Used to control the colours used in the small media player for the filters
$THEME->javascripts	An array containing the names of JavaScript files located in /javascript/ to include in the theme. (gets included in the head)
$THEME->javascripts_footer	As above but will be included in the page footer.
$THEME->larrow	Overrides the left arrow image used throughout Moodle
$THEME->layouts	An array setting the layouts for the theme
$THEME->name	Name of the theme. Most likely the name of the directory in which this file resides.
$THEME->parents	An array of themes to inherit from
$THEME->parents_exclude_javascripts	An array of JavaScript files NOT to inherit from the themes parents
$THEME->parents_exclude_sheets	An array of stylesheets not to inherit from the themes parents
$THEME->plugins_exclude_sheets	An array of plugin sheets to ignore and not include.
$THEME->rarrow	Overrides the right arrow image used throughout Moodle
$THEME->renderfactory	Sets a custom render factory to use with the theme, used when working with custom renderers.
$THEME->resource_mp3player_colors	Controls the colours for the MP3 player
$THEME->sheets	An array of stylesheets to include for this theme. Should be located in the theme's style directory.

Layouts - Stand 29. März 2010

Layout	Purpose
base	Most backwards compatible layout without the blocks - this is the layout used by default.
standard	Standard layout with blocks, this is recommended for most pages with general information.
course	Main course page.
coursecategory	Use for browsing through course categories.
incourse	Default layout while browsing a course, typical for modules.
frontpage	The site home page.
admin	Administration pages and scripts.
mydashboard	My dashboard page.
mypublic	My public page.
login	The login page.
popup	Pages that appear in pop-up windows - no navigation, no blocks, no header.
frametop	Used for legacy frame layouts only. No blocks and minimal footer.
embedded	Embeded pages, like iframe/object embedded in moodleform - it needs as much space as possible
maintenance	Used during upgrade and install. This must not have any blocks, and it is good idea if it does not have links to other places - for example there should not be a home link in the footer.

Siehe auch

• en:Development:Themes 2.0 creating your first theme - A quick step by step guide to creating your first theme.
• en:Development:Themes 2.0 overriding a renderer - A tutorial on creating a custom renderer and changing the HTML Moodle produces.
• en:Development:Themes 2.0 How to use images within your theme - Explains how to use and override images within your theme.
• en:Development:Themes 2.0 adding a settings page - Looks at how to add a setting page making your theme easily customisable.
• en:Development:Styling_and_customising_the_dock - How to style and customise the dock.
• en:Development:Theme changes in 2.0
• en:Development:Using jQuery with Moodle 2.0