DataBay
ILIAS an die corporate identity anpassen
Das Standard-Design von ILIAS gefällt Ihnen nicht? Es passt nicht zu Ihrer Hochschule/Ihrem Unternehmen?
Gar kein Problem: Sie müssen ILIAS nicht "out of the box" verwenden, sondern können Ihr eigenen ILIAS ganz individuell gestalten!
Hier sehen Sie System- und Content-Style der Databay AG.
Ihnen ist sicherlich aufgefallen, dass in diesem Bereich nicht nur der Seiteninhalt verändert ist, sondern die ganze Demo anders ausschaut, mitsamt Menü, Kopfleiste und Co. Das Design das Sie hier sehen, wurde uns freundlicherweise von der Databay AG zur Verfügung gestellt. Schauen Sie doch mal auf deren Website nach; Sie werden schnell feststellen, dass ILIAS an das corporate Design des Unternehmens angepasst wurde.
Klasse, wie viel möglich ist, nicht wahr?
Wie passt man ILIAS an die individuellen Bedürfnisse an?
Dafür benötigen Sie zunächst einmal Zugriff auf die Administration der ILIAS-Installation. Unter Administration » Layout und Navigation finden Sie den Eintrag Layout. Haben Sie Zugriff? Dann finden Sie nachfolgend mehr Informationen.
ILIAS "out of the box" wird mit dem Standard-Delos Design geliefert. Dieses können Sie nicht bearbeiten, können jedoch einen neuen Style anlegen, der dann bearbeitet werden kann. Bei Bedarf kann so jederzeit zurück zum ILIAS-Design gewechselt werden. Back to the roots sozusagen.
So gehen Sie vor:
Öffnen Sie den Reiter System-Styles (Administration » Layout und Navigation » Layout). Um einen neuen Style anzulegen, klicken Sie auf die Schaltfläche Neuer System-Style. Jetzt müssen noch ID und Titel vergeben werden, um den Style eindeutig zu identifizieren und es kann los gehen.
In der Bearbeitung eines System-Styles gibt es verschiedene Reiter. Im Reiter Less haben Sie die Möglichkeit die verwendeten Farben im System anzupassen, die Schrift zu wechseln, die Schriftgröße zu ändern und vieles mehr. Denken Sie daran, Ihre Änderungen durch Klicken auf Variablen aktualisieren zu speichern.
Im Reiter Icons können Sie entweder die Farben der svg-Icons systemweit anpassen oder jedes Icon einzeln farblich anpassen bzw. durch eine andere svg-Datei ersetzen. In der Icon Galerie erhalten Sie einen Überblick über alle aktuell im System Style enthaltenen Icons.
Übrigens: Wenn Sie das ILIAS-Icon oben links in der Kopfleiste durch das Logo Ihres Unternehmens ersetzen wollen, tauschen Sie im Unterreiter Bearbeitung nach Icon die Datei HeaderIcon.svg durch eine svg-Datei des gewünschten Logos aus.
Alle Änderungen vorgenommen?
Dann muss der System-Style nun noch aktiv geschaltet werden. Gehen Sie dazu zurück zur Übersicht über alle Syste-Styles und aktivieren die Checkbox Aktiv (Speichern nicht vergessen). Hier können Sie zudem den Style zum Standard-Style machen und den aktiven Style bestehender Benutzer wechseln - dann hat jeder Benutzer automatisch diesen Style eingestellt.
Sie haben keinen Zugriff auf die Administration? Kein Problem: gestalten Sie dennoch Ihren individuellen Kurs
Mit Ihrem persönlichen Style können Sie Ihre Inhalte individuell und ansprechend gestalten!
Alle Seiteninhalte die Sie hier sehen wurden mit einem individuellen Stylesheet gestaltet. Sofern Sie Schreib- und Bearbeitungsrechte in einem Kurs, einer Gruppe etc. haben, können Sie Änderungen am Design vornehmen und so Texte formatieren, Blöcke gestalten und vieles mehr.
Ein Stylesheet ist ein digitales Dokument, das Formatierungshinweise für andere Dateien enthält. Eine Internetseite zum Beispiel muss immer auch Zugriff auf ein Stylesheet haben, damit Aspekte wie Farben, Schriftarten und -Größe, Blöcke und Co. im Aussehen angepasst werden können.
Auch ILIAS greift auf Stylesheets zurück. Es wird unterschieden zwischen dem systemweiten Style (System-Style), den Administratoren bearbeiten können und den "content styles" (dem Stylesheet), auf die Sie als Kurs- bzw. Gruppenadministrator Zugriff haben.
Den eigenen Bereich individuell zu gestalten und ihn so im Design von anderen Inhalten abzuheben, kann viele Vorteile haben: zum Beispiel eine bessere Übersichtlichkeit und Verständlichkeit oder die Hervorhebung wichtiger Inhalte. Ein einladendes Design kann den Nutzer darüberhinaus dazu verleiten, mehr Zeit auf der jeweiligen Seite zu verbringen. Es lohnt sich also, immer auch einen Blick auf das Design eines Kurses oder eines Objektes zu werfen
Das ILIAS-Stylesheet begegnet Ihnen immer bei den Objekten, die Sie mit dem Seiten-Editor bearbeiten bzw. gestalten können, wie zum Beispiel in Kursen, Gruppen oder Ordnern, aber auch in Lernmodulen, Portfolios, Blogs und Wikis.
Na neugierig? Dann legen Sie gleich los!
Individuelle Stylesheets anzulegen ist gar nicht so schwer. Wenn Sie viele Änderungen vornehmen wollen, werden Sie jedoch etwas Zeit investieren müssen. ABER: es wird sich lohnen!
Überall in ILIAS, wo Sie mit dem Seiteneditor arbeiten können, können Sie einen individuellen Style anlegen. Die Funktion steht Ihnen somit u.a. in Kursen und Gruppen sowie Lernmodulen und Wikis zur Verfügung. Wie Sie zum Stylesheet des Objekts gelangen, hängt von dem spezifischen Objekt an: So finden Sie bspw. den Style von Kursen und Gruppen im Slate der Seitenbearbeitung im Aktionenmenü unter Style (ab ILIAS 7).
Sofern systemseitig eine Auswahl an Stylesheets vorgegeben ist, können Sie hier ein voreingeselltes Stylesheet übernehmen oder alternativ auf Individuelles Stylesheet anlegen klicken, um Ihrer eigenen Kreativität Raum zu bieten.
Übrigens: an gleicher Stelle können Sie Ihr individuelles Stylesheet auch wieder löschen und zurück zum Standard-Style wechseln.
Grundsätzlich werden Styles nicht "vererbt". Erstellen Sie also ein individuelles Stylesheet in einem Kurs und legen anschließend in diesem Kurs einen Ordner an, wird er den vom System vorgegebenen Standard-Style haben. Sie können jedoch problemlos einen bestehenden Style kopieren (Schreibrechte vorausgesetzt). Klicken Sie auch dazu auf Individuelles Stylesheet anlegen, vergeben jedoch im nächsten Schritt keinen Namen, sondern wählen unter Option 3 den gewünschten Style aus.
In den Stylesheets werden graphische Einstellungen zu verschiedenen Elementen einer Seite gespeichert, wie beispielsweise Absatz- und Zeichenformate von Texten sowie Design von Blöcken, Links und Medien. Zudem können in Stylesheets individuelle Farben für die einzelnen Seitenelemente eingerichtet werden.
Im Reiter Styleklassen finden Sie sämtliche Designeinstellungen von Seitenelementen, auf die Sie Zugriff haben. Hier können Sie abhängig von der Styleklasse bestehende Elemente bearbeiten oder sogar neue hinzufügen (nicht in jeder Styleklasse möglich), die Sie dann vom Seiteneditor aus anwenden können.
Klicken Sie auf Bearbeiten neben einem bestehenden Element oder auf die Schaltfläche Neuen Style hinzufügen, um einen gänzlich neuen zu gestalten.
Übrigens: Bei einigen Styles können Sie in der Bearbeitung den Reiter :hover aufrufen. Alles was sich gestalterisch in diesem Reiter vom Reiter Normal unterscheidet, führt zu entsprechenden optischen Änderungen am Seitenelement, sobald mit der Computer-Maus darüber gefahren wird.
Hinweis: Sie müssen nicht zwingend bewandert in CSS sein um das Stylesheet anzupassen, jedoch sind Kenntnisse über grundlegende Begriffe wie "Margin" sicherlich von Vorteil.
Und noch ein Tipp: Wenn Sie im Reiter Farben Farbschemata einrichten, können Sie diese in der Stylebearbeitung einfach verwenden. Dadurch müssen Sie nicht jedes Mal den Hex-Code eintippen (bspw. #ffffff). Legen Sie eine neue Farbe an, benennen diese und verwenden sie anschließend in der Stylebearbeitung in Form von "!farbenname". Zudem können Sie ganz einfach Farbabstufungen verwenden, indem Sie bspw. "!farbenname (20)" (20% blasser) eintippen.
Mehr Inspiration gefällig?
Dann schauen Sie sich im restlichen Look&Feel-Bereich um!
Zum Look&Feel-Bereich