Zum Inhalt springen
Znuny Logo Znuny Community Docs

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 Ticketsystem Skin - Theme Einstellung

Znuny Skin - Theme Einstellung ändern

Abschnitt betitelt „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

Abschnitt betitelt „Neuen Skin erstellen“

CSS verändern

Abschnitt betitelt „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

Abschnitt betitelt „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

Abschnitt betitelt „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:

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

Design Verändern

Abschnitt betitelt „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 seinen Znuny-Skin individuell anpassen oder auswählen?

Ja, jeder Agent hat die Möglichkeit, seinen bevorzugten Skin aus den installierten Optionen in seinen persönlichen Einstellungen auszuwählen. Nach der Erstinstallation von Znuny ist standardmäßig nur der "default" Skin verfügbar. Um einen anderen Skin zu nutzen, muss dieser zuerst installiert und registriert werden. Die Auswahl erfolgt dann im Agenten-Interface unter den persönlichen Präferenzen, wo eine Dropdown-Liste der verfügbaren Skins angezeigt wird. Dies ermöglicht eine individuelle Anpassung der Benutzeroberfläche an die Vorlieben des jeweiligen Agenten.

Quellen:

Wo finde ich die Verzeichnisse für Znuny Agenten-Skins in einer Standard- und Docker-Installation?

Die Speicherorte der Znuny Agenten-Skins unterscheiden sich je nach Installationstyp. Bei einer Standardinstallation von Znuny finden Sie die Skins typischerweise unter dem Pfad $Znuny_HOME/var/httpd/htdocs/skins/Agent. $Znuny_HOME steht hierbei für das Hauptverzeichnis Ihrer Znuny-Installation. Wenn Sie hingegen eine Docker-basierte Znuny-Installation verwenden, liegen die Skins innerhalb des Znuny-Volumes. Der genaue Pfad lautet hier /var/lib/docker/volumes/znuny_opt_znuny/_data/var/httpd/htdocs/skins/Agent. In diesen Verzeichnissen werden sowohl der Standard-Skin als auch alle benutzerdefinierten Skins abgelegt, die Sie erstellen oder installieren möchten.

Quellen:

Wie erstelle und registriere ich einen neuen, benutzerdefinierten Skin für Znuny?

Um einen neuen Znuny-Skin zu erstellen und zu registrieren, beginnen Sie damit, einen neuen Ordner (z.B. "my_skin") im Agenten-Skin-Verzeichnis anzulegen (siehe FAQ 2 für die genauen Pfade). Innerhalb dieses neuen Skin-Ordners erstellen Sie einen css-Ordner, in dem Sie Ihre benutzerdefinierten CSS-Dateien ablegen. Diese Dateien dienen dazu, die Standard-CSS-Regeln von Znuny zu überschreiben und das Design anzupassen. Der letzte und entscheidende Schritt ist die Registrierung des Skins durch eine XML-Konfigurationsdatei. Diese Datei muss im Verzeichnis $Znuny_HOME/Kernel/Config/Files/XML/ abgelegt werden und den Namen {skinName}.xml tragen (z.B. my_skin.xml). In dieser XML-Datei müssen Sie den Loader::Agent::Skin mit dem internen und sichtbaren Namen Ihres Skins definieren und optional ein AgentLogo konfigurieren, wie im Beispiel der Dokumentation gezeigt.

Quellen:

Wie funktioniert die CSS-Anpassung, wenn ich einen eigenen Znuny-Skin erstelle?

Bei der Erstellung eines benutzerdefinierten Znuny-Skins basiert das System auf einem Überschreibungsmechanismus für CSS. Zuerst lädt Znuny die Standard-CSS-Stile des Systems. Anschließend werden die CSS-Dateien Ihres benutzerdefinierten Skins geladen. Dies bedeutet, dass Sie nicht alle Stile neu definieren müssen, sondern lediglich die spezifischen Regeln, die Sie ändern möchten. Indem Sie CSS-Klassen oder IDs aus dem Standard-Skin in Ihren eigenen CSS-Dateien (die sich im css-Ordner Ihres Skins befinden) neu definieren, überschreiben Ihre Regeln die Standardwerte. Ein Beispiel hierfür wäre, wenn der Standard-Skin .Navigation { height: 100px; } definiert, könnten Sie in Ihrem Skin einfach .Navigation { height: 30px; } festlegen, um die Höhe der Navigationsleiste anzupassen. Dieser Ansatz ermöglicht eine effiziente und zielgerichtete Designanpassung.

Quellen:

Wo kann ich fertige Znuny Skins und Themes finden und worauf sollte ich bei der Auswahl achten?

Fertige Znuny Skins und Themes können auf spezialisierten Plattformen gefunden werden, die sich auf ITSM-Systeme konzentrieren. Eine solche Ressource ist OpenITSMHub, die eine Liste von Skins und Themes für Znuny, OTRS Community Edition, OTOBO und Zammad bereitstellt. Dort finden Sie konkrete Beispiele wie das OTRS / Znuny Dark Theme (Slugin) oder den ModernSkin. Bevor Sie einen Skin installieren, ist es unerlässlich, die Kompatibilität mit Ihrer Znuny-Version zu prüfen, die Lizenzbedingungen zu verstehen und die Installationshinweise des jeweiligen Skins sorgfältig zu lesen, um eine reibungslose Integration und Funktionalität zu gewährleisten.

Quellen: