Thread "Skin/Template im Corporate Design für ILIAS-Lernmdoule"

Hallo,

ich würde gerne ein Skin bzw. Template im Corporate Design unserer Behörde entwickeln und dieses zusätzlich zu den Standard-Layouts einbinden (mit Icon und Beschreibungstext).

Mit Skins habe ich schon Erfahrungen gesammelt, weiß aber nicht, welche Verzeichnisse aus "Modules" nach "/Customizing/global/skin/..." kopiert und bearbeitet werden müssen.

Das Layout soll auch für Tablets und Smartphones geeignet sein.

Ideen für die Anzeige von Glossareinträgen, Medien und Inhaltsverzeichnis auf Basis von jquery habe ich bereits.

Meine PHP-Kenntnisse sind eher dünn. Da ich aber Erfahrungen in Java-Programmierung habe und die grundlegenden Prinzipien von PHP kenne, werde ich mich da auch noch hineindenken können.

Bin für jeden Tip dankbar!

Viele Grüße aus Brühl!

Wolfgang

Lieber Wolfgang,

Welche ILIAS Version verwendest du? Mit 5.2 kannst du einige Skinspezifische Arbeiten (ändern von Less-Variablen, definieren von Skin für bestimmte Bereiche von ILIAS, neu einfärben oder austauschen von Icons) direkt über das Benutzerinterface in der Administration erledigen (Layout and Styles), wenn dies im Setup freigeschaltet wurde.

Zu deiner Frage bezüglich den Skins. Ich hab dir einmal einen Skin angehängt, welcher aus meiner Sicht eine gute Grundstruktur für weitere Anpassungen bietet. Wichtig dabei, das CSS wird aus dem less kompiliert. Dies ermöglicht das einfache Anpassen des Skins via Variablen. Mehr infos zu less findest du hier: http://lesscss.org/.

Icons änderst du einfach, in dem du das entsprechende im Skin ersetzt (Name muss gleich bleiben). Für das ändern spezifischer Screens, muss du zuerst das entsprechende tpl.name_des_templates.html file identifizieren. Diese liegen in einem templates/default Ordner des Services/Modules. Am besten identifizierst du auf deinem Screen die entsprechende Stelle und durchsuchst ILIAS dann nach den entsprechenden CSS-Klassen. So solltest du das richtige Template finden.

E.g., willst du das Main Menu anpassen, erstellst du in deinem Skin den Ordner Services/MainMenu/tpl.main_menu.html und ersetzt so das tpl.main_menu.html file aus dem Core (welches in Services/MainMenu/templates/default/tpl.main_menu.html liegt).

PHP-Programmieren musst du nicht können, da du kein PHP im Skin Ordner verwenden, sondern lediglich html templates überschreiben kannst. Natürlich kannst du dort bei Bedarf JS mitladen.

Weitere Infos: http://www.ilias.de/docu/goto_docu_pg_68693_367.html

Hallo Timon,

unser System wurde erst kürzlich auf Version 5.1.12 hochgezogen.

Wurde die Möglichkeit, Layout und Styles zu ändern, erst mit V. 5.2 eingeführt oder gibts das auch unter 5.1.x?

Ich weiss zwar, das man unter "Einstellungen > Style" ein individuelles Stylesheet anlegen kann, aber meine bisherigen Versuche waren nicht besonders ansehnlich. Darüber hinaus müsste ich auch an den Seitenaufbau ran, damit die Darstellung z.B. von Glossareinträgen als Popup und nicht in einem iFrame erfolgt, da dieser für die mobile Ansicht ungeeignet ist. Darüber hinaus sollen meine Kollegen mit eine festen Vorlage arbeiten können, ohne sich mit den Styles beschäftigen zu müssen.

Der Hinweis auf lesscss.org ist auf jedenfall nützlich. Ich nehme mal an, dass die Datei "delos.less" ebenfalls umbenannt auf <skinname>.less werden muss, wenn sie in einem Skin-Verzeichnis liegt!?

Vielen Dank für Deine Rückmeldung!

Gruß, Wolfgang!

Nachtrag:

Die Popups werde ich nach Möglichkeit so einbauen, wie hier:

https://stanhub.com/tutorials/mobile-friendly-modal-window/

In der mobilen Ansicht ist das ganz ansprechend (Firefox: "Strg + Umschalt + M")

