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

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

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

Modifier le paramètre de skin / thème Znuny

Chaque Agent peut choisir lui-même le skin qu’il souhaite utiliser. Après l’installation de Znuny, seul le skin par défaut est disponible. Le skin Znuny 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 de Znuny, les skins se trouvent dans le dossier suivant : /var/lib/docker/volumes/znuny_opt_znuny /_data/var/ httpd/htdocs/skins/Agent sinon dans * *$Znuny_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 sorte que le skin CSS standard est toujours chargé. Dans votre propre skin, vous pouvez ensuite écraser les valeurs du skin standard. Par exemple, en écrasant les classes CSS du skin par défaut :

CSS du skin standard : 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 $Znuny-HOME/Kernel/Config/Files/XML/{skinName}.xml. Celui-ci doit avoir la structure suivante :

<?xml version="1.0" encoding="utf-8" ?>
<znuny_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/Znuny_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>
</znuny_config>