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

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 interface. In their personal settings, users can find the option to replace their current skin with another one.

Creating a new skin

Changing CSS

If you have a docker OTOBO installation, the skins are located 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. 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;
}

Afterwards, you need to create a configuration file in the folder $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. This 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