Mit 5.1 hast du diese Möglichkeiten noch  nicht. Dort musst du den Ornder den ich geschickt habe in das Verzeichnis Customizing/global/skin legen.

Achtung: Ich spreche hier nur den Skin an. Content Styles kannst du direkt im unter Administration->Layout erzeugen.

Danke!

Gruß, Wolfgang!

Hallo Timon,

vielen Dank schon mal für die Instruktionen.

Ich stehe gerade vor demselben Problem wie Wolfgang: Ich möchte gern einen eigenen Skin anlegen und diesen individualisieren.

Folgende Anleitung habe ich befolgt:

https://www.ilias.de/docu/ilias.php?ref_id=367&from_page=75028&obj_id=75025&obj_type=StructureObject&cmd=layout&cmdClass=illmpresentationgui&cmdNode=fr&baseClass=ilLMPresentationGUI

Auch nps und node sind auf dem Server installiert.

Leider wird nach wie vor kein zweiter Style im Ilias unter Layout -> System Styles angezeigt.
Unter den System-Styles kann ich nur "Ilias / Delos" auswählen. Es steht leider keine andere Option zur Verfügung, obwohl ich per FTP das komplette Skin hochgeladen habe (Delos modifiziert, auch die XML müsste stimmen).

Soeben bin ich noch auf folgende Anleitung gestoßen:

https://www.ilias.de/docu/goto_docu_pg_75028_367.html?lang=de

Auch diese hilft mir nicht weiter:

"Step 2: Create new System Style

1. Navigate to "Administration -> Layout and Styles" of you ILIAS Installation.
2. Add a new System Style and activate it."

... in meiner Ilias Version (v5.1.14) kann man unter System Styles gar keinen neuen Style hinzufügen, geschweige denn aktivieren.

Und an dieser Stelle komme ich leider nicht weiter. Hast du vielleicht einen Idee?

Vielen Dank schon mal,

Frau Dev

Hallo Frau Dev,

die Beschreibung unter dem genannten Link ist etwas missverständlich. Es muss nicht der gesamte Ordner "templates/default" kopiert werden, sondern nur der komplette Inhalt.

Der Pfad lautet dann "ilias/Customizing/global/skin/<client_ID>/", in dem die Dateien und Ordner des default-Templates liegen müssen.

Das "delos.css" muss umbenannt werden in "<client_ID>.css". Falls auch das "delos_cont.css" angepasst werden soll, muss es "<client_ID>_cont.css" heißen.

( <client_ID> immer durch die ID des Clients ersetzen! )

Wenn die "template.xml" korrekt angepasst ist, sollte das Skin dann auch sichtbar sein.

Gruß, Wolfgang!

Die Beschreibung von Wolfgang ist korrekt.

@Frau_Dev: Achtung diese Anleitung ist nur für die aktuelste Version von ILIAS gültig (5.2). Für 5.1 müssen die alten Anleitungen konsultiert werden: https://www.ilias.de/docu/ilias.php?ref_id=367&from_page=75028&obj_id=75025&obj_type=StructureObject&cmd=layout&cmdClass=illmpresentationgui&cmdNode=fr&baseClass=ilLMPresentationGUI

Hallo in die Runde,

ich gehe davon aus, dass ich die Inhalte richtig platziert habe:

ilias/Customizing/global/skin/newstyle

Auch die XML habe ich überarbeitet:

<?xml version="1.0" encoding="UTF-8"?>
<template xmlns="http://www.w3.org" version="1" name="newstyle">
  <style id="newstyle" name="newstyle" image_directory="images" css_file="newstyle" sound_directory="sound" font_directory="fonts"/>
</template>

Dementsprechend gibt es im Verzeichnis die Dateien:

newstyle.css und newstyle.less

Die delos_cont.css habe ich nicht verändert, die heißt auch noch genauso.

Ich weiß einfach nicht, wo der Fehler liegen könnte.

Danke schon mal!

Ist ein alter Thread, aber leider gibt es zu diesem Thema ja nicht so viel. :-)

Stimmen denn die Rechte an den Dateien?
Beim kopieren erhalten die Dateien die Rechte des kopierenden Nutzers, es sollte also angepast werden mit:

chown -R apache. Demo_Skin/

# gilt nur für CentOS bzw. RPM Systeme, auf anderen Distributionen heiß der Nutzer meist www-data

muss man nodejs und npm auf pc oder server installieren
ich habe nun ahnung 
kann eine von anfang zeigen wie man skin oder farbe ändert