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

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

Il est possible de modifier l’apparence du système de tickets OTOBO ; pour cela, vous pouvez créer un nouveau Skin.

Modifier le paramètre de Skin / Theme 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 permettant de remplacer son Skin actuel par un autre.

Créer un nouveau Skin

Modifier le CSS

Si vous avez une installation docker 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é, vous ne trouverez dans ce chemin que le dossier “default”. Pour ajouter un nouveau Skin, vous devez 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 manière 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 les classes CSS du Skin par défaut :

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

.Navigation {
  height: 100px;
}

Vous pourriez par exemple écraser avec : /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Ensuite, vous devez ajouter un fichier de configuration dans le dossier $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Celui-ci doit 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 / Themes disponibles

Il existe déjà des Skins créés par d’autres entreprises.

OTOBO Dark Skin / Theme

Lien vers le Skin / Theme : Github Dark Skin

Modern Skin / Theme par Efflux

Lien Github vers le Skin / Theme : Efflux Modern Skin