...ist das kleine Icon das am Anfang der URL der Internetadresse erscheint. (wie bereits in Version 1.4)

Transkript

1 Seite 1 von 6 Einleitung Mit der 1.5 Version der themes können großartige Moodle Lernplattformen gestaltet werden. Ich freue mich darauf, die vielen verschiedenen, brauchbaren und gute aussehenden Moodle Webseite zu sehen. Denn, Lernen mit Spass macht das Lernen leichter. --UrsHunkler 12:36, 1 Aug 2005 (Westeuropäische Sommerzeit) Was befindet sich im themes Ordner? Im themes Ordner befinden sich folgende Dateien und Ordner: der Ordner: pix/ config.php favicon.ico footer.html header.html styles.php styles_color.css styles_fonts.css styles_layout.css styles_moz.css Der pix/ Ordner...dort befinden sich alle Bilder und Icons die im entsprechenden theme verwendet werden. Die 1.5 themes beinhalten Bilder für die Navigationsreiter und für eventuelle Farbverläufe. (Alle Moodle 1.5 themes verwenden den pix Ordner.) Das favicon.ico...ist das kleine Icon das am Anfang der URL der Internetadresse erscheint. (wie bereits in Version 1.4) Die Dateien header.html und footer.html...beinhalten das Logo, den Loginlink, das Sprungmenü, die Breadcrump-Navigation, das Moodle Logo usw. Mit diesen Dateien ist es möglich, der Kopf- und Fußzeile von Moodle ein individuelles Aussehen zu verleihen. (wie in Version 1.4) Die Datei styles.php...hat zwar denselben Dateinamen wie in Version 1.4, aber übernimmt andere Aufgaben. Sie wird von der Datei header.html aufgerufen und bildet die Verbindung zu den CSS Dateien. In dieser Datei müssen keine Änderungen vorgenommen werden. Die Datei config.php...hat ebenfalls denselben Dateinamen wie in Version 1.4, übernimmt aber andere

2 Seite 2 von 6 Aufgaben. In dieser Datei kann festgelegt werden, wie die CSS Dateien zusammen arbeiten. Neue themes können auf der Grundlage des standard themes oder davon abstammenden themes erstellt werden. Dabei können verschiedene CSS Dateien eingebunden oder ausgeschlossen werden. Weitere Details dazu können in dem demnächst erscheinenden Artikel "Cascading CSS" nachgelesen werden. Die Stylesheets Mit der Moodle Version 1.5 wurde damit begonnen, Inhalte und Aussehen der Moodle Website klar voneinander zu trennen (siehe"separating Content from Presentation") um eine flexiblere und einfachere Seitengestaltung zu ermöglichen. Um die Möglichkeit zu geben relativ einfache Änderungen an der Farbgebung und der Schrift vorzunehmen, ist das CSS in drei verschiedene Dateien aufgeteilt: styles_layout.css styles_fonts.css styles_color.css styles_moz.css ( styles_moz.css beinhaltet spezielle Formatierungen für Firefox und Mozilla, wie z.b. die Darstellung von abgerundeten Ecken.) Zusätzliche Dateien im themes Ordner Außerdem können theme Designer zusätzliche Informationen sowie eine Vorschau des Designs als Vorschaubild zur Verfügung stellen. Das Vorschaubild erscheint in der theme- Übersicht innerhalb der Themeauswahl auf der Adminkonfigurationsseite. Die zusätzlichen Informationen, die in der README-Datei abgelegt sind, werden angezeigt, nachdem das theme ausgewählt wurde. README.html screenshot.jpg Beispielseite Mit dieser Moodle Beispielseite kann ausprobiert werden, wie die verschiedenen CSS Dateien die Ansicht der Seite verändern. Auf dieser Seite befinden sich oben rechts vier grün hinterlegte Links. Mit diesen vier Links können die entsprechenden stylesheets ausgeschaltet (Textdarstellung: kursiv) und eingeschaltet (Textdarstellung: normal) werden. Wenn alle stylesheets ausgeschaltet sind, werden ausschließlich die Inhalte von Moodle angezeigt. Trennung von Inhalt und Darstellung Die Inhalte der Webseite werden durch XHTML dargestellt, das Aussehen durch CSS. Um die zueinandergehörigen Informationen beider Ebenen miteinander zu verbinden werden die XHTML tags und die auf der Webseite entsprechend benannten Verweise verwendet. Um eine komplexe Applikation wie Moodle zu gestalten, werden sehr viele dieser Verweise benötigt. Cascading CSS Um das Aussehen von Moodle zu bestimmen verwendet "Moodle themes" die stylesheets,

