Moodle/Design/old
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]