Erstellen Sie Ihr erstes vollständiges Moodle-Thema

Also lassen Sie uns weitermachen …

Erstellen eines neuen Themas

Das Finden eines Basisthemas zum Erstellen Ihres Moodle-Themas ist das erste, was Sie tun müssen.Es gibt jedoch verschiedene Möglichkeiten, dies zu tun; Sie können eine Kopie des Standardthemas erstellen und es umbenennen, wie Sie es in einem Teil dieses Artikels getan haben, oder Sie können ein übergeordnetes Thema verwenden, das auch auf dem Standardthema basiert.

Der wichtige Punkt hier ist, dass das Standardthema, das mit Moodle geliefert wird, der Eckpfeiler des Moodle-Thematisierungsprozesses ist. Jedes andere Moodle-Thema sollte auf diesem Thema basieren und normalerweise die Unterschiede zum Standardthema beschreiben. Obwohl diese Methode funktioniert und eine einfache Möglichkeit ist, mit dem Moodle-Theming zu beginnen, verursacht sie Probleme, da neue Funktionen zu Moodle hinzugefügt werden können, die dazu führen können, dass Ihr Thema falsch angezeigt wird oder funktioniert. Das Standardthema wird immer aktualisiert, bevor eine neue Version von Moodle gestartet wird. Wenn Sie also eine Kopie des Standardthemas erstellen und seine Stile ändern möchten, stellen Sie am besten sicher, dass Sie auch ein übergeordnetes Thema verwenden. Auf diese Weise ist das übergeordnete Thema zusammen mit den Änderungen, die Sie an Ihrer Kopie des Standardthemas vornehmen, Ihr Basisthema.

Es gibt jedoch eine andere Möglichkeit, Ihr erstes Thema zu erstellen, nämlich eine Kopie eines Themas zu erstellen, das dem Standardthema sehr nahe kommt, z. B. standardwhite, und dieses als Thema zu verwenden. Moodle verwendet dann das Standardthema als Basisthema und wendet alle Änderungen an, die Sie am Standardwhite-Thema oben (übergeordnet) vornehmen. Wir beschreiben lediglich die Unterschiede zwischen den Themen Standard und Standardwhite. Dies ist besser, da Moodle-Entwickler manchmal Änderungen am Standardthema vornehmen, um mit neuen Moodle-Funktionen auf dem neuesten Stand zu sein. Dies bedeutet, dass bei jedem Moodle-Update Ihr Standardthema automatisch aktualisiert wird, wodurch unangenehme Anzeigeprobleme durch Moodle-Updates vermieden werden.

Die Art und Weise, wie Sie Moodle-Themen konfigurieren, liegt ganz bei Ihnen. Wenn Sie ein Thema sehen, das fast dem entspricht, was Sie möchten, und nicht wirklich viele Änderungen erforderlich sind, ist die Verwendung eines übergeordneten Themas sinnvoll, da die meisten der von Ihnen benötigten Stile bereits geschrieben wurden. Wenn Sie jedoch ein Thema erstellen möchten, das sich völlig von jedem anderen Thema unterscheidet, oder wirklich in das Moodle-Theming einsteigen möchten, ist es am besten, eine Kopie eines der Standardblätter zu verwenden.

Schauen wir uns also an, was die Unterschiede bei der Verwendung verschiedener Theme-Setups sind und welche Auswirkungen diese verschiedenen Methoden auf den Theming-Prozess haben.

• Navigieren Sie zu Ihrem Themenordner in C:Program FilesApache Software FoundationApache 2.2htdocstheme.
• Kopieren Sie das Standardthema, indem Sie mit der rechten Maustaste auf den Ordner des Themas klicken und Kopieren auswählen.
• Fügen Sie das kopierte Theme in das Theme-Verzeichnis ein (dasselbe Verzeichnis, in dem Sie sich gerade befinden).
• Benennen Sie die Kopie des Standardordners in blackandblue oder einen anderen Namen um, den Sie auswählen möchten (denken Sie daran, keine Groß- oder Leerzeichen zu verwenden).
• Öffnen Sie Ihre Moodle-Site, navigieren Sie zu Site Administration Appearance | Themes | Theme Selector| und wählen Sie das soeben erstellte Blackandblue-Thema aus.

