Um das Aussehen Ihrer Zwischentexte nach eigenem Geschmack gestalten zu können, benötigen Sie zunächst den entsprechenden CSS-Code. Am einfachsten ist es, Sie erstellen die CSS-Informationen mit einem CSS-Editor. Geeignet ist dafür zum Beispiel der KompoZer, kostenloses Programm, das Sie leicht im Internet finden und downloaden können.

Ein Beispiel:

Sie möchten, dass Ihre Themenabschnitte eine Überschrift erhalten, der in einem Kasten liegt, einen Rand mit Abstand und eine definierte Hintergrundfarbe erhält. Etwa so, wie hier dargestellt.

CSS-Befehle für eine DIV-Box

Eine Möglichkeit besteht darin, in CSS eine Klasse zu definieren, z.B. themenbox (geschrieben als CSS-Klasse: .themenbox). Dieser Klasse weisen Sie anschließend CSS-Eigenschaften zu, zum Beispiel für einen blauen Rand (border), einen Innenabstand (padding), eine Hintergrundfarbe (background-color), eine Schriftfarbe (color), eine Schriftfamilie und -größe (font-family und font-size), sowie ein Schriftgewicht (font-weight).

Der Befehl für die Klasse themenbox lautet dann:

Anstelle des Farbcodes können Sie auch die entsprechenden Namen eintragen. → Farbcodes

Schreiben Sie diese CSS-Definition mit einem Editor in eine Textdatei und speichern Sie diese ab unter dem Namen kurs.css

Laden Sie diese Datei anschließend in Ihrem Kurs hoch unter "Eigene Dateien"

Nachdem Sie die Datei mit diesen CSS-Befehlen hochgeladen haben, kopieren Sie mit "Link-Adresse kopieren" (siehe Abb.) den Pfad zu dieser Datei.

Öffnen Sie nun ein beliebiges Bearbeitungsfenster in Ihrem Kursraum. Klicken Sie zum Beispiel auf den ersten "Bearbeiten-Button" der ersten Überschrift in Ihrem Kursraum und öffnen Sie den HTML-Bearbeitungsmodus.

Fügen Sie nun im HTML-Modus folgenden Link auf die Datei "kurs.css" ein:

Anschließend können Sie, ohne den Link erneut eingeben zu müssen, an jeder beliebigen Stelle in Ihrem Kurs, diese Klasse benutzen, um genau dieses Aussehen zu erreichen.

Im HTML-Code muss lediglich stehen:

<div class="themenbox">Text Text Text </div>

Youtubevideo einbinden

Forum auf moodle.org zum Moodle HTML Editor

Weiter: Editor-Erweiterung DragMath