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

Designs FAQ: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(14 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Designs}}
{{Designs}}


{{Zum Übersetzen}}
==Wie installiere ich ein neues Design?==
==Wie installiere ich ein neues Design?==


Zeile 21: Zeile 20:
#Im Verzeichnis ''/moodle/theme/new/lang/en'' benennen Sie die Datei ''theme_standard.php'' um in ''theme_new.php''.
#Im Verzeichnis ''/moodle/theme/new/lang/en'' benennen Sie die Datei ''theme_standard.php'' um in ''theme_new.php''.
#Öffnen Sie die Datei ''/moodle/theme/new/lang/en/new.php'' und ändern Sie folgende zwei Zeilen:
#Öffnen Sie die Datei ''/moodle/theme/new/lang/en/new.php'' und ändern Sie folgende zwei Zeilen:
##$string['pluginname'] = 'Neues Design - Martin D';  
##<code>$string['pluginname'] = 'Neues Design - Martin D';</code>
##$string['choosereadme'] = 'Neues Design ist eine Kopie des Standard-Designs und wurde von Martin D im Jahr 2011 geändert';
##<code>$string['choosereadme'] = 'Neues Design ist eine Kopie des Standard-Designs und wurde von Martin D im Jahr 2011 geändert';</code>
##Speichern Sie die Änderungen.
##Speichern Sie die Änderungen.
#In der Datei ''/moodle/theme/new/config.php'' ändern Sie die Variable <code>$THEME->NAME  = 'new'</code>.
#In der Datei ''/moodle/theme/new/config.php'' ändern Sie die Variable <code>$THEME->NAME  = 'new'</code>.
Zeile 45: Zeile 44:
Voraussetzung dafür ist, dass die Moodle-Administration auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Einstellungen'' die Checkbox ''Kursdesigns erlauben'' markiert hat.
Voraussetzung dafür ist, dass die Moodle-Administration auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Einstellungen'' die Checkbox ''Kursdesigns erlauben'' markiert hat.


==Wie erreiche ich, dass in meinem selbsterstellten Design Links in einem neuen Fenster geöffnet werden?==
==Wie erreiche ich, dass die Links in meinen angepassten Menüelementen in einem neuen Fenster geöffnet werden?==
It is possible to create your own fly out menu via the custom menu block in Settings>Site administration>Appearance>Themes>Theme settings. Copy the examples given below the box. If you want the links to open in a new window, use the following code:
Sie können eigene Menüs erstellen, die in der Kopfzeile jeder Moodle-Seite angezeigt werden. Gehen Sie dazu auf die Seite ''[[Einstellungen-Block|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).
Moodle|http://www.moodle.org" target="_blank"


== Where shall I put my custom CSS code? ==
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"


Note that the standard themes Afterburner, Arialist, Formal White, Fusion, Nonzero, Overlay, Sky High and Splash all offer the possibility to add custom CSS in their page settings via ''Settings>Appearance>Themes>''.
== 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-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Design X''  und tragen Sie Ihren CSS-Code im Textbereich ''Eigenes CSS'' ein.


Failing this, instead of modifying the theme's CSS files you better put your own code in a separate CSS file and make your theme aware of that file by modifying its config.php file (be sure add your own CSS file as the last one in the list so that you will override all prior settings). See this posting for [http://moodle.org/mod/forum/discuss.php?d=128599#p564055 detailed instructions].  
Bei allen anderen Designs aus dem Moodle-Standardpaket können Sie kein eigenes CSS einfügen.


See also the instructions on creating your own theme mentioned above.
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: [http://moodle.org/mod/forum/discuss.php?d=128599#p564055 detailed instructions].  


==Will I lose my courses, language files, logo, etc. if I switch my theme?==
== Verliere ich meine Kurse, Sprachdateien, mein Logo usw., wenn ich das Design wechsele?==
Switching themes only changes the appearance of your site, not the content within it. The logo is a part of the theme and will be lost when you switch.  
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.


Follow these instructions to [[:dev:Creating_a_custom_theme#Adding_a_Logo|add a logo]] to a theme.
Wie Sie ein Logo zu einem Design hinzufügen ist in der Entwickler-Dokumentation beschrieben: [[:dev:Creating_a_custom_theme#Adding_a_Logo|add a logo]].
:If you upgrade your Moodle site and tweaked an existing standard theme, you will lose your changes. Thus it is a good idea to create a custom theme which will not be changed when you upgrade.


==I can't access theme files on the server. Can I still add a logo to a theme?==
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).
Yes. You have two choices:
**Either upload your logo to another place publicly available online and then copy the image's URL to paste into the logo field of the theme page you are editing (such as Afterburner)
**Or add the main menu block to your front page; upload the logo via Main menu>Add a resource. Get its URL and paste it into the logo field of the theme page you are editing. You can safely then hide or delete the main menu block; the logo will still be there. (''NOTE'' - your logo will appear in ''Navigation>Site pages'' as well.)


== Are there tools which help me creating and editing themes? ==
==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-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Afterburner'') oder
*Sie fügen den [[Hauptmenü|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.


=== Clear Cache Button ===
==Welche Werkzeuge helfen bei der Erstellung und Bearbeitung von Designs? ==
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


<p class="note">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.</p>
=== 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 ===
=== Firebug ===
The single most useful tool is the [[:dev:Firebug|Firebug]] add-on for the [[:dev:Firefox|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.
Eines der nützlichsten Werkzeuge ist der [[:dev:Firebug|Firebug]] - eine [[:dev:Firefox|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 enhancements ====
==== Firebug-Erweiterungen ====
You can enhance Firebug even further. See [[:dev:Firebug|Firebug]] for more information.
Siehe [[:dev:Firebug|Firebug]] für weitere Informationen.


=== Web Developer Toolbar ===
=== Web Developer Toolbar ===
Another great tool for any web developer is the [[:dev:Web developer extension|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.
Ein weiteres großartiges Werkzeug ist die Firefox-Erweiterung [[:dev:Web developer extension|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.


Now also available for Google's Chrome browser: [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"]
Dieses Werkzeug ist jetzt auch für den Google Chrome Browser verfügbar: [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"].


=== Stylish ===
=== 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: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. That way you can change your site's CSS with a simple mouse click without having to change Moodle code.
Ä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: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish].  


See [[:dev:Stylish|Stylish]] for detailed instructions and examples.
Siehe [[:dev:Stylish|Stylish]] für detaillierte Instruktionen und Beispiele.


==== Stylish-Custom ====
==== Stylish-Custom ====
This is an [https://addons.mozilla.org/en-US/firefox/addon/12105/ custom additions] to the Stylish extension which brings back features from 0.5.9 and adds new features.
Es gibt eine [https://addons.mozilla.org/en-US/firefox/addon/12105/ Erweiterung] zur Stylish-Extension, die einige Funktionalitäten von der Version 0.5.9 wieder enthält und neue Funktionalitäten hinzufügt.
 
== 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 [http://moodle.org/mod/forum/discuss.php?d=127746 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 ?==
== Wie prüfe ich, ob mein Design browser-kompatibel ist? ==
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 [[Standard themes|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.  
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.


Site administrators can find these enable device detection settings in Site administration > Appearance >Themes > [[Theme settings]] .
==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 [[Standard-Designs|ausgewählt]] wurde, sobald Nutzer/innen mit diesem Gerätetyp auf Moodle zugreifen.


== Concrete examples for modifying Moodle themes ==
== Beispiele für Anpassungen in Moodle-Designs ==
<p class="note">
Die folgenden Beispiele entstammen Beiträgen aus der Entwickler-Dokumentation und der Moodle-Community und liegen deshalb in englisch vor.
The following examples were taken from the former ''Theme Scrapbook'':
<br />
"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.
<br />
Feel free to add to this list! Don't know how? Read our [[MoodleDocs:Guidelines_for_contributors|Guidelines for contributors]]."
</p>


=== Changing things ===
=== Dinge ändern ===


==== Colors ====
==== Farben ====
* [[:dev:Forcing the colour of the chat discussion pane (pop-up mode)]]
* [[:dev:Forcing the colour of the chat discussion pane (pop-up mode)]]
* [http://moodle.org/mod/forum/discuss.php?d=142765 Changing background colour of a topic box]
* [http://moodle.org/mod/forum/discuss.php?d=142765 Changing background colour of a topic box]
* [http://moodle.org/mod/forum/discuss.php?d=152357 How to change the colour of the popup event's header and background]
* [http://moodle.org/mod/forum/discuss.php?d=152357 How to change the colour of the popup event's header and background]


==== Logo and icons ====
==== Logo und Symbole====
* [[:dev:Alternate Icon Set|Using an alternate icon set in Moodle]]
* [[:dev:Alternate Icon Set|Using an alternate icon set in Moodle]]
* [[Favicon|Change the favicon that shows in front of the web address]]
* [[Favicon|Change the favicon that shows in front of the web address]]
* [[Footer replacement|Replace the logo in the footer with your web address and/or or own logo]]
* [[:dev:Header logo|Replace the logo in the header]]
*[[:dev:Header logo|Replace the logo in the header]]


==== Layout ====
==== Layout ====
* [http://moodle.org/mod/forum/discuss.php?d=136546 Overriding the $menu / $button variables] using PHP regular expressions in header.html
* [http://moodle.org/mod/forum/discuss.php?d=136546 Overriding the $menu / $button variables] mittels regulärer Ausdrücke in ''header.html''
* [http://moodle.org/mod/forum/discuss.php?d=143411 Changing the view of course categories] - work in progress
* [http://moodle.org/mod/forum/discuss.php?d=143411 Changing the view of course categories] - in Arbeit
* [http://moodle.org/mod/forum/discuss.php?d=145077 Sub categories and courses layout] - work in progress
* [http://moodle.org/mod/forum/discuss.php?d=145077 Sub categories and courses layout] - in Arbeit
* [http://moodle.org/mod/forum/discuss.php?d=151370 Tracker 'components' list too small]
* [http://moodle.org/mod/forum/discuss.php?d=151370 Tracker 'components' list too small]


=== Adding things ===
=== Dinge hinzufügen ===
* [http://moodle.org/mod/forum/discuss.php?d=157935 How to add a different img-bullet to each category?]
* [http://moodle.org/mod/forum/discuss.php?d=157935 How to add a different img-bullet to each category?]


=== Hiding things ===
=== Dinge verbergen ===
* Hiding an element with CSS is generally achieved using the [http://reference.sitepoint.com/css/display display: none;] property on the element.
* Das Verbergen eines Elements mit CSS erfolgt generell durch das Attribut <code>none</code> für dieses Element: [http://reference.sitepoint.com/css/display display: none;].
* See [[:dev:Print style]] and [[:dev:Stylish#Print style for Database records]] for an example how to hide parts of a page not meant for printing.
* Siehe [[:dev:Print style]] und [[:dev:Stylish#Print style for Database records]] wie man Teile einer Seite verbirgt, die nicht zum Ausdrucken gedacht sind.


=== Moving things ===
=== Dinge verschieben ===
* [[:dev:Center Forum Posts|Centre smaller forum posts on the page]]
* [[:dev:Center Forum Posts|Centre smaller forum posts on the page]]
* [[:dev:Footer positioning|Positioning the page footer]]
* [[:dev:Footer positioning|Positioning the page footer]]
Zeile 146: Zeile 138:
* [[:dev:Stylish#Fixed admin menue with CSS]]
* [[:dev:Stylish#Fixed admin menue with CSS]]


=== Miscellaneous ===
=== Verschiedenes===
* [[:dev:Fixed-width theme|Creating a fixed-width theme]]
* [[:dev:Fixed-width theme|Creating a fixed-width theme]]
* [http://moodle.org/mod/forum/discuss.php?d=146763 Is there a way to fix oversized HTML Editor using CSS?]
* [http://moodle.org/mod/forum/discuss.php?d=146763 Is there a way to fix oversized HTML Editor using CSS?]
* [[:dev:Category Design|Modifying the design of specific categories with CSS]]
* [[:dev:Category Design|Modifying the design of specific categories with CSS]]


==How can I see theme changes when using the Windows Complete Installer package==
==Wie kann ich Design-Änderungen sehen, wenn ich das Windows Complete Installer Package verwende?==
In the [http://download.moodle.org/windows/ 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.
Beim [http://download.moodle.org/windows/ 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.


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:  
Ö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
    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:  
Insert a semi-colon (turns the line into a comment) at the start of this line so it now reads:  
;extension=eaccelerator.dll
    ;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 [http://moodle.org/mod/forum/discuss.php?d=151562#p663950 Deactivating caching with XAMPP installations]
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 [http://moodle.org/mod/forum/discuss.php?d=151562#p663950 Deactivating caching with XAMPP installations]


== Siehe auch ==
== Siehe auch ==

Aktuelle Version vom 14. Juni 2012, 15:14 Uhr


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

Logo und Symbole

Layout

Dinge hinzufügen

Dinge verbergen

Dinge verschieben

Verschiedenes

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