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

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

Change 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 skin.

Create New Skin

Change 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, then only the "default" folder will be found in this path. To add a new skin, you must first add a new folder. For example, "my_skin".

Change Design

To change the design, you can create the "css" folder within the "my_skin" folder. Skins work by always loading the default CSS skin. 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;
}

After that, you need 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

Skins created by other companies are already available.

OTOBO Dark Skin / Theme

Link to Skin / Theme: Github Dark Skin

Modern Skin / Theme by Efflux

Github Link to Skin / Theme: Efflux Modern Skin