Skip to main content
Skip table of contents

Layout in ILIAS: Stylesheets anpassen

In ILIAS ist es möglich, die grafische Gestaltung der Inhalte, die mit dem Seiteneditor erstellt werden, mithilfe von sog. “Styles” oder “Stylesheets” zu verändern. Während das Erstellen von kompletten Seitenlayouts umfangreiche Vorkenntnisse in HTML bzw. CSS (cascading style sheets, https://www.w3schools.com/css/default.asp ) erfordert, sind kleine Anpassungen durchaus auch mit wenig Vorkenntnissen möglich. “Kleine” Anpassungen könnten z.B. sein:

  • die Schriftgrösse, -typ oder -farbe des Haupttextes verändern

  • Tabellenrahmen und -hintergrund ändern

  • Die Farbe und die Icons von Textblöcken ändern

Grundlegendes: den Style-Editor aufrufen

Styles lassen sich sowohl im Inhaltsbereich von Kursen, Gruppen und Ordnern anpassen, wie auch in einigen ILIAS-Objekten, insbesondere im Lernmodul ILIAS. Das Werkzeug dafür wird als Style-Editor bezeichnet. Da der Zugang zum Style-Editor in diesen beiden Fällen unterschiedlich ist, werden hier beide Wege beschrieben.

Den Style-Editor im Seiteneditor aufrufen

Im Kurs (oder Ordner, Gruppe), wo du Änderungen am Layout des Inhaltsbereiches vornehmen möchtest, klickst du Seite gestalten.

Rufe dann im Drop-down-Menü den Eintrag Style auf.

style1.png

Anschliessend gelangst du auf die im folgenden abgebildete Seite. Meist ist hier einer der beiden System-Styles Standard oder Docu Style als derzeitiger Style eingetragen. In diesem Fall klickst du Individuelles Stylesheet anlegen.

Falls schon ein anderer Style eingetragen ist, kannst du direkt Style editieren klicken, und dann hier weiterfahren.

style3.png

Gib nun einen aussagekräftigen Titel ein, und ev. einen Kommentar dazu, was geändert wird, und bestätige mit Speichern:

style4.png

Nun gelangst du direkt zu den Style-Bearbeitungsfunktionen. Bei späteren Zugriffen kannst du dann direkt Style editieren auswählen.

Wie’s von hier aus weitergeht, erfährst du weiter unten.

Den Style-Editor im Lernmodul ILIAS aufrufen

Ausgangspunkt ist der Kurs, Ordner oder die Gruppe, wo das betreffende Lernmodul liegt. Rufe über das Drop-down-Menü des Lernmoduls den Punkt Einstellungen auf.

style2.png

Nun wählst du den Punkt Style aus:

style5.png

Anschliessend gelangst du auf die im folgenden abgebildete Seite. Meist ist hier einer der beiden System-Styles ILIAS 6 Default Content Style (Standard) oder Docu Style als derzeitiger Style eingetragen. In diesem Fall klickst du Individuelles Stylesheet anlegen.

style6.png

Falls schon ein anderer Style eingetragen ist, kannst du direkt Style editieren klicken, und dann hier weiterfahren.

Gib nun einen aussagekräftigen Titel ein, und ev. einen Kommentar dazu, was geändert wird, und bestätige mit Speichern:

style4.png

Nun gelangst du zu den Style-Bearbeitungsfunktionen. Bei späteren Zugriffen kannst du dann direkt Style bearbeitenauswählen. Wie’s von hier aus weitergeht, erfährst du in den nächsten Abschnitten.

Anwendungsbeispiele

Das eigentliche Bearbeiten des Stylesheets verläuft für den Inhaltbereich und für Lernmodule auf gleiche Weise. Hier siehst du die Hauptseite des Style-Editors:

style7.png

Wie du siehst, gibt es Unterbereiche, sog. Styleklassen, für die verschiedenen Inhaltstypen des Seiteneditors, Text, Blöcke, Tabellen, Akkordeon etc.

Darunter werden dann jeweils die Inhaltselemente aufgelistet, die bearbeitet werden können. So ist z.B. jede Titelebene ein Inhaltselement, für welches man Schrifttyp, -grösse, -farbe etc. separat verändern kann. Diese Liste unterscheidet sich je nach Styleklasse.

Mit einem Klick auf den Link Bearbeiten gelangt man zur Parameterseite, auf der alle Style-Parameter eines solchen Inhaltselementes aufgelistet werden, die verändert werden können.

style7a.png

Beispiel: Parameterseite eines Standard-Text-Elements

In den folgenden Beispielen wird jeweils angegeben, in welcher Styleklasse man das entsprechende Inhaltselement findet, und welche Parameter man verändern muss.

Tipp zum effizienten Arbeiten
Um die Auswirkungen gleich zu sehen, die die Änderung eines Parameters hat, ohne dafür den Style-Editor verlassen und ständig hin- und herzuwechseln zu müssen, empfiehlt es sich, gleichzeitig zwei Fenster offen zu haben.
Im einen Fenster hast du die Inhalte des Kurses oder Lernmoduls, im zweiten den Style-Editor.
So kann man jeweils im Style-Editor etwas anpassen und speichern, dann ins andere Fenster wechseln und die Seite neu laden, um die Auswirkungen zu sehen, etc.

style8.png

Schriften ändern

In diesem Abschnitt wird gezeigt, wie du die Schriften im Inhaltsbereich ändern kannst.

Dafür ist wichtig zu verstehen, dass jeder Text im Seiteneditor ein bestimmtes Absatzformat besitzt, und sich zudem in einem umgebenden Block befinden kann. Dies muss man wissen, damit man weiss, welches Inhaltselement man bearbeiten muss.

Dies kann man auf zwei Arten herausfinden. Entweder, indem man

  • im Seite bearbeiten-Modus mit dem Mauszeiger über ein Element “hovert”…

    style9.png
  • oder einen Textblock anklickt und die Information links im “Slate” nachschaut.

    style10.png

Text ohne umgebenden Block ändern

Styleklasse

Text (Block)

Inhaltselement

je nach Absatzformat des Texts: Standard, Überschrift, Attention (die Bezeichnungen sind z.T. nicht konsistent deutsch vs. englisch)

Parameter

Schriftgröße, Schriftart, Schriftstil, Schriftgewicht, Schriftvariante etc.
Referenzen: https://www.w3schools.com/css/css_text.asphttps://www.w3schools.com/css/css_font.asp

Bemerkung

Das Zeichenformat der Links müsste separat in der Styleklasse Link angepasst werden.

Beispiel: einige Parameter verändert

style11.png
style12.png

Text mit umgebendem Block ändern

Styleklasse

Block

Inhaltselement

je nach Block-Typ: Additional, AdvancedKnowledge, Attention, Background etc.

Parameter

Schriftgröße, Schriftart, Schriftstil, Schriftgewicht, Schriftvariante etc.
Referenzen: https://www.w3schools.com/css/css_text.asphttps://www.w3schools.com/css/css_font.asp

Bemerkung

diese Einstellungen “übersteuern” diejenigen des “inneren” Text-Elements

Tabellenrahmen oder -hintergrund ändern

… (coming soon)

Hintergrundfarbe und Icon von Textblöcken ändern

… (coming soon)

Styles teilen und wiederverwenden

Wenn man sich die Arbeit macht, einen Style anzupassen, wird es in vielen Fällen sinnvoll sein zu wissen, dass man ihn ohne grossen Aufwand auch gleich in andere Kurse einsetzen oder an KollegInnen weitergeben kann.

Einen Style exportieren

Ausgangssituation: Du hast bereits einen Style erstellt, und befindest dich im Style-Editor (nach Klicken von Style editieren).

ILIAS 7: Wähle den Reiter Einstellungen und klicke dann Export.

style13.png

ILIAS 8: Wähle den Reiter Export und klicke dann Exportdatei erzeugen (XML).

style13a.png

ILIAS erzeugt dann die Exportdatei im .zip-Format und legt sie lokal auf deinem Gerät im Verzeichnis Downloads ab.

style14.png

Die Datei darf nicht umbenannt werden, sonst funktioniert der Import in einen anderen Kurs nicht!

Einen Style importieren

Ausgangssituation: Du hast den Seiteneditor aufgerufen und dann über das Drop-Down-Menu die Funktion Style (ILIAS 7) bzw. Content-Style (ILIAS 8) aktiviert bzw. - im Lernmodul ILIAS - den Reiter Style gewählt.

Falls dort als aktueller Style nicht Standard oder Docu Style eingetragen ist, sondern ein eigener Style, musst du diesen zuerst mit Style löschen entfernen.

Nun kannst du Individuelles Stylesheet anlegen bzw. Lokales Stylesheet anlegen anwählen.

Option 2: Stylesheet importieren erlaubt dir nun, eine auf deinem Gerät gespeicherte Exportdatei (sowas wie 1710921452__6933__sty_2341995.zip) auszuwählen. Damit wird dieser Style in dein Objekt übertragen.

style16.png

Einen Style zum “Vererben” freigeben

Seit ILIAS 8 ist es möglich, einen “zuoberst” in einem Kurs erstellten Style freizugeben, sodass er dann in untergeordneten Ordnern, Gruppen oder Lernmodulen ILIAS wiederverwendet werden kann.

Ausgangssituation: Du hast den Seiteneditor aufgerufen und dann über das Drop-Down-Menu die Funktion Content-Style aktiviert bzw. - im Lernmodul ILIAS - den Reiter Style gewählt.

Nun kannst du das Häckchen bei Wiederverwendung setzen und damit den Style freigeben, und Speichern.

style15.png

Einen Style “erben”

Ausgangssituation: Du befindest dich in einem Unterobjekt (Lernmodul, Gruppe, Ordner…) eines Kurses, wo du bereits einen eigenen Style angelegt und zum Vererben freigegeben hast.

Gruppe, Ordner: Du rufst nun den Seiteneditor auf, und rufst über das Drop-Down-Menu die Funktion Content-Style (ILIAS 8) auf.

Lernmodul ILIAS: Du befindest dich in den Einstellungen und wählst den Reiter Style.

Im Drop-Down-Menu Derzeitiger Style erscheint nun der freigegebene Style und kann angewählt werden. Anschliessend Speichern.

style17.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.