Möglicherweise haben Sie bemerkt, dass das im vorherigen Screenshot gezeigte Thema eine Kopfzeile mit der Aufschrift Black and Blue Theme enthält. Dies liegt daran, dass ich dies dem vollständigen Site-Namen auf der Einstellungsseite für die Startseite hinzugefügt habe.

Zeit zum Handeln – Festlegen eines übergeordneten Themas

1. Öffnen Sie Ihren Webbrowser, navigieren Sie zu Ihrer Moodle-Site und melden Sie sich als Administrator an.
2. Gehen Sie zu Site Administration / Appearance | Themes / Theme Selector und wählen Sie Ihr Blackandblue-Thema aus, falls es nicht bereits ausgewählt ist.
3. Navigieren Sie zum Stammverzeichnis Ihres Blackandblue-Ordners und klicken Sie mit der rechten Maustaste auf die Konfiguration.php-Datei, und wählen Sie Öffnen mit / WordPad.

4. Sie müssen vier Änderungen an dieser Datei vornehmen, damit Sie dieses Thema und ein übergeordnetes Thema verwenden können, während Sie sicherstellen, dass Sie weiterhin das Standard-Standardthema als Basis verwenden. Hier sind die Änderungen:

   $THEME->sheets = array('user_styles');
   $THEME->standardsheets = true;
   $THEME->parent = 'autumn';
   $THEME->parentsheets = array('styles');

   Schauen wir uns jede dieser Aussagen an, wiederum.

   $THEME->Blätter = array('user_styles');

   Dies enthält die Namen aller Stylesheet-Dateien, die Sie für Ihr Blackandblue-Design einfügen möchten, nämlich user_styles.

   $THEME->standardsheets = true;

   Dieser Parameter wird verwendet, um die Stylesheets des Standardthemas einzuschließen. Wenn es auf True gesetzt ist, werden alle Stylesheets im Standarddesign verwendet. Alternativ kann es als Array festgelegt werden, um einzelne Stylesheets in beliebiger Reihenfolge zu laden. Wir haben dies auf True gesetzt, sodass wir alle Stylesheets des Standardthemas verwenden.

   $THEME->parent = 'Herbst';

   Diese Variable kann so eingestellt werden, dass ein Thema als übergeordnetes Thema verwendet wird, das vor dem aktuellen Thema enthalten ist. Dies macht es einfacher, Änderungen an einem anderen Thema vorzunehmen, ohne die eigentlichen Dateien ändern zu müssen.

   $THEME->parentsheets = array('styles');

   Mit dieser Variablen können entweder alle Stylesheets des übergeordneten Themas oder einzelne Dateien ausgewählt werden. Es wurde festgelegt, um die Stile enthalten.CSS-Datei aus dem übergeordneten Thema, nämlich Herbst. Da es im Herbstthema nur ein Stylesheet gibt, können Sie diese Variable auf True setzen. So oder so, Sie werden das gleiche Ergebnis haben.

5. Speichern sieschwarzundblaukonfig.php, und aktualisieren Sie Ihr Webbrowser-Fenster. Sie sollten etwas Ähnliches wie im folgenden Screenshot sehen. Beachten Sie, dass sich Ihre Blöcke möglicherweise von den folgenden unterscheiden, Sie können dies jedoch ignorieren.

Was ist gerade passiert?

Okay, jetzt haben Sie eine Kopie des Standardthemas, das das Herbstthema (von Patrick Malley) als übergeordnetes Element verwendet. Möglicherweise haben Sie bemerkt, dass die Kopfzeile nicht korrekt ist und dass die richtige Herbstthema-Kopfzeile nicht angezeigt wird. Nun, das liegt daran, dass Sie im Wesentlichen die Kopie des Standardthemas verwenden und dass die Kopfzeile dieses Themas diejenige ist, die Sie oben sehen. Es sind nur die CSS-Dateien, die in dieser Hierarchie enthalten sind, sodass HTML-Änderungen erst angezeigt werden, wenn Sie die Kopfzeile Ihres Standardthemas bearbeiten.HTML-Datei.

