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

È possibile modificare l'aspetto del OTOBO sistema di ticket, per farlo è possibile creare un nuovo skin.

OTOBO skin - impostazione tema modificata

Ogni agente può scegliere autonomamente quale skin utilizzare. Dopo l'installazione di OTOBO, è disponibile solo il skin standard. Il skin OTOBO definisce il design dell'interfaccia. Nelle impostazioni personali, è possibile trovare l'opzione per sostituire il skin attuale con un altro.

Creare un nuovo skin

Modificare il CSS

Se si dispone di un'installazione di OTOBO in docker, i skin si trovano nella seguente cartella: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent altrimenti in * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nuova cartella

Se non è stato aggiunto alcun skin, nella cartella si troverà solo la cartella "default". Per aggiungere un nuovo skin, è necessario creare una nuova cartella, ad esempio "my_skin".

Modificare il design

Per modificare il design, è possibile creare una cartella "css" all'interno della cartella "my_skin". I skin funzionano in modo che venga caricato sempre il skin CSS standard. Nel proprio skin, è possibile sovrascrivere i valori del skin standard, ad esempio sovrascrivendo le classi CSS del skin predefinito:

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

.Navigation {
  height: 100px;
}

È possibile sovrascrivere con: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Successivamente, è necessario creare un file di configurazione nella cartella $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Il file dovrebbe avere la seguente struttura:

<?xml version="1.0" encoding="utf-8" ?>
<otobo_config version="2.0" init="Changes">
    <ConfigItem Name="AgentLogo" Required="0" Valid="1">
        <Description Translatable="0">Il logo visualizzato nell'intestazione dell'interfaccia dell'agente. L'URL dell'immagine deve essere un URL relativo alla cartella delle immagini del 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 / Temi disponibili

Esistono già skin create da altre aziende.

OTOBO Dark Skin / Tema

Collegamento al skin / tema: Github Dark Skin

Modern Skin / Tema di Efflux

Collegamento Github al skin / tema: Efflux Modern Skin