OTOBO/Znuny Skin-Entwicklung

Ein Skin überschreibt das Standard-Aussehen der Agent- oder Customer-Oberfläche mit eigenem CSS. Skins werden als reguläres .opm-Paket ausgeliefert und über die SysConfig registriert.

Verzeichnisstruktur

var/httpd/htdocs/skins/Agent/MySkin/css/MySkin.css
var/httpd/htdocs/skins/Customer/MySkin/css/MySkin.css

Der Verzeichnisname (MySkin) ist der interne Name des Skins.

SysConfig-Registrierung

Registrieren Sie den Skin in Kernel/Config/Files/XML/MyPackage.xml:

<?xml version="1.0" encoding="utf-8"?>
<otobo_config version="2.0" init="Application">
    <Setting Name="Loader::Agent::Skin###100-MySkin" Required="0" Valid="1">
        <Description Translatable="1">Agent-Skin bereitgestellt vom Paket MyPackage.</Description>
        <Navigation>Frontend::Agent::View</Navigation>
        <Value>
            <Hash>
                <Item Key="InternalName">MySkin</Item>
                <Item Key="VisibleName">My Skin</Item>
                <Item Key="Description">Ein individueller Agent-Skin.</Item>
                <Item Key="HomePage">https://example.com</Item>
            </Hash>
        </Value>
    </Setting>
</otobo_config>

Für Kunden-Skins verwenden Sie Loader::Customer::Skin###... mit Navigation Frontend::Customer::View. Bei Znuny/OTRS lautet das Wurzelelement otrs_config.

CSS schreiben

Das Skin-CSS wird zusätzlich zum Default-Skin geladen — Sie überschreiben nur, was Sie ändern möchten:

:root {
    --oitsm-skin-accent: #10b981;
}

#Navigation > li.Selected > a {
    background-color: var(--oitsm-skin-accent);
}

Schnell starten

Der Skin-Generator erzeugt das komplette Gerüst — .sopm, SysConfig-XML und CSS — in einem Schritt. Danach bauen Sie das Paket wie in OTOBO- & Znuny-Paket bauen beschrieben.

Aktivieren

Nach der Installation wählen Agenten den Skin unter Persönliche Einstellungen → Oberfläche, oder Sie setzen den Default über Loader::Agent::DefaultSelectedSkin.