Zur Hauptnavigation springen [Alt]+[0] Zum Seiteninhalt springen [Alt]+[1]

Zwischentexte mit CSS gestalten

Häufig genügen die Möglichkeiten des Editors von Moodle zur Textgestaltung vollkommen. Sie können jedoch das Aussehen der Zwischentexte sehr frei nach Ihrem eigenen Geschmack gestalten. Dazu benötigen Sie allerdings 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, die in einem Kasten liegt, einen Rand mit Abstand und eine definierte Hintergrundfarbe erhält. Etwa so, wie hier dargestellt.

Themenabschnitt

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:

CSS-Befehl

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

black #000000 gray #808080
maroon #800000 red #FF0000
green #008000 lime #00FF00
olive #808000 yellow #FFFF00
navy #000080 blue #0000FF
purple #800080 fuchsia #FF00FF
teal #008080 aqua #00FFFF
silver #C0C0C0 white #FFFFFF

Neben diesen Standardfarben gibt es eine Reihe weiterer Farbnamen , die von den meisten Browsern korrekt interpretiert werden.

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 unter Eigene Dateien hoch.

Kurs.css hochladen

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:

Link auf kurs.css

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

Im HTML-Code muss lediglich stehen:

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


Weiter mit Farbnamen