Designs FAQ: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
Zeile 102: Zeile 102:
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.
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">
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]]
* [[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 139:
* [[: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?]

Version vom 14. Juni 2012, 14:51 Uhr


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.

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

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