Znuny Skins, Themes und Design

Es ist möglich das Aussehen des Znuny Ticketsystems zu verändern, dafür kann man einen neuen Skin erstellen.

Znuny Skin - Theme Einstellung ändern

Jeder Agent kann selbst auswählen welchen Skin er verwenden will. Nach der Znuny Installation gibt es nur den Standard Skin. Der Znuny Skin definiert das Design der Oberfläche. In seinen persönlichen Einstellungen, findet man die Option seinen aktuellen Skin durch einen anderen Skin zu ersetzen.

Neuen Skin erstellen

CSS verändern

Falls Sie eine docker Znuny Installation haben, finden sich die Skins in folgendem Ordner: /var/lib/docker/volumes/znuny_opt_znuny /_data/var/ httpd/htdocs/skins/Agent andernfalls in * *$Znuny_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Neuer Ordner

Wenn noch kein Skin hinzugefügt wurde, dann findest sich in diesem Pfad nur der Ordner “default”. Um einen neuen Skin hinzuzufügen muss man zuerst einen neuen Ordner hinzufügen. Zum Beispiel “my_skin”.

Skins auf OpenITSMHub finden

OpenITSMHub listet Skins und Themes für ITSM-Systeme wie Znuny, OTRS Community Edition, OTOBO und Zammad. Dort können Sie nach kompatiblen Oberflächen suchen, bevor Sie ein eigenes Theme entwickeln.

Konkrete Beispiele:

• OTRS / Znuny Dark Theme (Slugin) — Dark-Mode-Theme für die Agentenoberfläche
• ModernSkin — moderner Agenten-Skin für OTRS Community Edition und Znuny
• Modern Skin Customer — moderner Skin für die Kundenoberfläche
• pretty.otrs.theme — Theme für Agenten- und Kundenoberfläche
• EIONET OTRS Theme — Theme der European Environment Agency mit Znuny-Kompatibilität

Prüfen Sie vor der Installation immer die angegebene Znuny-Version, Lizenz und Installationshinweise des jeweiligen Skins.

Design Verändern

Um nun das Design zu verändern kann man in den Ordner “my_skin ” den Ordner “css ” erstellen. Die Skins funktionieren so, das immer der Standard CSS Skin geladen wird. In dem eigenem Skin kann man daraufhin, die Werte aus dem Standard Skin überschreiben. Indem man Beispielsweise CSS Klassen aus dem Default Skin überschreibt:

CSS aus dem Standard Skin: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Könnte man zum Beispiel mit: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

überschreiben.

Daraufhin muss man noch eine Konfigurations Datei im Ordner $Znuny-HOME/Kernel/Config/Files/XML/{skinName}.xml. Diese sollte folgende Struktur haben:

<?xml version="1.0" encoding="utf-8" ?>
<znuny_config version="2.0" init="Changes">
    <ConfigItem Name="AgentLogo" Required="0" Valid="1">
        <Description Translatable="0">The logo shown in the header of the agent interface. The URL to the image must be
            a relative URL to the skin image directory.
        </Description>
        <Group>Framework</Group>
        <SubGroup>Frontend::Agent</SubGroup>
        <Setting>
            <Hash>
                <Item Key="URL">
                    https://softoft.de/Znuny_Wortmarke_Sub_Digital_Blau_156hoch-zugeschnitten-300x113.png
                </Item>
                <Item Key="StyleTop">13px</Item>
                <Item Key="StyleRight">75px</Item>
                <Item Key="StyleHeight">67px</Item>
                <Item Key="StyleWidth">244px</Item>
            </Hash>
        </Setting>
    </ConfigItem>

    <ConfigItem Name="Loader::Agent::Skin###001-softoftSkin" Required="0" Valid="1">
        <Description Translatable="0"></Description>
        <Group>Framework</Group>
        <SubGroup>Frontend::Agent</SubGroup>
        <Setting>
            <Hash>
                <Item Key="InternalName">softoftSkin</Item>
                <Item Key="VisibleName">softoftSkin</Item>
                <Item Key="Description"></Item>
                <Item Key="HomePage"></Item>
            </Hash>
        </Setting>
    </ConfigItem>
</znuny_config>

Häufig gestellte Fragen

Kann jeder Agent einen eigenen Znuny-Skin wählen?

Ja. Nach der Installation ist nur der Standard-Skin verfügbar; in den persönlichen Einstellungen kann ein anderer installierter Skin gewählt werden.

Wo liegen die Agenten-Skins in Znuny?

Bei einer Standardinstallation unter $Znuny_HOME/var/httpd/htdocs/skins/Agent; mit Docker im Znuny-Volume unter var/httpd/htdocs/skins/Agent.

Wie registriere ich einen eigenen Skin in Znuny?

Legen Sie einen Skin-Ordner mit CSS-Overrides an und ergänzen Sie eine Kernel/Config/Files/XML/{skinName}.xml, die Loader::Agent::Skin und optional AgentLogo registriert.