OTOBO / OTRS ((Community Edition)) - Skins - Thèmes - Design

Il est possible de modifier l'apparence du système de tickets OTOBO en créant un nouveau skin.

Modifier le réglage du Skin / Thème OTOBO

Chaque Agent peut choisir lui-même le skin qu'il souhaite utiliser. Après l'installation d'OTOBO, seul le skin par défaut est disponible. Le skin OTOBO définit le design de l'interface. Dans ses paramètres personnels, on trouve l'option pour remplacer le skin actuel par un autre.

Créer un nouveau Skin

Modifier le CSS

Si vous avez une installation Docker d'OTOBO, les skins se trouvent dans le dossier suivant : /var/lib/docker/volumes/otobo_opt_otobo/_data/var/httpd/htdocs/skins/Agent sinon dans * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nouveau dossier

Si aucun skin n'a encore été ajouté, alors vous ne trouverez que le dossier "default" à cet emplacement. Pour ajouter un nouveau skin, il faut d'abord ajouter un nouveau dossier. Par exemple "my_skin".

Modifier le Design

Pour modifier le design, vous pouvez créer le dossier "css" dans le dossier "my_skin". Les skins fonctionnent de telle sorte que le skin CSS par défaut est toujours chargé. Dans votre propre skin, vous pouvez ensuite écraser les valeurs du skin par défaut. Par exemple, en écrasant des classes CSS du skin par défaut :

CSS du skin par défaut : Skin/default/Core.css

.Navigation {
  height: 100px;
}

Pourrait être remplacé, par exemple, par : /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Ensuite, vous devez créer un fichier de configuration dans le dossier $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Celui-ci devrait avoir la structure suivante :

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

Skins / Thèmes disponibles

Il existe déjà des skins créés par d'autres entreprises.

OTOBO Dark Skin / Thème

Lien vers le Skin / Thème : Github Dark Skin

Modern Skin / Thème par Efflux

Lien Github vers le Skin / Thème : Efflux Modern Skin