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

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

Changing the OTOBO Skin - Theme Setting

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

Creating a New Skin

Modifying CSS

If you have a docker OTOBO installation, the skins can be found in the following folder: /var/lib/docker/volumes/otobo_opt_otobo/_data/var/httpd/htdocs/skins/Agent otherwise in $OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME

New Folder

If no skin has been added yet, you will only find the "default" folder 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 a "css" folder inside the "my_skin" folder. The skins work in such a way that the default CSS skin is always loaded. In your own skin, you can then override the values from the default skin. For example, by overriding CSS classes from the default skin:

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

.Navigation {
  height: 100px;
}

Could be overridden, for example, with: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

override.

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

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

Available Skins / Themes

There are already skins created by other companies.

OTOBO Dark Skin / Theme

Link to the Skin / Theme: Github Dark Skin

Modern Skin / Theme by Efflux

Github Link to the Skin / Theme: Efflux Modern Skin