Hinweis: Sie sind auf den Seiten der Moodle 2.7 Dokumentation. Die Dokumentation der aktuellsten Moodle-Version finden Sie hier: Designs FAQ.

Designs FAQ

Aus MoodleDocs
Wechseln zu:Navigation, Suche
Hauptseite ► Moodle administrieren ► Darstellung ► Designs ► Designs FAQ
Designs


Baustelle.png Diese Seite ist noch nicht vollständig übersetzt.

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.

Are there tools which help me creating and editing themes?

Clear Cache Button

This useful Firefox add-on let's you add a button to your tool bar for easily clearing your cache while working on your theme: https://addons.mozilla.org/de/firefox/addon/1801

Please note that the following tools are only for development. They only change the way you see your Moodle site, not the Moodle site itself. Any changes you make using these tools will not be visible to anyone else who uses your site. For this you will have to make those changes permanent by changing your theme's CSS files for example.

Firebug

The single most useful tool is the Firebug add-on for the Firefox web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... And there are additional add-ons for making Firebug an even more powerful tool.

Firebug enhancements

You can enhance Firebug even further. See Firebug for more information.

Web Developer Toolbar

Another great tool for any web developer is the Web developer extension, another Firefox add-on. One very useful feature is the option to disable your browser's cache while working on your theme. That way you are sure you're always presented with your latest modifications and not with an older, cached version.

Now also available for Google's Chrome browser: "The Web Developer Toolbar Comes to Chrome"

Stylish

Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: Stylish. That way you can change your site's CSS with a simple mouse click without having to change Moodle code.

See Stylish for detailed instructions and examples.

Stylish-Custom

This is an custom additions to the Stylish extension which brings back features from 0.5.9 and adds new features.

How do I check for cross-browser compatibility?

There are some tools (standalone and online) which can show you how your site looks in different browsers. See this forum discussion for details. See the new device detection settings in Theme settings which will allow you to create a theme for those "special" browsers.

How are the device types used in Moodle 2.2 ?

If "Enabled device detection" has been turned on, Moodle 2.2 will automatically use the theme which has been set for the device in the Theme selector settings page. It is also possible to add additional types to the Theme selector page by using the "device detection regular expressions" fields.

Site administrators can find these enable device detection settings in Site administration > Appearance >Themes > Theme settings .

Concrete examples for modifying Moodle themes

The following examples were taken from the former Theme Scrapbook:
"The Moodle Theme Scrapbook is a collection of small how-to descriptions. You theme designers and Moodle users working with themes add your knowledge here to help new Moodle users with tips and tricks for their theme work.
Feel free to add to this list! Don't know how? Read our Guidelines for contributors."

Changing things

Colors

Logo and icons

Layout

Adding things

Hiding things

Moving things

Miscellaneous

How can I see theme changes when using the Windows Complete Installer package

In the Windows Complete Installer package, the eAccelerator in the XAMPP install can cause some issues with changes to your theme's CSS and HTML files from showing.

Open the php.ini file inside of the server\php folder from your install in notepad and search for "eAccelerator" you should see a line that reads: 

extension=eaccelerator.dll

Insert a semi-colon (turns the line into a comment) at the start of this line so it now reads: 

;extension=eaccelerator.dll

Restart the Moodle server using the "stop moodle" and then the "start moodle" programs in your server folder. You should now find that all of your changes to your CSS are reflected as soon as you save the file and refresh your browser cache (usually you can refresh your cache by pressing F5). This FAQ from a discussion at Deactivating caching with XAMPP installations

Siehe auch

Abgerufen von „https://docs.moodle.org/27/de/index.php?title=Designs_FAQ&oldid=7545“
Powered by MediaWiki