Designs FAQ

Wie installiere ich ein neues Design?

1. Entpacken Sie die .zip Datei des Designs lokal in einem leeren Verzeichnis.
2. Laden Sie dieses Verzeichnis in das Verzeichnis moodle/theme/[Design-Name] auf den Moodle-Server hoch (ersetzen Sie [Design-Name] durch den Namen des Designs, das Sie installieren wollen). Stellen Sie sicher dass dieses Verzeichnis auf dem Moodle-Server für den Webserver-Nutzer les- und schreibbar ist (chmod 755 - Besitzer: read/write/execute, Gruppe: read/execute, Alle: read/execute). Falsche Dateirechte können dazu führen, dass das Design nicht dargestellt wird.
3. Wählen Sie das neue Design in Moodle aus: Einstellungen > Website-Administration > Darstellung > Designs > Design-Auswahl.

Wie installiere ich ein neues Design mittels cPanel?

1. Laden Sie die .zip Datei des Designs mittels cPanel auf Ihren Moodle-Server hoch.
2. Entpacken Sie mittels cPanel das neue Design im Verzeichnis /moodle/theme. Es wird ein Unterverzeichnis /moodle/theme/[newtheme] erzeugt, wobei [newtheme] der name des neuen Designs ist.
3. Stellen Sie sicher dass dieses Verzeichnis auf dem Moodle-Server für den Webserver-Nutzer les- und schreibbar ist (chmod 755 - Besitzer: read/write/execute, Gruppe: read/execute, Alle: read/execute). Falsche Dateirechte können dazu führen, dass das Design nicht dargestellt wird.
4. Wählen Sie das neue Design in Moodle aus: Einstellungen > Website-Administration > Darstellung > Designs > Design-Auswahl.

Warum erscheint das neu installierte Design nicht in der Design-Auswahl von Moodle?

Sie haben vermutlich irgend etwas bei der Installation übersehen. Im folgenden wird beschrieben, wie Sie ein neues Design aus dem vorhandenen Standard-Design erzeugen:

1. Kopieren Sie das Verzeichnis /moodle/theme/standard und nennen Sie das kopierte Verzeichnis /moodle/theme/new.
2. Im Verzeichnis /moodle/theme/new/lang/en benennen Sie die Datei theme_standard.php um in theme_new.php.
3. Öffnen Sie die Datei /moodle/theme/new/lang/en/new.php und ändern Sie folgende zwei Zeilen:
   1. $string['pluginname'] = 'Neues Design - Martin D';
   2. $string['choosereadme'] = 'Neues Design ist eine Kopie des Standard-Designs und wurde von Martin D im Jahr 2011 geändert';
   3. Speichern Sie die Änderungen.
4. In der Datei /moodle/theme/new/config.php ändern Sie die Variable $THEME->NAME = 'new'.
5. In der Datei /moodle/theme/new/version.php ändern Sie die Variable $plugin->component = 'theme_new'.
6. Gehen Sie auf die Seite Einstellungen > Website-Administration > Darstellung > Designs > Einstellungen und markieren Sie die Checkbox Designbearbeitungsmodus. Speichern Sie die Änderung.
7. Gehen Sie auf die Seite Einstellungen > Website-Administration > Darstellung > Designs > Design-Auswahl.
   1. Klicken Sie auf den Button Design-Cache löschen.
   2. Wählen Sie das neue Design aus.

Wie beschränke ich die Design-Auswahl für Nutzer/innen und Kurse?

1. Gehen Sie auf die Seite Einstellungen > Website-Administration > Darstellung > Designs > Einstellungen.
2. Tragen Sie die Namen der Designs, die Sie für Nutzer/innen und Kurse zur Verfügung stellen wollen, im Textfeld Designliste ein.

Wie erstelle ich ein eigenes Design?

Siehe Theme development - Entwickler-Dokumentation.

Kann ich einen Kurs in einem bestimmten Design darstellen?

Ja. In den Kurseinstellungen können Sie bei der Option Festgelegtes Design ein Design auswählen.

Voraussetzung dafür ist, dass die Moodle-Administration auf der Seite Einstellungen > Website-Administration > Darstellung > Designs > Einstellungen die Checkbox Kursdesigns erlauben markiert hat.

Wie erreiche ich, dass die Links in meinen angepassten Menüelementen in einem neuen Fenster geöffnet werden?

Sie können eigene Menüs erstellen, die in der Kopfzeile jeder Moodle-Seite angezeigt werden. Gehen Sie dazu auf die Seite Einstellungen > Website-Administration > Darstellung > Designs > Einstellungen und nehmen Sie Ihre Einträge im Textbereich Angepasste Menüelemente vor (unter dem Textbereich ist ein Codebeispiel angegeben, das die richtige Syntax zeigt).