Have a go hero – wählen Sie ein anderes übergeordnetes Thema

Gehen Sie zurück und schauen Sie sich einige der Themen an Moodle.org und laden Sie eine, die Sie mögen. Fügen Sie dieses Thema als übergeordnetes Thema zur Konfiguration Ihres Blackandblue-Themas hinzu.PHP-Datei, aber dieses Mal wählen, welche Stylesheets Sie aus diesem Thema verwenden möchten. Das Back to School-Thema eignet sich gut für diese Übung, da die Stylesheets klar gekennzeichnet sind. Sie

Kopieren also die Kopf- und Fußzeilendateien

Um zu zeigen, dass Sie die CSS-Dateien des Herbstthemas und die HTML-Dateien des Standardthemas verwenden, können Sie einfach die Kopfzeile kopieren.html und Fußzeile.HTML-Dateien aus Patrick Malleys Herbstthema und fügen Sie sie in den Ordner Ihres Blackandblue-Themas ein. Machen Sie sich keine Sorgen über das Überschreiben Ihrer Kopf- und Fußzeilendateien, da Sie sie jederzeit einfach wieder aus dem aktuellen Standard-Themenordner kopieren können.

Zeit zum Handeln – Kopieren der Kopfzeile.html und Fußzeile.html-Dateien

1. Navigieren Sie zum Ordner des Herbstthemas und markieren Sie die Kopfzeile.html und Fußzeile.HTML-Dateien, indem Sie die Strg-Taste gedrückt halten und auf beide klicken. Klicken Sie mit der rechten Maustaste auf die ausgewählten Dateien und wählen Sie Kopieren.
2. Navigieren Sie zum Ordner Ihres Blackandblue-Designs, klicken Sie mit der rechten Maustaste und wählen Sie Einfügen.
3. Gehen Sie zurück in Ihr Browserfenster und drücken Sie die Taste F5, um die Seite zu aktualisieren. Sie sehen jetzt das vollständige Herbstthema.

Was ist gerade passiert?

Sie haben den Header des Herbstthemas kopiert.html und Fußzeile.HTML-Dateien in Ihre blackandblue Thema, so können Sie die volle Herbst Thema arbeiten zu sehen. Sie werden den Header wahrscheinlich nicht wirklich verwenden.html und Fußzeile.HTML-Dateien, die Sie gerade kopiert haben, da dies nur ein Beispiel dafür war, wie der Moodle-Thematisierungsprozess funktioniert.

Sie haben also jetzt eine unveränderte Kopie des Standardthemas namens blackandblue, das das Herbstthema als übergeordnetes Thema verwendet. Alles, was Sie jetzt tun müssen, um Änderungen an diesem Thema vorzunehmen, ist, Ihre CSS-Datei im Blackandblue-Themenordner zu bearbeiten.

Themenordner Hausarbeit

Es gibt jedoch ein paar Dinge, die Sie zuerst tun müssen, da Sie neben der Kopfzeile eine exakte Kopie des Standardthemas haben.html und Fußzeile.HTML-Dateien. Dieser kopierte Ordner enthält Dateien, die Sie nicht benötigen, da die einzige Datei, die Sie für Ihr Design festgelegt haben, die user_styles .CSS-Datei in der Konfiguration.PHP-Datei früher. Dies war die erste Änderung, die Sie vorgenommen haben:

$THEME->sheets = array('user_styles');

Der user_style.die CSS-Datei ist im Ordner Ihres Blackandblue-Themas nicht vorhanden, daher müssen Sie sie erstellen. Sie müssen auch alle anderen vorhandenen CSS-Dateien löschen, da Ihr neues Blackandblue-Design nur ein Stylesheet verwendet, nämlich die user_styles .CSS-Datei, die Sie in den folgenden Abschnitten erstellen werden.

Zeit zum Handeln – Erstellen unseres Stylesheets

1. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in Ihrem blackandblue-Ordner und wählen Sie Neues Textdokument |.
2. Benennen Sie dieses Textdokument in user_styles um.css, indem Sie erneut mit der rechten Maustaste klicken und Umbenennen auswählen.

Zeit zum Handeln – Löschen von CSS-Dateien, die wir nicht benötigen

1. Löschen Sie die folgenden CSS-Dateien, indem Sie sie auswählen, mit der rechten Maustaste auf die ausgewählten Dateien klicken und Löschen auswählen.
   • styles_color.css
   • stil_ie6.css
   • stil_ie6.css
   • stil_ie7.css
   • styles_layout.css
   • styles_moz.css

   { hintergrund: #000000;}

   

Was ist gerade passiert?

In den letzten beiden Aufgaben haben Sie eine leere CSS-Datei namens user_style erstellt.css im Ordner Ihres Blackandblue-Themas. Sie haben dann alle CSS-Dateien im Ordner Ihres Blackandblue-Themas gelöscht, da Sie sie nicht mehr benötigen. Denken Sie daran, dass dies nur Kopien der CSS-Dateien im Standard-Theme-Ordner sind und Sie Ihr Theme so eingestellt haben, dass es das Standard-Theme als Basis in der Konfiguration des Blackandblue-Themes verwendet.PHP-Datei.

Nehmen wir einige Änderungen vor

Jetzt haben Sie Ihr Thema so eingerichtet, wie Sie es möchten, dh Sie verwenden Ihr eigenes Blackandblue-Thema, indem Sie das Standardthema als Basis und das Herbstthema als übergeordnetes Thema verwenden. Fahren Sie fort und nehmen Sie einige Änderungen an Ihrem user_style vor.CSS-Datei, so dass Sie sehen können, welche Auswirkungen dies auf Ihr Thema hat, und überprüfen Sie, dass alle Ihre config.die Einstellungen der PHP-Datei sind korrekt. Denken Sie daran, dass alle aktuellen Stile vom Herbstthema geerbt werden.

Zeit zum Handeln – Überprüfen Sie unser Setup

1. Öffnen Sie Ihre Moodle-Site mit dem aktuellen Thema (das schwarz und blau sein sollte, aber wie das Herbstthema aussieht).
2. Navigieren Sie zum Ordner Ihres Blackandblue-Themas und klicken Sie mit der rechten Maustaste auf den user_style.CSS-Datei, und wählen Sie Öffnen. Diese Datei sollte vollständig leer sein.

3. Geben Sie die folgende CSS-Zeile für das body-Element ein und speichern Sie die Datei fi:

   body {
   background: #000000;
   }

   

4. Aktualisieren Sie nun Ihr Browserfenster. Sie werden sehen, dass der Hintergrund jetzt schwarz ist.

   

Hinweis: Wenn Sie Firebug verwenden, um verwendete Stile zu identifizieren, ist möglicherweise nicht immer klar, wo sie sich befinden oder welcher Stil dieses Element der Seite steuert. Ein Beispiel dafür ist der body {background: #000000;}Code, den wir gerade in unseren user_style eingefügt haben.CSS-Datei. Wenn wir Firebug verwendet hätten, um diesen Stil zu identifizieren, hätten wir ihn nicht gefunden. Stattdessen habe ich mir nur die CSS-Datei aus dem Herbstthema angesehen. Was ich hier zu sagen versuche, ist, dass es immer ein Element von Herumstochern und Versuch und Irrtum geben wird.

Was ist gerade passiert?

Dort scheint alles in Ordnung zu sein, nicht wahr? Sie haben Ihrem leeren user_style eine Stildeklaration hinzugefügt.CSS-Datei, um die Hintergrundfarbe zu ändern, und haben die Änderungen in Ihrem Browser überprüft. Sie wissen jetzt, wie die übergeordneten Designs funktionieren, und wissen, dass Sie nur die Stile von Firebug in Ihren user_style kopieren müssen.CSS-Datei und bearbeiten Sie die Stildeklarationen, die geändert werden müssen.