3 Seite 3 von 6 die in die Bereiche layout, fonts und colors aufgeteilt sind. Dies wird durch ein PHP Skript namens "styles.php" ermöglicht, das sich in jedem themes Ordner befindet und von der Datei "config.php" kontrolliert wird. Moodle hat ein standard theme, das sehr einfach gestaltet ist und bietet ein basic layout, auf dessen Grundlage weitere themes erstellt werden können. Jedes theme kann aber auch ein "parent"-theme haben, das die Grundlage für das aktuelle theme bildet. Abhängig von der entsprechenden Einstellung kann ein theme bis zu drei stylesheets enthalten.. 1. "standard" theme theme/standard/styles.php 2. "parent" theme theme/parenttheme/styles.php 3. "main" theme theme/yourtheme/styles.php Aufgrund des stufenweisen Aufbaus von CSS können die Definitionen in neueren Dateien die Definitionen der älteren CSS Dateien überschreiben. Moodle nutzt diese cascading stylesheets umfangreich und gibt dem theme-designer damit viele Gestaltungsmöglichkeiten. Diese reichen von einfachen themes-entwicklungen, auf Grundlagen von bereits existierenden themes, bis hin zu einem völlig individuellen Moodle Design mit zusätzlich erstellten CSS Dateien. Theme-Designer können CSS stylesheets selbst definieren und hinzufügen und nach belieben benennen. Das Standard theme Kleine Veränderungen Wenn nur kleine Veränderungen an dem theme vorgenommen werden sollen, wie z.b. verschiedene Farben oder das Hinzufügen eines Logos, dann wird als Grundlage des neuen themes das standard theme verwendet und es müssen nur einige extra CSS styles in einer neuen CSS Datei erstellt werden. Als Beispiel hierfür das "standardwhite" theme Es benutzt die Datei "config.php" um die passenden Einstellungen vorzunehmen. Der erste Eintrag $THEME->sheets = array('gradients'); definiert die Datei "gradient.css" als Datei mit zusätzlichen CSS Definitionen. Es spezifiziert zudem $THEME->standardsheets = true; was bedeutet, das alle styles vom standard theme ebenfalls beinhaltet sind.

4 Seite 4 von 6 Anstatt das neue theme auf das standard theme zu beziehen kann es sich auch auf ein anderes theme beziehen, z.b. durch die Definition: $THEME->parent = 'cooltheme'; Gemischtes CSS - Standard Layouts mit eigener Schrift und Farben Das theme "formal_white" vermischt das Seitenlayout vom standard theme mit den eigenen Definitionen für Text und Farben. Auf diese Weise werden alle Veränderung im Standardlayout beibehalten. Dies geschieht durch die Zeile: $THEME->sheets = array('fw_layout','fw_color','fw_fonts'); und $THEME->standardsheets = array('styles_layout'); in der Datei "config.php" Ein theme verwendet ein parent theme Eine erweiterte Eigenschaft ist es, ein bereits existierendes theme als parent theme zu verwenden und diesem verschiedene Varianten hinzuzufügen. Eine Nutzungsmöglichkeit besteht darin, zunächst ein parent theme mit allen CSS Definitionen zu erstellen. Zusätzlich werden child themes mit verschiedenen Farbvarianten bereitgestellt, die von dem Nutzer der Seite nach belieben ausgewählt werden können. Diese child themes benötigen nur eine CSS Datei, die die verschiedenen Farbdefinitionen beinhaltet. Die Konfiguration eines solchen child themes könnte folgendermaßen aussehen: $THEME->sheets = array('my_layout');, $THEME->parent = 'formal_white'; und

5 Seite 5 von 6 $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts'); Themes unabhängig von Standard theme In diesem Fall werden eigene CSS Definitionen verwendet. $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); und $THEME->standardsheets = false; Diese Einstellungen deaktivieren alle anderen Moodle CSS Einstellungen und bilden ein vollständig eigenständiges theme. Alle Veränderungen im Standard Moodle theme haben keinerlei Auswirkungen auf das neu erstellte theme. Weitere Basis CSS Dateien Zusätzlich zu den CSS Dateien der themes hat Moodle Basis CSS Dateien für jedes einzelne Modul, jeden Block und jede Sprache. Entwickler können grundlegende CSS- Eigenschaften für ihre Module und Blöcke zur Verfügung stellen um die Seite oder einen Block richtig zu gestalten, bei der für spezielle Funktionen Formatierungen notwendig sind. Das look and feel von Moodle wird durch die Veränderungen des Basis Layouts nicht verändert. Diese Dateien werden allerdings nur verwendet, wenn das Standard CSS aktiviert ist, weil diese immer vor den allgemeinen theme CSS Dateien geladen werden.

6 Seite 6 von 6 Zum Schluss Sehr gute Informationen über Moodle CSS lassen sich letztendlich auch direkt im Browser wiederfinden. (Quelltext) Moodle enthält hier eine hilfreiche Dokumentation. Z.B. können im Firefox Browser mithilfe der "Web Developer" Extension die verschiedenen CSS Bestandteile gelesen werden.