Wenn Sie möchten, dass die Links, die Sie in Ihrem angepassten Menü definieren, in einem neuen Fenster geöffnet werden, dann verwenden Sie folgenden Code:

   Moodle|http://www.moodle.org" target="_blank"

Wo trage ich meinen eigenen CSS Code ein?

Im Standardpaket von Moodle können Sie bei folgenden Designs eigenes CSS einfügen: Afterburner, Arialist, Formal White, Fusion, Nonzero, Overlay, Sky High und Splash. Gehen Sie dazu auf die Seite Einstellungen > Website-Administration > Darstellung > Designs > Design X und tragen Sie Ihren CSS-Code im Textbereich Eigenes CSS ein.

Bei allen anderen Designs aus dem Moodle-Standardpaket können Sie kein eigenes CSS einfügen.

Alternativ können Sie Ihren CSS-Code in eine separate CSS-Datei packen und diese Datei in der Konfigurationsdatei des Designs /moodle/theme/design_X/config.php eintragen. Stellen Sie sicher, dass Sie Ihre eigene CSS-Datei als Letzte in der Liste der zu ladenden CSS-Dateien eintragen, damit Ihr CSS die ursprünglichen Styles überschreibt. Siehe auch diesen Diskussionsbeitrag: detailed instructions.

Verliere ich meine Kurse, Sprachdateien, mein Logo usw., wenn ich das Design wechsele?

Nein. Das Wechseln des Designs ändert nur das Aussehen der Moodle-Site, also die Art und Weise, wie Inhalte dargestellt werden, aber nicht die Inhalte selbst. Eine Einschränkung gilt jedoch: Das Logo ist Bestandteil des Designs und geht daher beim Wechseln verloren.

Wie Sie ein Logo zu einem Design hinzufügen ist in der Entwickler-Dokumentation beschrieben: add a logo.

Wenn Sie ein vorhandenes Design angepasst haben (also den Code verändert haben), dann gehen diese Änderungen bei der Aktualisierung von Moodle verloren. Deshalb ist es eine gute Idee, Änderungen immer in einem eigenen Design vorzunehmen - dieses kann auch in der aktualisierten Moodle-Version wieder verwendet werden (es sei denn, es gab grundlegende Änderungen bei der Implementierung von Designs).

Ich habe keinen Zugriffauf das /moodle/theme Verzeichnis auf dem Server. Kann ich trotzdem ein Logo einfügen?

Ja. Esgibt zwei Möglichkeiten:

• Entweder Sie laden das Logo auf einem anderen, öffentlich zugänglichen Webserver hoch und kopieren dann die URL des Logos in das Textfeld Logo auf der Einstellungsseite des Designs (z.B. bei Afterburner: Einstellungen > Website-Administration > Darstellung > Designs > Afterburner) oder
• Sie fügen den Hauptmenü-Block auf der Moodle-Startseite ein, laden Ihr Logo dort über Arbeitsmaterial hinzufügen hoch und kopieren dann die URL des Logos wie oben beschrieben. Anschließend können Sie den Block sogar verbergen oder ganz löschen.

Welche Werkzeuge helfen bei der Erstellung und Bearbeitung von Designs?

Button Cache löschen

Das ist eine nützliche Firefox-Erweiterung. Sie ergänzt ein Cache-Löschen-Symbol in der Symbolleiste des Browsers, so dass Sie während der Design-Entwicklung "mit einem Klick" den Browser-Cache löschen können. Siehe https://addons.mozilla.org/de/firefox/addon/1801.

Hinweis: Beachten Sie, dass die folgenden Werkzeuge nur für die Entwicklung gedacht sind. Sie ändern nur die Art, wie Sie Ihre Moodle-Site sehen, nicht die Moodle-Site selbst. Alle Änderungen, die Sie mit Hilfe dieser Werkzeuge vornehmen, sind nur für Sie sichtbar. Wenn Sie die Änderungen permanent machen wollen, müssen Sie stattdessen die CSS-Dateien Ihres Designs anpassen.

Firebug

Eines der nützlichsten Werkzeuge ist der Firebug - eine Firefox-Erweiterung. Der Firebug kann in den Firefox integriert werden und fügt eine Reihe von Entwicklungswerkzeugen zum Browser hinzu. Damit können Sie CSS, HTML und JavaScript direkt auf der Webseite bearbeiten, debuggen oder ansehen. Darüber hinaus gibt es weitere Erweiterungen, die den Firebug noch leistungsfähiger machen.

Firebug-Erweiterungen

Siehe Firebug für weitere Informationen.

Web Developer Toolbar

Ein weiteres großartiges Werkzeug ist die Firefox-Erweiterung Web Developer Extension. Eine sehr nützliche Funktionalität ist dort die Möglichkeit, den Browser-Cache zu deaktivieren, während Sie Ihr Design entwickeln. Dadurch stellen Sie sicher, dass alle Änderungen sofort wirksam und sichtbar werden.

