Znuny / OTRS ((Community Edition)) - Skins - Themes - Design

It is possible to change the appearance of the Znuny ticket system by creating a new skin.

Znuny ticket system skin - theme setting

Changing the Znuny skin - theme setting

Every Agent can choose which skin they want to use. After the Znuny installation, only the default skin is available. The Znuny skin defines the design of the interface. In their personal settings, one can find the option to replace their current skin with another skin.

Creating a new skin

Changing CSS

If you have a docker Znuny installation, the skins can be found in the following folder: /var/lib/docker/volumes/znuny_opt_znuny /_data/var/ httpd/htdocs/skins/Agent otherwise in * *$Znuny_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

New folder

If no skin has been added yet, you will only find the folder “default” in this path. To add a new skin, you must first add a new folder. For example, “my_skin”.

Changing the design

To change the design, you can create the folder “css” inside the “my_skin” folder. Skins work by always loading the standard CSS skin. In your own skin, you can then override the values from the standard skin. For example, by overriding CSS classes from the default skin:

CSS from the standard skin: Skin/default/Core.css

.Navigation {
  height: 100px;
}

You could, for example, override it with: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

After that, you need a configuration file in the folder $Znuny-HOME/Kernel/Config/Files/XML/{skinName}.xml. This should have the following structure:

<?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>