Moodle/Design/old: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
|||
(10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
'''topic''' - Kurzbeschreibung | '''topic''' - Kurzbeschreibung | ||
== Beschreibung == | == Beschreibung == | ||
Design-Implementierung von Moodle 1.9 und älteren Versionen | |||
* Informationen zur neuen Design-Implementierung in Moodle 2.0 finden Sie im Artikel [[Designs 2.0]] | |||
== Verzeichnisaufbau == | |||
; Was beinhaltet das Verzeichnis eines Designs? | |||
Jedes Design-Verzeichnis enthält zumeist folgendes | |||
Jedes Design-Verzeichnis enthält zumeist folgendes | |||
pix/ | pix/ | ||
config.php | config.php | ||
Zeile 28: | Zeile 18: | ||
styles_moz.css | styles_moz.css | ||
==== | ==== pix-Verzeichnis ==== | ||
Es beinhaltet alle Bilder und Icons, die vom jeweiligen Design verwendet werden | Es beinhaltet alle Bilder und Icons, die vom jeweiligen Design verwendet werden | ||
* Bilder werden z. B. für die grafische Darstellung von Reitern und/oder Farbverläufen verwendet | |||
==== | ==== favicon.ico ==== | ||
Dies ist das kleine Icon, welches in der Adresszeile des Browsers nebem dem URL angezeigt wird | Dies ist das kleine Icon, welches in der Adresszeile des Browsers nebem dem URL angezeigt wird | ||
* Manche Browser stellen es auch in der Liste der Lesezeichen dar | |||
Das Standard-Moodle-Icon sieht so aus: [[Bild:Favicon.gif]] | |||
Das Favicon des Cornflower-Designs so: [[Bild:Cornflower.jpg]] | |||
==== header.html und footer.html ==== | ==== header.html und footer.html ==== | ||
Diese Seiten enthalten das Logo, den Code für das Loginfeld im Header, das Sprungmenü, die Navigationszeile (auch genannt Breadcrumb-Menü), das Moodle-Logo usw | Diese Seiten enthalten das Logo, den Code für das Loginfeld im Header, das Sprungmenü, die Navigationszeile (auch genannt Breadcrumb-Menü), das Moodle-Logo usw | ||
Mittels Manipulation dieser Dateien können Sie Moodle zu einem individuellen Aussehen in der Kopf- und Fußzeile aller Moodle-Seiten verhelfen | Mittels Manipulation dieser Dateien können Sie Moodle zu einem individuellen Aussehen in der Kopf- und Fußzeile aller Moodle-Seiten verhelfen | ||
Alle Bilder, auf die von diesen Dateien aus verlinkt wird, sollten die | Alle Bilder, auf die von diesen Dateien aus verlinkt wird, sollten die VariableCFG->httpswwwroot statt des üblichenCFG->wwwroot verwenden | ||
* Nur so funktioniert der Login über https zuverlässig | |||
Die wichtigsten Variablen dieser Dateien sind: | Die wichtigsten Variablen dieser Dateien sind: | ||
CFG (betrifft alle Systemvariablen) | |||
THEME (betrifft alle Design-bezogenen Variablen aus der config.php) | |||
COURSE (betrifft den aktuellen Kurs) | |||
meta (alle Metatags, auch die des Stylesheets) | |||
home (Bool´scher Operator) | |||
title (Seitentitel) | |||
heading (Seitenkopf) | |||
navigation (die eigentliche Navigation, nicht die Breadcrumbzeile) | |||
navmenulist (XHTML Menüliste) | |||
menu (Das Popupmenu bzw | |||
* deren Schaltflächen) | |||
nur den Header betreffend: | nur den Header betreffend: | ||
direction (Text von links nach rechts bzw rechts nach links) | |||
bodytags (Tags die dem HTML-Rumpf zugeführt werden sollen) | |||
Nur den Footer betreffend: | Nur den Footer betreffend: | ||
homelink (Link zu "home" - aktuelle Kursseite oder Startseite) | |||
loggedinas (Zeichenkette zur Anzeige des angemeldeten Benutzers) | |||
performanceinfo (Zeichenkette mit Leistungsdaten - siehe [[Debugging]]) | |||
Letztlich kann der Header und der Footer jeglichen Moodle PHP-Code enthalten, womit auch weitere Daten aus der Datenbank oder der Laufumgebung verarbeitet werden können | |||
Letztlich kann der Header und der Footer jeglichen Moodle PHP-Code enthalten, womit auch weitere Daten aus der Datenbank oder der Laufumgebung verarbeitet werden können | |||
==== styles.php ==== | ==== styles.php ==== | ||
Die ''styles.php'' wird von der header.html aufgerufen und inkludiert die CSS-Dateien des Designs | |||
* Hier sind normalerweise keine Änderungen nötig, verwenden Sie stattdessen eher die ''config.php'' des Design-Verzeichnisses | |||
* Die einzige Variable, deren Anpassung sinnvoll für die Entwicklung erscheint, wäre dielifetime | |||
* Setzen Sie hier einen kleinen Wert wie z.B | |||
* eine Sekunde, um ein allzu langes Caching des Browsers zu unterbinden | |||
* Setzen Sie dann im Produktiveinsatz Ihres Designs für Moodle die Werte eher hoch( z.B.lifetime = 3*24*60*60 - das entspricht 3 Tagen), um die Ladezeiten Ihres Designs für den Anwender kürzest möglich zu halten | |||
Jedes Moodle-Design sollte dieses Skript enthalten | |||
* Darüber setzt Moodle diverse Variablen usw., bevor die eigentlichen CSS-Dateien verarbeitet werden | |||
Jedes Moodle-Design sollte dieses Skript enthalten | * Der Output dieses Skriptes ergibt dann eine vollständige standardkonforme Moodle-CSS-Datei | ||
==== config.php ==== | ==== config.php ==== | ||
In der [[Design-Konfigurationsdatei]] werden wesentliche Einstellungen des Designs hinterlegt | In der [[Design-Konfigurationsdatei]] werden wesentliche Einstellungen des Designs hinterlegt | ||
Man kann bspw | Man kann bspw | ||
So verwendet z.B | * ein eigenes Design kreieren, welches sich in gewünschter Weise darstellt, jedoch auf das Standard- oder ein anderes Eltern-Design zurückgreift, wenn die Moodle die benötigten Anweisungen nicht findet | ||
So verwendet z.B | |||
* das Chameleon-Design in der ''config.php'' das Verzeichnis moodle/theme/chameleon/pix, um daraus seine Bilder zu beziehen | |||
* Das Formal White-Design hingegen verwendet dazu das Verzeichnis moodle/pix - und genau dies wird in der ''config.php'' festgelegt | |||
==== Die Stylesheets ==== | ==== Die Stylesheets ==== | ||
Cascading Style Sheets ([[CSS]]) werden verwendet, um Inhalte von deren Darstellung zu trennen - Ziele sind mehr Flexibilität, Barrierefreiheit und ein flexibleres Seitendesign | Cascading Style Sheets ([[CSS]]) werden verwendet, um Inhalte von deren Darstellung zu trennen - Ziele sind mehr Flexibilität, Barrierefreiheit und ein flexibleres Seitendesign | ||
* Die Veränderung einer Elementdefinition verändert dessen Darstellung seitenweit | |||
* Die CSS-Dateien werden gemäß ihrer Funktion in drei Dateien aufgeteilt: | |||
[[ CSS styles_layout.css|styles_layout.css]] | [[ CSS styles_layout.css|styles_layout.css]] | ||
Zeile 89: | Zeile 90: | ||
[[ CSS styles_color.css|styles_color.css]] | [[ CSS styles_color.css|styles_color.css]] | ||
Darüberhinaus existiert noch die [[CSS styles_moz.css]], welche Mozilla- und Firefox-spezifische Anordnungen enthält, insbesonders die gerundeten Ecken | Darüberhinaus existiert noch die [[CSS styles_moz.css]], welche Mozilla- und Firefox-spezifische Anordnungen enthält, insbesonders die gerundeten Ecken | ||
==== Zusätzliche Dateien==== | ==== Zusätzliche Dateien==== | ||
Zu guter Letzt können Designentwickler Informationen und auch ein Vorschaubild des Designs hinterlegen | Zu guter Letzt können Designentwickler Informationen und auch ein Vorschaubild des Designs hinterlegen | ||
* Das Vorschaubild findet Verwendung in der [[Website-Administration_%28Block%29#Darstellung|Design-Auswahlseite]] des [[Administrator]]s | |||
* Die Angaben der Readme werden nach der Auswahl eines Designs angezeigt | |||
README.html | README.html | ||
Zeile 99: | Zeile 102: | ||
== Trennung von Inhalt und Darstellung == | == Trennung von Inhalt und Darstellung == | ||
Der Inhalt einer Seite ist mittels XHTML repräsentiert, die Darstellung mittels [[CSS]] | Der Inhalt einer Seite ist mittels XHTML repräsentiert, die Darstellung mittels [[CSS]] | ||
* Die Verbindung zwischen der darzustellenden Information der Seite und der Darstellung an sich wird über das Ansprechen der XHTML-Tags und namentlich definierter Klassen durch CSS realisiert | |||
* Man kann sich vorstellen, dass es innerhalb einer solch komplexen Software wie Moodle davon einige bedarf | |||
== Kaskadierendes CSS == | == Kaskadierendes CSS == | ||
Moodle Designs verwenden CSS Stylesheets, um die Darstellung zu definieren, genauer gesagt Layout, Schrift und Farben | Moodle Designs verwenden CSS Stylesheets, um die Darstellung zu definieren, genauer gesagt Layout, Schrift und Farben | ||
* Diese Anweisungen werden duch ein PHP-Skript namens "styles.php" zusammengestellt und die Darstellung durch eine Datei namens "config.php" kontrolliert | |||
* Beide Dateien befinden sich im Wurzelverzeichnis des jeweiligen Designs | |||
Moodle verfügt über ein relativ klar strukturiertes "Standard"-Design, welches eine Layoutgrundlage für weitere Designs darstellt | Moodle verfügt über ein relativ klar strukturiertes "Standard"-Design, welches eine Layoutgrundlage für weitere Designs darstellt | ||
* Wenn ein Darstellungselement in einem Design nicht definiert ist, greift Moodle auf die Definition des Standard-Designs zurück | |||
* In diesem Sinne kann auch für jedes Design ein Eltern-Design definiert werden, dessen Darstellungsanweisungen vor dem eigentlichen Design eingebunden und ausgeführt werden | |||
* Sind somit im "Kind"-Design Darstellungselemente nicht definiert, kommen die Anweisungen des Eltern-Designs zur Anwendung | |||
D.h | D.h | ||
* es könnten bis zu 3 Designs das eigentliche Design Ihrer Moodle-Instanz begründen: | |||
#"Standard"-Design - theme/standard/styles.php | #"Standard"-Design - theme/standard/styles.php | ||
Zeile 113: | Zeile 124: | ||
#"eigentliches" Design - theme/yourtheme/styles.php | #"eigentliches" Design - theme/yourtheme/styles.php | ||
Dank des kaskadierenden Charakters von [[CSS]] überschreiben Anweisungen in später inkludierten Dateien die zuvor hinterlegten Anweisungen | Dank des kaskadierenden Charakters von [[CSS]] überschreiben Anweisungen in später inkludierten Dateien die zuvor hinterlegten Anweisungen | ||
* Moodle macht von dieser Möglichkeit reichlich Gebrauch und liefert dem Designentwickler viele Möglichkeiten | |||
* Angefangen von kleiner Modifikation bestehender Designs bis zu einer komplexen neuartigen Bestimmung des Aussehens mittels eigener CSS-Dateien | |||
Designentwickler können CSS-Stylesheets neu definieren und hinzufügen sowie diese nach eigenem Gutdünken benennen | Designentwickler können CSS-Stylesheets neu definieren und hinzufügen sowie diese nach eigenem Gutdünken benennen | ||
== Das "Standard"-Design == | == Das "Standard"-Design == | ||
Zeile 123: | Zeile 136: | ||
</div> | </div> | ||
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | <div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | ||
Abb. 1: Das "Standard"-Design mit den CSS-Dateien "styles_layout.css", "styles_fonts.css", "styles_color.css" und "styles_moz.css" | Abb. 1: Das "Standard"-Design mit den CSS-Dateien "styles_layout.css", "styles_fonts.css", "styles_color.css" und "styles_moz.css" | ||
</div><br style="clear:both" /> | </div><br style="clear:both" /> | ||
</div> | </div> | ||
Zeile 129: | Zeile 142: | ||
== Kleine Anpassungen == | == Kleine Anpassungen == | ||
Wenn Sie nur kleine Anpassungen an einem Design vornehmen wollen, wie bspw | Wenn Sie nur kleine Anpassungen an einem Design vornehmen wollen, wie bspw | ||
* andere Farben oder ein anderes Logo, verwenden Sie das "Standard"-Design und definieren Sie die von Ihnen benötigten Änderungen in einer weiteren CSS-Datei | |||
Betrachten Sie als Beispiel das Design "Standardwhite" | Betrachten Sie als Beispiel das Design "Standardwhite" | ||
Es verwendet die Datei "config.php" zum Setzen der geeigneten Einstellungen | Es verwendet die Datei "config.php" zum Setzen der geeigneten Einstellungen | ||
<code>$THEME->sheets = array('gradients');</code> | * Der erste Eintrag | ||
definiert die CSS-Datei "gradients.css" als eine weitere Datei mit CSS-Anweisungen | <code>$THEME->sheets = array('gradients');</code> | ||
definiert die CSS-Datei "gradients.css" als eine weitere Datei mit CSS-Anweisungen | |||
* Weiter werden mit der Anweisung <code>$THEME->standardsheets = true;</code> alle sonstigen Styles des "Standard"-Designs herangezogen | |||
Sie könnten auch anstelle des "Standard"-Designs auf ein anderes Design referenzieren: | Sie könnten auch anstelle des "Standard"-Designs auf ein anderes Design referenzieren: | ||
Zeile 148: | Zeile 164: | ||
== Gemischtes CSS - Das "Standard"-Design mit eigenen Schriften und Farben == | == Gemischtes CSS - Das "Standard"-Design mit eigenen Schriften und Farben == | ||
Das Design "formal_white" verbindet das Seitenlayout des "Standard"-Designs mit seinem eigenen Layout, Schriften und Farben | Das Design "formal_white" verbindet das Seitenlayout des "Standard"-Designs mit seinem eigenen Layout, Schriften und Farben | ||
* Auf diese Weise werden alle Layout-Anweisungen des "Standard"-Designs behalten | |||
* Ermöglicht wird dies durch die Anweisung <code>$THEME->sheets = array('fw_layout','fw_color','fw_fonts');</code> und <code>$THEME->standardsheets = array('styles_layout');</code> in der "config.php"-Datei des Design-Verzeichnisses | |||
<div style="margin:1.2em 0"><div style="float:left"> | <div style="margin:1.2em 0"><div style="float:left"> | ||
Zeile 154: | Zeile 172: | ||
</div> | </div> | ||
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | <div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | ||
Abb. 3: Das Design "formal_white" mit der CSS-Datei "styles_layout.css" des "Standard"-Designs sowie den eigenen Stylesheets "fw_layout.css", "fw_fonts.css", "fw_color.css" | Abb. 3: Das Design "formal_white" mit der CSS-Datei "styles_layout.css" des "Standard"-Designs sowie den eigenen Stylesheets "fw_layout.css", "fw_fonts.css", "fw_color.css" | ||
</div><br style="clear:both" /> | </div><br style="clear:both" /> | ||
</div> | </div> | ||
Zeile 160: | Zeile 178: | ||
== Einbeziehung eines "Eltern"-Designs (gestelltes Beispiel) == | == Einbeziehung eines "Eltern"-Designs (gestelltes Beispiel) == | ||
Eine fortgeschrittene Technik ist der Einsatz jeglichen vorhandenen Designs als "Eltern"-Design und dieses dann zu variieren | Eine fortgeschrittene Technik ist der Einsatz jeglichen vorhandenen Designs als "Eltern"-Design und dieses dann zu variieren | ||
Eine weitere Möglichkeit wären Variationen des Logos der Seiten, die sich in der "header.html" befinden | * Eine Möglichkeit wäre, ein "Eltern"-Design mit allen notwendigen CSS-Anweisungen bereitzustellen | ||
* Mögliche "Kind"-Designs könnten dem Nutzer z.B | |||
* den Einsatz seiner eigenen Farbpräferenz ermöglichen | |||
* Dies kann mittels einer einzigen CSS-Datei realisiert werden, welche die Farbvariationen ausweist | |||
Eine weitere Möglichkeit wären Variationen des Logos der Seiten, die sich in der "header.html" befinden | |||
* Hier wäre nicht einmal ein weiteres CSS nötig | |||
Die Konfiguration des "Kind"-Designs könnte in etwa so aussehen: | Die Konfiguration des "Kind"-Designs könnte in etwa so aussehen: | ||
<code>$THEME->sheets = array('my_layout');</code>, | <code>$THEME->sheets = array('my_layout');</code>, | ||
<code>$THEME->parent = 'formal_white';</code> und | <code>$THEME->parent = 'formal_white';</code> und | ||
<code>$THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');</code> | <code>$THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');</code> | ||
Zeile 174: | Zeile 197: | ||
</div> | </div> | ||
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | <div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | ||
Abb. 4: Das beispielhafte "formal_white_plus" mit der zusätzlichen CSS-Datei "my_layout.css" | Abb. 4: Das beispielhafte "formal_white_plus" mit der zusätzlichen CSS-Datei "my_layout.css" | ||
</div><br style="clear:both" /> | </div><br style="clear:both" /> | ||
</div> | </div> | ||
Zeile 180: | Zeile 203: | ||
== Ein Design ohne Abhängigkeit vom "Standard"-Design (gestelltes Beispiel) == | == Ein Design ohne Abhängigkeit vom "Standard"-Design (gestelltes Beispiel) == | ||
Ein solches Design würde sein eigenes CSS verwenden | Ein solches Design würde sein eigenes CSS verwenden | ||
<code>$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color');</code> und <code>$THEME->standardsheets = false;</code> deaktivieren den Rückgriff auf alle anderen Moodle-CSS-Dateien | * Die Einstellung | ||
<code>$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color');</code> und <code>$THEME->standardsheets = false;</code> deaktivieren den Rückgriff auf alle anderen Moodle-CSS-Dateien | |||
* Etwaige Veränderung an den Dateien des "Standard"-Designverzeichnisses würden das vorliegende Design in keinster Weise verändern | |||
<div style="margin:1.2em 0"><div style="float:left"> | <div style="margin:1.2em 0"><div style="float:left"> | ||
Zeile 188: | Zeile 212: | ||
</div> | </div> | ||
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | <div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | ||
Abb. 5: Das Design mit den eigenen CSS-Dateien "styles_layout.css", "styles_fonts.css" und "styles_color.css" | Abb. 5: Das Design mit den eigenen CSS-Dateien "styles_layout.css", "styles_fonts.css" und "styles_color.css" | ||
</div><br style="clear:both" /> | </div><br style="clear:both" /> | ||
</div> | </div> | ||
Zeile 194: | Zeile 218: | ||
== Weitere grundlegende CSS-Dateien == | == Weitere grundlegende CSS-Dateien == | ||
Zusätzlich zu den CSS-Dateien des Designs unterstützt Moodle auch grundlegende CSS-Anweisungen für Module, Blöcke und sogar für verschiedene Sprachen | Zusätzlich zu den CSS-Dateien des Designs unterstützt Moodle auch grundlegende CSS-Anweisungen für Module, Blöcke und sogar für verschiedene Sprachen | ||
Solche Dateien werden jedoch nur eingebunden, wenn das "Standard"-Design aktiviert ist | * Entwickler können solche CSS-Anweisungen hinterlegen, damit ihre Module und Blöcke in der gewünschten Art und Weise dargestellt werden - bspw | ||
* um spezielle Funktionalitäten optisch zu gestalten | |||
* Das Gesamtdesign von Moodle wird dadurch nicht beeinflusst | |||
Solche Dateien werden jedoch nur eingebunden, wenn das "Standard"-Design aktiviert ist | |||
* Sie werden vor allen anderen CSS-Dateien eingebunden | |||
<div style="margin:1.2em 0"><div style="float:left"> | <div style="margin:1.2em 0"><div style="float:left"> | ||
Zeile 202: | Zeile 229: | ||
</div> | </div> | ||
<div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | <div style="float:left;border-left:1px solid #CCC;margin-left:2em;padding-left:0.5em;width:13em;font-size:0.9em"> | ||
Abb. 6: Die Einbindungsreihenfolge der CSS-Dateien durch Moodle | Abb. 6: Die Einbindungsreihenfolge der CSS-Dateien durch Moodle | ||
</div><br style="clear:both" /> | </div><br style="clear:both" /> | ||
</div> | </div> | ||
Zeile 208: | Zeile 235: | ||
== Siehe auch == | == Siehe auch == | ||
*[[CSS]] | *[[CSS]] | ||
*[http://www.unodo.de/discussion/moodle_themes/inside/style_example_a.html Moodle demo course page] - | *[http://www.unodo.de/discussion/moodle_themes/inside/style_example_a.html Moodle demo course page] - | ||
Hier sehen Sie die Wirkung verschiedener CSS-Dateien auf das Aussehen der Seite | Hier sehen Sie die Wirkung verschiedener CSS-Dateien auf das Aussehen der Seite | ||
* Oben rechts sehen Sie vier Links vor grünem Hintergrund | |||
* Mit diesen Schaltflächen können sie bestimmte Styles deaktivieren (kursive Schrift) oder aktivieren (normale Schrift) | |||
* Wenn Sie alle Styles deaktivieren, wird der unformatierte Inhalt angezeigt | |||
*[http://moodle.org/mod/data/view.php?id=6552 Datenbank verfügbarer Moodle-Designs] | *[http://moodle.org/mod/data/view.php?id=6552 Datenbank verfügbarer Moodle-Designs] | ||
*[http://moodle.unodo.de/ Moodle Design-Galerie] | *[http://moodle.unodo.de/ Moodle Design-Galerie] | ||
Zeile 225: | Zeile 255: | ||
[[Category:Administrator]] | [[Category:Administrator]] | ||
<noinclude> | |||
== Anhang == | |||
=== Siehe auch === | |||
{{Special:PrefixIndex/{{BASEPAGENAME}}}} | |||
==== Links ==== | |||
===== Weblinks ===== | |||
# https://docs.moodle.org/19/de/Design-Grundlagen | |||
</noinclude> | </noinclude> |
Aktuelle Version vom 19. Juni 2024, 11:49 Uhr
topic - Kurzbeschreibung
Beschreibung[Bearbeiten | Quelltext bearbeiten]
Design-Implementierung von Moodle 1.9 und älteren Versionen
- Informationen zur neuen Design-Implementierung in Moodle 2.0 finden Sie im Artikel Designs 2.0
Verzeichnisaufbau[Bearbeiten | Quelltext bearbeiten]
- Was beinhaltet das Verzeichnis eines Designs?
Jedes Design-Verzeichnis enthält zumeist folgendes
pix/ config.php favicon.ico footer.html header.html styles.php styles_color.css styles_fonts.css styles_layout.css styles_moz.css
pix-Verzeichnis[Bearbeiten | Quelltext bearbeiten]
Es beinhaltet alle Bilder und Icons, die vom jeweiligen Design verwendet werden
- Bilder werden z. B. für die grafische Darstellung von Reitern und/oder Farbverläufen verwendet
favicon.ico[Bearbeiten | Quelltext bearbeiten]
Dies ist das kleine Icon, welches in der Adresszeile des Browsers nebem dem URL angezeigt wird
- Manche Browser stellen es auch in der Liste der Lesezeichen dar
Das Standard-Moodle-Icon sieht so aus:
Das Favicon des Cornflower-Designs so:
[Bearbeiten | Quelltext bearbeiten]
Diese Seiten enthalten das Logo, den Code für das Loginfeld im Header, das Sprungmenü, die Navigationszeile (auch genannt Breadcrumb-Menü), das Moodle-Logo usw Mittels Manipulation dieser Dateien können Sie Moodle zu einem individuellen Aussehen in der Kopf- und Fußzeile aller Moodle-Seiten verhelfen
Alle Bilder, auf die von diesen Dateien aus verlinkt wird, sollten die VariableCFG->httpswwwroot statt des üblichenCFG->wwwroot verwenden
- Nur so funktioniert der Login über https zuverlässig
Die wichtigsten Variablen dieser Dateien sind:
CFG (betrifft alle Systemvariablen) THEME (betrifft alle Design-bezogenen Variablen aus der config.php) COURSE (betrifft den aktuellen Kurs) meta (alle Metatags, auch die des Stylesheets) home (Bool´scher Operator) title (Seitentitel) heading (Seitenkopf) navigation (die eigentliche Navigation, nicht die Breadcrumbzeile) navmenulist (XHTML Menüliste) menu (Das Popupmenu bzw
- deren Schaltflächen)
nur den Header betreffend:
direction (Text von links nach rechts bzw rechts nach links) bodytags (Tags die dem HTML-Rumpf zugeführt werden sollen)
Nur den Footer betreffend:
homelink (Link zu "home" - aktuelle Kursseite oder Startseite) loggedinas (Zeichenkette zur Anzeige des angemeldeten Benutzers) performanceinfo (Zeichenkette mit Leistungsdaten - siehe Debugging)
Letztlich kann der Header und der Footer jeglichen Moodle PHP-Code enthalten, womit auch weitere Daten aus der Datenbank oder der Laufumgebung verarbeitet werden können
styles.php[Bearbeiten | Quelltext bearbeiten]
Die styles.php wird von der header.html aufgerufen und inkludiert die CSS-Dateien des Designs
- Hier sind normalerweise keine Änderungen nötig, verwenden Sie stattdessen eher die config.php des Design-Verzeichnisses
- Die einzige Variable, deren Anpassung sinnvoll für die Entwicklung erscheint, wäre dielifetime
- Setzen Sie hier einen kleinen Wert wie z.B
- eine Sekunde, um ein allzu langes Caching des Browsers zu unterbinden
- Setzen Sie dann im Produktiveinsatz Ihres Designs für Moodle die Werte eher hoch( z.B.lifetime = 3*24*60*60 - das entspricht 3 Tagen), um die Ladezeiten Ihres Designs für den Anwender kürzest möglich zu halten
Jedes Moodle-Design sollte dieses Skript enthalten
- Darüber setzt Moodle diverse Variablen usw., bevor die eigentlichen CSS-Dateien verarbeitet werden
- Der Output dieses Skriptes ergibt dann eine vollständige standardkonforme Moodle-CSS-Datei
config.php[Bearbeiten | Quelltext bearbeiten]
In der Design-Konfigurationsdatei werden wesentliche Einstellungen des Designs hinterlegt Man kann bspw
- ein eigenes Design kreieren, welches sich in gewünschter Weise darstellt, jedoch auf das Standard- oder ein anderes Eltern-Design zurückgreift, wenn die Moodle die benötigten Anweisungen nicht findet
So verwendet z.B
- das Chameleon-Design in der config.php das Verzeichnis moodle/theme/chameleon/pix, um daraus seine Bilder zu beziehen
- Das Formal White-Design hingegen verwendet dazu das Verzeichnis moodle/pix - und genau dies wird in der config.php festgelegt
Die Stylesheets[Bearbeiten | Quelltext bearbeiten]
Cascading Style Sheets (CSS) werden verwendet, um Inhalte von deren Darstellung zu trennen - Ziele sind mehr Flexibilität, Barrierefreiheit und ein flexibleres Seitendesign
- Die Veränderung einer Elementdefinition verändert dessen Darstellung seitenweit
- Die CSS-Dateien werden gemäß ihrer Funktion in drei Dateien aufgeteilt:
Darüberhinaus existiert noch die CSS styles_moz.css, welche Mozilla- und Firefox-spezifische Anordnungen enthält, insbesonders die gerundeten Ecken
Zusätzliche Dateien[Bearbeiten | Quelltext bearbeiten]
Zu guter Letzt können Designentwickler Informationen und auch ein Vorschaubild des Designs hinterlegen
- Das Vorschaubild findet Verwendung in der Design-Auswahlseite des Administrators
- Die Angaben der Readme werden nach der Auswahl eines Designs angezeigt
README.html screenshot.jpg
Trennung von Inhalt und Darstellung[Bearbeiten | Quelltext bearbeiten]
Der Inhalt einer Seite ist mittels XHTML repräsentiert, die Darstellung mittels CSS
- Die Verbindung zwischen der darzustellenden Information der Seite und der Darstellung an sich wird über das Ansprechen der XHTML-Tags und namentlich definierter Klassen durch CSS realisiert
- Man kann sich vorstellen, dass es innerhalb einer solch komplexen Software wie Moodle davon einige bedarf
Kaskadierendes CSS[Bearbeiten | Quelltext bearbeiten]
Moodle Designs verwenden CSS Stylesheets, um die Darstellung zu definieren, genauer gesagt Layout, Schrift und Farben
- Diese Anweisungen werden duch ein PHP-Skript namens "styles.php" zusammengestellt und die Darstellung durch eine Datei namens "config.php" kontrolliert
- Beide Dateien befinden sich im Wurzelverzeichnis des jeweiligen Designs
Moodle verfügt über ein relativ klar strukturiertes "Standard"-Design, welches eine Layoutgrundlage für weitere Designs darstellt
- Wenn ein Darstellungselement in einem Design nicht definiert ist, greift Moodle auf die Definition des Standard-Designs zurück
- In diesem Sinne kann auch für jedes Design ein Eltern-Design definiert werden, dessen Darstellungsanweisungen vor dem eigentlichen Design eingebunden und ausgeführt werden
- Sind somit im "Kind"-Design Darstellungselemente nicht definiert, kommen die Anweisungen des Eltern-Designs zur Anwendung
D.h
- es könnten bis zu 3 Designs das eigentliche Design Ihrer Moodle-Instanz begründen:
- "Standard"-Design - theme/standard/styles.php
- "Eltern"-Design - theme/parenttheme/styles.php
- "eigentliches" Design - theme/yourtheme/styles.php
Dank des kaskadierenden Charakters von CSS überschreiben Anweisungen in später inkludierten Dateien die zuvor hinterlegten Anweisungen
- Moodle macht von dieser Möglichkeit reichlich Gebrauch und liefert dem Designentwickler viele Möglichkeiten
- Angefangen von kleiner Modifikation bestehender Designs bis zu einer komplexen neuartigen Bestimmung des Aussehens mittels eigener CSS-Dateien
Designentwickler können CSS-Stylesheets neu definieren und hinzufügen sowie diese nach eigenem Gutdünken benennen
Das "Standard"-Design[Bearbeiten | Quelltext bearbeiten]
Abb. 1: Das "Standard"-Design mit den CSS-Dateien "styles_layout.css", "styles_fonts.css", "styles_color.css" und "styles_moz.css"
Kleine Anpassungen[Bearbeiten | Quelltext bearbeiten]
Wenn Sie nur kleine Anpassungen an einem Design vornehmen wollen, wie bspw
- andere Farben oder ein anderes Logo, verwenden Sie das "Standard"-Design und definieren Sie die von Ihnen benötigten Änderungen in einer weiteren CSS-Datei
Betrachten Sie als Beispiel das Design "Standardwhite"
Es verwendet die Datei "config.php" zum Setzen der geeigneten Einstellungen
- Der erste Eintrag
$THEME->sheets = array('gradients');
definiert die CSS-Datei "gradients.css" als eine weitere Datei mit CSS-Anweisungen
- Weiter werden mit der Anweisung
$THEME->standardsheets = true;
alle sonstigen Styles des "Standard"-Designs herangezogen
Sie könnten auch anstelle des "Standard"-Designs auf ein anderes Design referenzieren:
$THEME->parent = 'cooltheme';
Gemischtes CSS - Das "Standard"-Design mit eigenen Schriften und Farben[Bearbeiten | Quelltext bearbeiten]
Das Design "formal_white" verbindet das Seitenlayout des "Standard"-Designs mit seinem eigenen Layout, Schriften und Farben
- Auf diese Weise werden alle Layout-Anweisungen des "Standard"-Designs behalten
- Ermöglicht wird dies durch die Anweisung
$THEME->sheets = array('fw_layout','fw_color','fw_fonts');
und$THEME->standardsheets = array('styles_layout');
in der "config.php"-Datei des Design-Verzeichnisses
Abb. 3: Das Design "formal_white" mit der CSS-Datei "styles_layout.css" des "Standard"-Designs sowie den eigenen Stylesheets "fw_layout.css", "fw_fonts.css", "fw_color.css"
Einbeziehung eines "Eltern"-Designs (gestelltes Beispiel)[Bearbeiten | Quelltext bearbeiten]
Eine fortgeschrittene Technik ist der Einsatz jeglichen vorhandenen Designs als "Eltern"-Design und dieses dann zu variieren
- Eine Möglichkeit wäre, ein "Eltern"-Design mit allen notwendigen CSS-Anweisungen bereitzustellen
- Mögliche "Kind"-Designs könnten dem Nutzer z.B
- den Einsatz seiner eigenen Farbpräferenz ermöglichen
- Dies kann mittels einer einzigen CSS-Datei realisiert werden, welche die Farbvariationen ausweist
Eine weitere Möglichkeit wären Variationen des Logos der Seiten, die sich in der "header.html" befinden
- Hier wäre nicht einmal ein weiteres CSS nötig
Die Konfiguration des "Kind"-Designs könnte in etwa so aussehen:
$THEME->sheets = array('my_layout');
,
$THEME->parent = 'formal_white';
und
$THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');
Abb. 4: Das beispielhafte "formal_white_plus" mit der zusätzlichen CSS-Datei "my_layout.css"
Ein Design ohne Abhängigkeit vom "Standard"-Design (gestelltes Beispiel)[Bearbeiten | Quelltext bearbeiten]
Ein solches Design würde sein eigenes CSS verwenden
- Die Einstellung
$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color');
und $THEME->standardsheets = false;
deaktivieren den Rückgriff auf alle anderen Moodle-CSS-Dateien
- Etwaige Veränderung an den Dateien des "Standard"-Designverzeichnisses würden das vorliegende Design in keinster Weise verändern
Abb. 5: Das Design mit den eigenen CSS-Dateien "styles_layout.css", "styles_fonts.css" und "styles_color.css"
Weitere grundlegende CSS-Dateien[Bearbeiten | Quelltext bearbeiten]
Zusätzlich zu den CSS-Dateien des Designs unterstützt Moodle auch grundlegende CSS-Anweisungen für Module, Blöcke und sogar für verschiedene Sprachen
- Entwickler können solche CSS-Anweisungen hinterlegen, damit ihre Module und Blöcke in der gewünschten Art und Weise dargestellt werden - bspw
- um spezielle Funktionalitäten optisch zu gestalten
- Das Gesamtdesign von Moodle wird dadurch nicht beeinflusst
Solche Dateien werden jedoch nur eingebunden, wenn das "Standard"-Design aktiviert ist
- Sie werden vor allen anderen CSS-Dateien eingebunden
Abb. 6: Die Einbindungsreihenfolge der CSS-Dateien durch Moodle
Siehe auch[Bearbeiten | Quelltext bearbeiten]
Hier sehen Sie die Wirkung verschiedener CSS-Dateien auf das Aussehen der Seite
- Oben rechts sehen Sie vier Links vor grünem Hintergrund
- Mit diesen Schaltflächen können sie bestimmte Styles deaktivieren (kursive Schrift) oder aktivieren (normale Schrift)
- Wenn Sie alle Styles deaktivieren, wird der unformatierte Inhalt angezeigt
- Datenbank verfügbarer Moodle-Designs
- Moodle Design-Galerie
- Zen Garden, auch verfügbar in verschiedenen Sprachen
Werkzeuge[Bearbeiten | Quelltext bearbeiten]
Anhang[Bearbeiten | Quelltext bearbeiten]
Siehe auch[Bearbeiten | Quelltext bearbeiten]
Links[Bearbeiten | Quelltext bearbeiten]
Weblinks[Bearbeiten | Quelltext bearbeiten]