OTOBO Skins & Themes – Agent-Oberfläche anpassen

In diesem Guide: Erscheinungsbild der OTOBO-Agent-Oberfläche mit Skins und CSS anpassen.

Verwandte Themen: Kundenportal · OTOBO GUI · Systemkonfiguration

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

OTOBO Skin - Theme Einstellung ändern

Jeder Agent kann selbst auswählen welchen Skin er verwenden will. Nach der OTOBO Installation gibt es nur den Standard Skin. Der OTOBO 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‑OTOBO‑Installation haben, finden sich die Agent‑Skins hier:

/var/lib/docker/volumes/otobo_opt_otobo/_data/var/httpd/htdocs/skins/Agent/

Bei einer Installation ohne Docker lautet der Pfad:

$OTOBO_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”.

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 $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Diese sollte folgende Struktur haben:

<?xml version="1.0" encoding="utf-8" ?>
<otobo_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/Otobo_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>
</otobo_config>

Verfügbare Skins / Themes

Es gibt bereits von anderen Firmen erstellte Skins.

OTOBO Dark Skin / Theme

Link zum Skin / Theme: Github Dark Skin

Modern Skin / Theme von Efflux

Github Link zum Skin / Theme: Efflux Modern Skin

FAQ: OTOBO Skins & Themes

Wo werden OTOBO-Agent-Skins gespeichert?

In einer Docker-Installation unter /var/lib/docker/volumes/otobo_opt_otobo/_data/var/httpd/htdocs/skins/Agent/, andernfalls unter $OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME/.

Wie erstelle ich einen eigenen OTOBO-Skin?

Legen Sie neben default einen neuen Ordner an (z. B. my_skin), erstellen Sie darin einen css-Ordner und überschreiben Sie die gewünschten CSS-Klassen. Registrieren Sie den Skin anschließend über eine XML-Konfigurationsdatei unter $OTOBO_HOME/Kernel/Config/Files/XML/{skinName}.xml.

Bleibt mein eigener Skin nach einem OTOBO-Update erhalten?

Damit Änderungen dauerhaft bleiben, sollten Sie Ihre Skin-Dateien in ein OPM-Paket verpacken, statt das Live-Dateisystem direkt zu bearbeiten. So wird der Skin nach Updates sauber neu installiert.

Kann jeder Agent seinen eigenen Skin wählen?

Ja. Jeder Agent kann in seinen persönlichen Einstellungen einen verfügbaren Skin auswählen. Neu installierte Skins erscheinen dort, sobald sie per SysConfig registriert wurden.

Gibt es ein Dark Theme für OTOBO?

Ja — siehe den Community-OTOBO Dark Skin und den oben genannten Efflux Modern Skin.

Häufig gestellte Fragen

Wie wählen Agenten einen OTOBO-Skin aus und wo finden sie die Einstellung?

Jeder Agent kann seinen bevorzugten Skin direkt in den persönlichen Einstellungen der OTOBO-Agent-Oberfläche auswählen. Diese Option finden Sie im Profil-Menü, das sich üblicherweise oben rechts befindet. Nach einer frischen OTOBO-Installation steht zunächst nur der default-Skin zur Verfügung. Sobald Administratoren jedoch zusätzliche Skins oder Themes über die SysConfig registriert und im System hinterlegt haben, erscheinen diese automatisch in der Auswahlliste und können von den Agenten aktiviert werden. Dies ermöglicht eine individuelle Anpassung der Benutzeroberfläche an persönliche Präferenzen oder Team-Anforderungen.

Quellen:

• OTOBO Skins & Themes – Agent-Oberfläche anpassen
• Skins — OTOBO Developer Guide 11.0 documentation

Welche Schritte sind erforderlich, um einen neuen OTOBO-Skin zu erstellen und zu aktivieren?

