Designs FAQ: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
 
(7 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Designs}}
{{Designs}}
{{Zum Übersetzen}}
==Wie installiere ich ein neues Design?==
==Wie installiere ich ein neues Design?==


# Entpacken Sie die .zip Datei des Designs lokal in einem leeren Verzeichnis.
# Entpacken Sie die .zip Datei des Designs lokal in einem leeren Verzeichnis.
# 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 (<code>chmod 755</code> - Besitzer: read/write/execute, Gruppe: read/execute, Alle: read/execute). Falsche Dateirechte können dazu führen, dass das Design nicht dargestellt wird.
# 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 (<code>chmod 755</code> - Besitzer: read/write/execute, Gruppe: read/execute, Alle: read/execute). Falsche Dateirechte können dazu führen, dass das Design nicht dargestellt wird.
# Wählen Sie das neue Design in Moodle aus: ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Design-Auswahl''.
# Wählen Sie das neue Design in Moodle aus: ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Darstellung > Designs > Design-Auswahl''.


=== Wie installiere ich ein neues Design mittels cPanel? ===
=== Wie installiere ich ein neues Design mittels cPanel? ===
Zeile 13: Zeile 11:
# 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.
# 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.
#  Stellen Sie sicher dass dieses Verzeichnis auf dem Moodle-Server für den Webserver-Nutzer les- und schreibbar ist (<code>chmod 755</code> - Besitzer: read/write/execute, Gruppe: read/execute, Alle: read/execute). Falsche Dateirechte können dazu führen, dass das Design nicht dargestellt wird.
#  Stellen Sie sicher dass dieses Verzeichnis auf dem Moodle-Server für den Webserver-Nutzer les- und schreibbar ist (<code>chmod 755</code> - Besitzer: read/write/execute, Gruppe: read/execute, Alle: read/execute). Falsche Dateirechte können dazu führen, dass das Design nicht dargestellt wird.
# Wählen Sie das neue Design in Moodle aus: ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Design-Auswahl''.
# Wählen Sie das neue Design in Moodle aus: ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Darstellung > Designs > Design-Auswahl''.


=== Warum erscheint das neu installierte Design nicht in der Design-Auswahl von Moodle? ===
=== Warum erscheint das neu installierte Design nicht in der Design-Auswahl von Moodle? ===
Zeile 26: Zeile 24:
#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>.
#In der  Datei ''/moodle/theme/new/version.php'' ändern Sie die Variable <code>$plugin->component = 'theme_new'</code>.
#In der  Datei ''/moodle/theme/new/version.php'' ändern Sie die Variable <code>$plugin->component = 'theme_new'</code>.
#Gehen Sie auf die Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Einstellungen'' und markieren Sie die Checkbox ''Designbearbeitungsmodus''. Speichern Sie die Änderung.
#Gehen Sie auf die Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Darstellung > Designs > Einstellungen'' und markieren Sie die Checkbox ''Designbearbeitungsmodus''. Speichern Sie die Änderung.
#Gehen Sie auf die Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Design-Auswahl''.
#Gehen Sie auf die Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Darstellung > Designs > Design-Auswahl''.
##Klicken Sie auf den Button ''Design-Cache löschen''.
##Klicken Sie auf den Button ''Design-Cache löschen''.
##Wählen Sie das neue Design aus.
##Wählen Sie das neue Design aus.


==Wie beschränke ich die Design-Auswahl für Nutzer/innen und Kurse?==
==Wie beschränke ich die Design-Auswahl für Nutzer/innen und Kurse?==
#Gehen Sie auf die Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Einstellungen''.
#Gehen Sie auf die Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Darstellung > Designs > Einstellungen''.
#Tragen Sie die Namen der Designs, die Sie für Nutzer/innen und Kurse zur Verfügung stellen wollen, im Textfeld ''Designliste'' ein.
#Tragen Sie die Namen der Designs, die Sie für Nutzer/innen und Kurse zur Verfügung stellen wollen, im Textfeld ''Designliste'' ein.


Zeile 43: Zeile 41:
Ja. In den Kurseinstellungen können Sie bei der Option ''Festgelegtes Design'' ein Design auswählen.  
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-Block|Einstellungen]] > Website-Administration > Darstellung > Designs > Einstellungen'' die Checkbox ''Kursdesigns erlauben'' markiert hat.
Voraussetzung dafür ist, dass die Moodle-Administration auf der Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|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?==
==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-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).
Sie können eigene Menüs erstellen, die in der Kopfzeile jeder Moodle-Seite angezeigt werden. Gehen Sie dazu auf die Seite ''Website-Administration'' (oder im Block ''[[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).


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:
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:
Zeile 52: Zeile 50:


== Wo trage ich meinen eigenen CSS Code ein? ==
== 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.
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 ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|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.
Bei allen anderen Designs aus dem Moodle-Standardpaket können Sie kein eigenes CSS einfügen.
Zeile 67: Zeile 65:
==Ich habe keinen Zugriffauf das ''/moodle/theme'' Verzeichnis auf dem Server. Kann ich trotzdem ein Logo einfügen?==
==Ich habe keinen Zugriffauf das ''/moodle/theme'' Verzeichnis auf dem Server. Kann ich trotzdem ein Logo einfügen?==
Ja. Esgibt zwei Möglichkeiten:
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
*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: ''Website-Administration'' (oder im Block ''[[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.
*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.


Zeile 99: Zeile 97:
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.
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.


==How are the device types used in Moodle 2.2 ?==
==Wie werden Gerätetypen in Moodle 2.2 verwendet?==
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. 
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.
 
Site administrators can find these enable device detection settings in Site administration > Appearance >Themes > [[Theme settings]] .


== 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 148: Zeile 137:
* [[: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?]
Zeile 174: Zeile 163:
[[Category:FAQ]]
[[Category:FAQ]]
[[en:Themes FAQ]]
[[en:Themes FAQ]]
[[es:Temas FAQ]]

Aktuelle Version vom 13. März 2019, 14:37 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: Website-Administration (oder im Block 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: Website-Administration (oder im Block 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 Website-Administration (oder im Block Einstellungen) > Website-Administration) > Darstellung > Designs > Einstellungen und markieren Sie die Checkbox Designbearbeitungsmodus. Speichern Sie die Änderung.
  7. Gehen Sie auf die Seite Website-Administration (oder im Block 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 Website-Administration (oder im Block 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 Website-Administration (oder im Block 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 Website-Administration (oder im 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).

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 Website-Administration (oder im Block 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: Website-Administration (oder im Block 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