Open ITSM Hub

Skin-Generator

Erzeugen Sie ein vollständiges Skin-Paket-Gerüst für OTOBO, Znuny oder OTRS CE — inklusive .sopm-Manifest, SysConfig-Loader-Eintrag und CSS-Datei.

Skin-Konfiguration

CamelCase, ohne Leerzeichen.
Technischer Name (Verzeichnisname unter skins/).
Wird Agenten/Kunden in den Einstellungen angezeigt.
Verzeichnisstruktur
Legen Sie die CSS-Datei(en) an den in der Filelist genannten Pfaden an, danach bauen Sie das Paket mit opmbuild build MySkin.sopm.

MyAwesomeSkin-1.0.0.sopm

<?xml version="1.0" encoding="utf-8" ?>
<otobo_package version="1.1">
    <Name>MyAwesomeSkin</Name>
    <Version>1.0.0</Version>
    <Framework>11.0.x</Framework>
    <Vendor>Example GmbH</Vendor>
    <URL>https://example.com/</URL>
    <License>GPL-3.0</License>
    <Description Lang="en">A custom skin.</Description>
    <Description Lang="de">A custom skin.</Description>
    <Filelist>
        <File Permission="660" Location="Kernel/Config/Files/XML/MyAwesomeSkin.xml" />
        <File Permission="644" Location="var/httpd/htdocs/skins/Agent/MyAwesomeSkin/css/MyAwesomeSkin.css" />
    </Filelist>
</otobo_package>

Kernel/Config/Files/XML/MyAwesomeSkin.xml

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

var/httpd/htdocs/skins/Agent/MyAwesomeSkin/css/MyAwesomeSkin.css

/*
 * My Awesome Skin - Agent skin
 * Package: MyAwesomeSkin
 *
 * This file is loaded on top of the default skin. Override CSS custom
 * properties and selectors here to change the look and feel.
 */

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

/* Example: recolor the main navigation */
#Navigation > li.Selected > a {
    background-color: var(--oitsm-skin-accent);
}