Um einen neuen OTOBO-Skin zu erstellen, legen Sie zunächst ein neues Unterverzeichnis unter dem Pfad skins/Agent/ an, beispielsweise skins/Agent/my_custom_skin/. Innerhalb dieses neuen Ordners erstellen Sie einen css/-Ordner, in dem Sie die CSS-Dateien platzieren, die die Standard-Styles überschreiben sollen (z. B. Core.css). OTOBO lädt immer zuerst das Standard-CSS und wendet dann die Regeln Ihres benutzerdefinierten Skins an. Anschließend muss der Skin über eine XML-Konfigurationsdatei im Verzeichnis $OTOBO_HOME/Kernel/Config/Files/XML/ registriert werden. Diese Datei, benannt nach Ihrem Skin (z. B. my_custom_skin.xml), enthält die Definition des Skins, einschließlich InternalName und VisibleName, damit OTOBO ihn im Frontend und in den Benutzereinstellungen korrekt anzeigt.

Quellen:

• OTOBO Skins & Themes – Agent-Oberfläche anpassen
• Skins — OTOBO Developer Guide 11.0 documentation

Wo werden die Dateien für OTOBO-Agent-Skins gespeichert und wie unterscheidet sich der Pfad bei Docker-Installationen?

Die Dateien für OTOBO-Agent-Skins werden im Dateisystem unterhalb des Hauptverzeichnisses von OTOBO gespeichert. Bei einer nativen Installation ohne Docker finden Sie die Skins typischerweise unter $OTOBO_HOME/var/httpd/htdocs/skins/Agent/. Für Docker-basierte OTOBO-Installationen liegt der Pfad innerhalb des Docker-Volumes, genauer gesagt unter /var/lib/docker/volumes/otobo_opt_otobo/_data/var/httpd/htdocs/skins/Agent/. In beiden Fällen befindet sich für jeden Skin ein eigenes Unterverzeichnis in diesem Pfad, das die spezifischen CSS- und Bilddateien enthält. Das Verständnis dieser Pfade ist entscheidend, um neue Skins korrekt zu platzieren und bestehende anzupassen.

Quellen:

• OTOBO Skins & Themes – Agent-Oberfläche anpassen
• Skins — OTOBO Developer Guide 11.0 documentation

Wie stelle ich sicher, dass mein benutzerdefinierter OTOBO-Skin nach einem System-Update erhalten bleibt?

Um sicherzustellen, dass Ihr benutzerdefinierter OTOBO-Skin nach einem System-Update oder Neu-Deployment erhalten bleibt, sollten Sie die Skin-Dateien nicht direkt im Live-Dateisystem bearbeiten. Solche Änderungen könnten bei Upgrades überschrieben werden oder verloren gehen. Die empfohlene Methode ist, Ihre CSS-, Bild- und XML-Konfigurationsdateien in ein OPM-Paket (OTOBO Package Manager) zu schnüren. Ein OPM-Paket ermöglicht eine saubere Installation und Deinstallation Ihres Skins und stellt sicher, dass er bei zukünftigen OTOBO-Updates automatisch und korrekt wiederhergestellt oder neu installiert wird, ohne dass manuelle Eingriffe erforderlich sind.

Quellen:

• OTOBO Skins & Themes – Agent-Oberfläche anpassen
• Creating Your Own Themes — OTOBO Developer Guide 11.0 ...

Gibt es vorgefertigte Dark Themes oder moderne Skins für OTOBO?

Ja, für OTOBO gibt es mehrere vorgefertigte Community-Themes, die das Erscheinungsbild der Agent-Oberfläche erheblich verändern können. Ein populäres Beispiel ist der OTOBO Dark Skin auf GitHub, der eine dunkle Benutzeroberfläche bietet und die Augen bei längerer Nutzung schont. Ein weiteres modernes Theme ist der Efflux Modern Skin, der ein frisches und zeitgemäßes Design einführt. Diese Skins können heruntergeladen, in das entsprechende Skin-Verzeichnis von OTOBO platziert und anschließend von den Agenten in ihren persönlichen Einstellungen aktiviert werden, um das gewünschte Dark Mode- oder Modern-Design zu nutzen.

Quellen:

• OTOBO Skins & Themes – Agent-Oberfläche anpassen
• OTOBO Dark Skin auf GitHub
• Efflux Modern Skin