Dieses Werkzeug ist jetzt auch für den Google Chrome Browser verfügbar: "The Web Developer Toolbar Comes to Chrome".

Stylish

Änderungen, die Sie mit dem Firebug machen, gehen verloren, wenn Sie Ihre Seite neu laden. Wenn Sie Ihre CSS-Änderungen "ein bisschen mehr permanent" machen möchten (um sie z.B. auf verschiedenen Seiten zu testen), dann können Sie diese Firefox-Erweiterung nutzen: Stylish.

Siehe Stylish für detaillierte Instruktionen und Beispiele.

Stylish-Custom

Es gibt eine Erweiterung zur Stylish-Extension, die einige Funktionalitäten von der Version 0.5.9 wieder enthält und neue Funktionalitäten hinzufügt.

Wie prüfe ich, ob mein Design browser-kompatibel ist?

Es gibt einige Werzeuge, die zeigen, wie Ihre Moodle-Site in verschiedenen Browsern dargestellt wird. Detaillierte Informationen finden Sie in diesem Diskussion. Beachten Sie auch die geräte-spezifischen Einstellungen bei den Design-Einstellungen, die es erlauben, angepasste Designs für doiese Browser zu erstellen.

Wie werden Gerätetypen in Moodle 2.2 verwendet?

Wenn die Option Geräteerkennung in den Design-Einstellungen aktiviert ist, dann verwendet Moodle 2.2. automatisch das Design, das für einen bestimmten Gerätetyp ausgewählt wurde, sobald Nutzer/innen mit diesem Gerätetyp auf Moodle zugreifen.

Beispiele für Anpassungen in Moodle-Designs

Die folgenden Beispiele entstammen Beiträgen aus der Entwickler-Dokumentation und der Moodle-Community und liegen deshalb in englisch vor.

Dinge ändern

Farben

• dev:Forcing the colour of the chat discussion pane (pop-up mode)
• Changing background colour of a topic box
• How to change the colour of the popup event's header and background

Logo und Symbole

• Using an alternate icon set in Moodle
• Change the favicon that shows in front of the web address
• Replace the logo in the header

Layout

• Overriding the $menu / $button variables mittels regulärer Ausdrücke in header.html
• Changing the view of course categories - in Arbeit
• Sub categories and courses layout - in Arbeit
• Tracker 'components' list too small

Dinge hinzufügen

• How to add a different img-bullet to each category?

Dinge verbergen

• Das Verbergen eines Elements mit CSS erfolgt generell durch das Attribut none für dieses Element: display: none;.
• Siehe dev:Print style und dev:Stylish#Print style for Database records wie man Teile einer Seite verbirgt, die nicht zum Ausdrucken gedacht sind.

Dinge verschieben

• Centre smaller forum posts on the page
• Positioning the page footer
• Left align quiz questions and answers
• Indentation for nested categories
• Positioning login and choose language field
• Match question type - position answers nearer to the questions
• dev:Stylish#Fixed admin menue with CSS

Verschiedenes

• Creating a fixed-width theme
• Is there a way to fix oversized HTML Editor using CSS?
• Modifying the design of specific categories with CSS

Wie kann ich Design-Änderungen sehen, wenn ich das Windows Complete Installer Package verwende?

Beim Windows Complete Installer Package kann es passieren, dass der eAccelerator in der XAMPP-Installation Probleme bei der Darstellung der CSS- und HTML-Dateien Ihres Designs verursacht.

Öffnen Sie die PHP-Konfigurationsdatei /server/php/php.ini in einem Editor und suchen Sie nach "eAccelerator". Sie sollten folgende Zeile finden:

   extension=eaccelerator.dll

Ergänzen Sie in dieser Zeile vorn ein Semikolon (dadurch wird die Zeile auskommentiert), so dass die geänderte Zeile lautet: Insert a semi-colon (turns the line into a comment) at the start of this line so it now reads:

   ;extension=eaccelerator.dll

Starten Sie den Moodle-Server neu, indem Sie die Programme "stop moodle" und dann "start moodle" aus dem /server Verezichnis aufrufen. Danach sollten alle CSS Änderungen sichtbar werden, evtl. müssen Sie noch den Browser-Cache löschen (meistens geht das mit der Taste F5). Siehe auch diesen Diskussionsbeitrag Deactivating caching with XAMPP installations

Siehe auch

• Themes forum - Diskussionsforum im Kurs Using Moodle auf moodle.org
• CSS FAQ - Entwickler-Doku
• "Understanding Moodle Themes" - Blogbeitrag von Christopher Douce (Open University)
• Testing 2.0. Use for modern vs old browsers - Diskussionsbeitrag im Kurs Using Moodle auf moodle.org