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

Het is mogelijk om het uiterlijk van het OTOBO ticketsysteem te wijzigen, hiervoor kan men een nieuwe skin creëren.

OTOBO Skin - Theme instelling wijzigen

Elke Agent kan zelf kiezen welke skin hij wil gebruiken. Na de OTOBO installatie is er alleen de standaard skin. De OTOBO skin definieert het design van de interface. In zijn persoonlijke instellingen vindt men de optie om zijn huidige skin te vervangen door een andere skin.

Nieuwe Skin creëren

CSS wijzigen

Als u een docker OTOBO installatie heeft, bevinden de skins zich in de volgende map: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent/ anders in * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nieuwe map

Als er nog geen skin is toegevoegd, dan vindt men in dit pad alleen de map "default". Om een nieuwe skin toe te voegen moet men eerst een nieuwe map toevoegen. Bijvoorbeeld "my_skin".

Design wijzigen

Om nu het design te wijzigen kan men in de map "my_skin" de map "css" creëren. De skins werken zo, dat altijd de standaard CSS skin wordt geladen. In de eigen skin kan men vervolgens de waarden uit de standaard skin overschrijven. Door bijvoorbeeld CSS klassen uit de default skin te overschrijven:

CSS uit de standaard skin: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Zou men bijvoorbeeld kunnen overschrijven met: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Daarna moet men nog een configuratiebestand in de map $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml aanmaken. Deze zou de volgende structuur moeten hebben:

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

Beschikbare Skins / Themes

Er zijn al skins van andere bedrijven gemaakt.

OTOBO Dark Skin / Theme

Link naar de Skin / Theme: Github Dark Skin

Modern Skin / Theme van Efflux

Github Link naar de Skin / Theme: Efflux Modern Skin