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 wenigen 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
Zudem ist es möglich, seine eigenen Inhalte mit einem bereits bestehenden Style - einem Standard-Style ILIAS oder einem Style, der jemand anderes erstellt und exportiert hat - zu versehen.
Grundlegendes: den Style-Editor aufrufen
Styles lassen sich in folgenden Elementen verwenden:
im Inhaltsbereich von Kursen, Gruppen und Ordnern
im Lernmodul ILIAS
Im Inhaltselement Inhaltsseite innerhalb von Lernsequenzen
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 Content-Style auf.
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 Lokales Stylesheet anlegen.
Falls schon ein anderer Style eingetragen ist, kannst du direkt Style editieren klicken, und dann weiter bei Anwendungsbeispiele.
Gib nun einen aussagekräftigen Titel ein, und ev. einen Kommentar dazu, was geändert wird, und bestätige mit Speichern:
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 im Abschnitt Anwendungsbeispiele.
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.
Nun wählst du den Punkt Style aus:
Anschliessend gelangst du auf die im folgenden abgebildete Seite. Meist ist hier einer der System-Styles Standard, Docu Style oder ILIAS6 Default Content Style als derzeitiger Style eingetragen. In diesem Fall klickst du Lokales Stylesheet anlegen.
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:
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:
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.
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.
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”…
oder einen Textblock anklickt und die Information links im “Slate” nachschaut.
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. |
Bemerkung | Das Zeichenformat der Links müsste separat in der Styleklasse Link angepasst werden. |
Beispiel: einige Parameter verändert   | |
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. |
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 8: Wähle den Reiter Export und klicke dann Exportdatei erzeugen (XML).
ILIAS erzeugt dann die Exportdatei im .zip-Format und legt sie lokal auf deinem Gerät im Verzeichnis Downloads ab.
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 Content-Style aktiviert bzw. - im Lernmodul ILIAS - den Reiter Style gewählt.
Falls dort als aktueller Style nicht Standard, Docu Style oder ILIAS6 Default Content 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.
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.
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 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.
