ILIAS-Blog
How-To ILIAS: individuelle Kurse designen
ILIAS ist wandelbar. Von einfach gestaltetem Text bis hin zu den komplexesten Anpassungen ist dank CSS nahezu alles möglich. Das Beste daran: Fast jeder kann diese gestalterischen Möglichkeiten für sich nutzen. Auch ohne Zugriff auf die Administration - im eigenen Kurs.
Was aber, wenn viele davon gar nichts wissen oder gar nicht wissen, wie es geht? Dann wird es Zeit für ein neues How-To ILIAS über die Nutzung des Content-Styles - für individuell designte Kurse.
Let's Go!
Was ist eigentlich CSS?
Fangen wir mit den Grundlagen an. CSS steht für Cascading Style Sheets. Es handelt sich um eine Sprache, mit der das Aussehen und Layout von HTML-Dokumenten beschrieben wird - also Dinge wie Farben, Schriftarten, Abstände, Positionierung und responsives Verhalten. Sie trennt die Struktur eines Dokuments (HTML) von dessen visueller Darstellung. Die gewünschten Angaben speichert man heutzutage meist in einer separaten Datei, dem sogenannten Stylesheet.
Ganz konkret:
Die Überschrift über diesem Absatz "Was ist eigentlich CSS?" wird in HTML als Überschrift definiert. In diesem Fall also "Überschrift 2" oder kurz "h2". Das ist vergleichbar mit einer Überschrift in einem Textdokument, die mit 1.2 beginnt.
Im Stylesheet ist für h2 hinterlegt, dass die Farbe Orange sein soll und die Schriftgröße 20px betragen soll.
Mehr muss in aller Regel für eine h2 nicht eingetragen werden. Schriftart, Zeilenabstand etc. übernimmt das Stylesheet automatisch aus den Standardeinstellungen. Möchte ich jetzt, dass meine Überschrift kursiv ist, unterstrichen oder vielleicht hüpft, wenn ich mit der Maus darüberfahre, dann kann ich das ebenfalls über CSS einstellen.
Stylesheets in ILIAS
Das Design von ILIAS – wie auch das Design fast aller Websites auf der Welt – beruht auf CSS. Dabei unterscheiden wir das Aussehen der Oberfläche und das Aussehen der Inhalte. Ersteres wird über den sogenannten „System Style“ gesteuert, letzteres durch den „Content Style“.
Als Lehrender oder Lernender kann man aus nachvollziehbaren Gründen nicht das Design der gesamten ILIAS-Installation verändern – das funktioniert nur auf Serverebene über die Bearbeitung des systemweiten „System Styles“.
Der Seiteninhalt eines Containerobjekts lässt sich hingegen auch ohne Serverzugriff gestalten. Damit ist alles gemeint, was sich innerhalb eines Kurses, einer Gruppe etc. befindet und über den Seiteneditor (per Button Seite gestalten) erzeugt wird. Einzige Voraussetzung hierfür sind entsprechende Bearbeitungsrechte im Objekt, die einem Zugriff auf den Seiteneditor gewähren. Über diesen lässt sich der Content Style aufrufen. Er funktioniert im Grunde wie ein vereinfachtes Stylesheet, mit dem auch ohne Programmierkenntnisse das Gestalten individueller Kurse möglich wird.
Es wird unterschieden zwischen globalen Content Styles, die von Administratoren eingerichtet werden und für die gesamte ILIAS-Installation gelten und lokalen Content Styles, die nur innerhalb eines Objekts, wie Kursen und Gruppen gelten. Als Kurs- oder Gruppenadministrator haben Sie die Möglichkeit, ein lokales Stylesheet anzulegen, sofern diese Funktion nicht administrationsseitig deaktiviert wurde.
Ein lokales Stylesheet anlegen
- Rufen Sie Ihren Kurs, Ihre Gruppe etc. auf.
- Klicken Sie im Reiter Inhalt auf "Seite bearbeiten".
- Im Hauptmenü links unter Tools finden Sie ein Aktionsmenü. Klicken Sie darauf und wählen Sie den Eintrag "Style".
- Es wird eine neue Seite geladen. Hier können Sie zwischen globalen Styles wechseln, sofern mehrere zur Verfügung stehen.
- Für ein eigenes (lokales) Stylesheet klicken Sie auf "Lokales Stylesheet anlegen".
- Geben Sie dem Style einen Namen und Speichern.
Übrigens: Auch neu erstellte Content Styles enthalten bereits diverse Styleklassen. Man fängt also nie bei Null an, sondern kann das Bestehende bearbeiten oder ergänzen. Wie ein neu erstellter Content Style aussieht, hängt vom festgelegten Standard der jeweiligen Installation ab.
Den Content Style verstehen
Schauen wir einmal in die Bedienoberfläche des Content Styles:
Das Designen der verschiedenen "Styleklassen" erfolgt im gleichnamigen Reiter. Dort gibt es elf Unterreiter zur Gestaltung verschiedener Elemente.
Unter "Text (Block)" kann das Absatzformat von Textabsätzen gestaltet werden. Etwa die Größe und Farbe von Überschriften, dem Standardtext etc. Unter "Text (Zeichen)" werden zusätzliche Textformatierungen gestaltet. Diese finden sich im Texteditor unter "Zeichenformat" wieder - es handelt sich um Formatierungen wie fett, kursiv etc. (technisch ausgedrückt handelt es sich um "spans").
Unter "Block" werden die Blöcke gestaltet, die über den Seiteneditor als neues Seitenelement eingefügt werden können.
Am besten klicken Sie sich einmal durch die verschiedenen Unterreiter um zu verstehen, was wo designt werden kann.
Im Reiter "Bilder" können Bilddateien hochgeladen werden, um sie dann in die Styleklassen einzuarbeiten. So können Sie beispielsweise Blöcke mit Glyphen wie dem Stift-Symbol versehen oder deutlich umfangreicher gestaltete Blöcke mit Hintergrundbild. Haben Sie schon mal unsere Onboarding-Gruppe besucht? Auf jeder Seite gibt es oben eine Weltkugel zu sehen. Beim Scrollen bleibt das Bild an Ort und Stelle stehen. Dabei handelt es sich um einen Block mit Hintergrundbild. Das Hintergrundbild wurde im Content Style im Reiter Bilder hochgeladen.
Haben Sie den gewünschten Unterreiter aufgerufen, finden Sie im markierten 3. Bereich die jeweiligen Styleklassen. Hier sehen Sie den Titel sowie eine Vorschau der Styleklasse. Über das Aktionen-Menü rechts kann die Bearbeitungsmaske aufgerufen werden.
Eine Styleklasse bearbeiten
Nach Aufrufen der Bearbeitungsmaske findet man folgende Seite vor (hier von einem Block):
Auf den ersten Blick wirkt das ganz schön komplex. Befasst man sich aber etwas genauer mit den verschiedenen Eingabefeldern, ist es eigentlich recht simpel.
Im oberen Bereich "Text" kann der Text angepasst werden - also Schriftfarbe, Größe etc. Unter "Außenrand und Innenabstand" werden die Abstände der Styleklasse festgelegt: zum Beispiel, wie viele Pixel Abstand ein Element nach oben und unten zu anderen Seitenelementen haben soll. Unter "Rahmen" kann ein Rand und unter "Hintergrund" beispielsweise eine Hintergrundfarbe oder ein Hintergrundbild eingerichtet werden. Die letzten drei Bereiche "Positionierung", "Spezial" und "Weitere CSS-Regeln" werden vor allem für aufwändig gestaltete Styleklassen benötigt.
Hinweise:
Leere Felder bedeuten immer, dass sich das System auf den Standard (globaler Style) bezieht.
Bei den Farben können Sie die im Reiter "Farben" hinterlegten Farben verwerden, indem Sie "!Farbname" eingeben. Dies ermöglicht die einfache Einhaltung der farblichen Identität Ihrer Organisation. Oder Sie nutzen HEX-Farbcodes für beliebige andere Farben. Das sind sechstellige Zahlen-Buchstaben-Kombinationen, mit denen sich unzählige Farbnuancen am Bildschirm abbilden lassen.
Keine Sorge: Sie müssen nicht schon vorab mit HEX-Farbcodes gearbeitet haben. Die Bearbeitungsmaske bietet einen Colorpicker, mit dem Sie Farben von anderen geöffneten Programmen oder Bildquellen per Mausklick kopieren können.
Ihnen ist sicherlich aufgefallen, dass es nach Aufrufen einer Styleklasse bis zu drei Unterreiter gibt: "Standard", ":hover" und ":before".
Unter Standard wird die Styleklasse an sich gestaltet.
Unter :hover (nicht in allen Styleklassen verfügbar) können Sie bestimmen, wie die Styleklasse aussehen soll, wenn mit der Maus über das Element gefahren wird. Das bringt viele gestalterische Möglichkeiten: Sie können Buttons oder Blöcke mit Effekten versehen. Bewegen Sie die Maus darüber, können sich beispielsweise Farbe oder Größe verändern.
Unter :before (nicht in allen Styleklassen verfügbar) können Sie zusätzliche Styleelemente einfügen. Sie beeinflussen die Optik, gehören aber nicht direkt zum eigentlichen Inhalt des Elements. Klingt kompliziert? Damit wird beispielsweise in einem "Block: Merksatz" der Kreis mit den Sprechblasen ÜBER den eigentlichen Block gesetzt.
Das hier ist ein Block "Merksatz".
Jetzt mal konkret: Wir bauen einen Button
Buttons werden gerne mit Hover-Effekten versehen. Das zieht Aufmerksamkeit auf sich und vermittelt direkt, dass beim Klicken etwas passiert. Um einen Button einzurichten, braucht es einen Block. Denn diese können im Seiteneditor später problemlos mit internen oder externen Links versehen werden.
Im Vereinsblog-Style gibt es diesen Button hier:
Ich bin ein funktionsloser Button
Er wurde unter Standard wie folgt designt:
- Textfarbe: weiß (HEX: ffffff)
- horizontale Ausrichtung: center
- Außenrand UND Innenabstand alle 10px
- Hintergrundfarbe: ILIAS-Orange
- weitere CSS-Regel: "border-radius: 10px" (für die abgerundeten Ecken)
Werfen wir einen Blick in die Einstellungen im Unterreiter :hover:
- Hintergrundfarbe: "!orange (10)" >> der Zusatz (10) sorgt dafür, dass die Farbe um 10% aufgehellt wird
- keine weiteren Eingaben
Die andere Farbe unter :hover sorgt dafür, dass der Button beim Drüberfahren heller wird.
Für die Schriftart wurde übrigens ein unter "Text (Block)" gestaltetes Absatzformat genutzt, das dann im Seiteneditor gewählt wurde. Dieses Absatzformat hat eine größere Schriftgröße, einen Zeilenabstand von 0.3em sowie das Schriftgewicht "bold". Man hätte die Schriftanpassungen auch für den Block vornehmen können. Dann würden alle Buttons immer genau so aussehen. Oder man kombiniert (wie hier) Blöcke mit verschiedenen Absatzformaten, um diverse Kombinationen zu ermöglichen.
Lust auf mehr?
Haben Sie jetzt richtig Lust bekommen, Ihren eigenen Kurs zu gestalten? Probieren Sie sich einfach ein Wenig aus und spielen mit den Möglichkeiten. Umfangreiche Informationen zu verschiedenen CSS-Regeln finden Sie bei w3schools.
An dieser Stelle noch einmal eine kurze Werbung für das Onboarding-Angebot. Der Style dieser Gruppe baut auf dem von ILIAS.nrw bereitgestellten Content Style auf, wurde aber für die eigenen Zwecke ausgebaut und überarbeitet.
Zum ILIAS Onboarding