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

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

OTOBO Skin - Thème Paramètres de modification

Chaque agent peut choisir quel skin il souhaite utiliser. Après l'installation d'OTOBO, il n'y a que le skin standard. Le skin OTOBO définit la conception de l'interface. Dans ses paramètres personnels, vous trouverez l'option de remplacer son skin actuel par un autre skin.

Créer un nouveau skin

Modifier le CSS

Si vous avez une installation OTOBO Docker, les skins se trouvent dans le répertoire 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 répertoire

Si aucun skin n'a été ajouté, vous ne trouverez que le répertoire "_default" dans ce chemin. Pour ajouter un nouveau skin, vous devez d'abord créer un nouveau répertoire. Par exemple, "my_skin".

Modifier la conception

Pour modifier la conception, vous pouvez créer un répertoire "css" dans le répertoire "my_skin". Les skins fonctionnent de telle sorte que le skin CSS standard est toujours chargé. Dans votre propre skin, vous pouvez écraser les valeurs du skin standard en écrivant, par exemple, des classes CSS du skin par défaut :

CSS du skin standard : Skin/default/Core.css

.Navigation {
  height: 100px;
}

Vous pouvez écraser cela avec : /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Ensuite, vous devez créer un fichier de configuration dans le répertoire $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Ce fichier 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">Le logo affiché dans l'en-tête de l'interface de l'agent. L'URL de l'image doit être une URL relative au répertoire d'images du skin.
        </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 d'Efflux

Lien Github vers le skin / thème : Efflux Modern Skin