OTOBO/Znuny Skin Development

A skin overrides the default look and feel of the agent or customer interface with custom CSS. Skins are packaged as regular .opm packages and registered via the SysConfig.

Directory Structure

text

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

The directory name (MySkin) is the internal name of the skin.

SysConfig Registration

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 provided by the MyPackage package.</Description>
        <Navigation>Frontend::Agent::View</Navigation>
        <Value>
            <Hash>
                <Item Key="InternalName">MySkin</Item>
                <Item Key="VisibleName">My Skin</Item>
                <Item Key="Description">A custom agent skin.</Item>
                <Item Key="HomePage">https://example.com</Item>
            </Hash>
        </Value>
    </Setting>
</otobo_config>

For customer skins, use Loader::Customer::Skin###... with the Navigation Frontend::Customer::View. For Znuny/OTRS, the root element is otrs_config.

Writing CSS

The skin CSS is loaded in addition to the default skin. You only need to override what you want to change:

css

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

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

Quick Start

The Skin Generator creates the complete structure—.sopm, SysConfig XML, and CSS—in a single step. Afterward, build the package as described in Building OTOBO & Znuny Packages.

Activation

After installation, agents can select the skin under Personal Preferences → Interface, or you can set the default via Loader::Agent::DefaultSelectedSkin.