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

É possível alterar a aparência do sistema de tickets OTOBO, para isso pode-se criar uma nova skin.

Alterar Configuração de Skin / Tema OTOBO

Cada Agente pode escolher qual skin usar. Após a instalação do OTOBO, existe apenas a skin padrão. A skin do OTOBO define o design da interface. Nas suas configurações pessoais, encontra-se a opção de substituir a sua skin atual por outra skin.

Criar Nova Skin

Alterar CSS

Se tiver uma instalação do OTOBO em docker, as skins encontram-se na seguinte pasta: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent/ caso contrário em * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nova Pasta

Se ainda não foi adicionada nenhuma skin, então neste caminho encontra-se apenas a pasta "default". Para adicionar uma nova skin, é preciso primeiro adicionar uma nova pasta. Por exemplo, "my_skin".

Alterar Design

Para alterar o design, pode-se criar a pasta "css" dentro da pasta "my_skin". As skins funcionam de tal forma que a skin CSS padrão é sempre carregada. Na própria skin, pode-se então sobrescrever os valores da skin CSS padrão. Por exemplo, sobrescrevendo classes CSS da skin padrão:

CSS da skin padrão: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Poderia ser sobrescrito, por exemplo, com: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Depois disso, é necessário um arquivo de configuração na pasta $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Este deve ter a seguinte estrutura:

<?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 / Temas Disponíveis

Já existem skins criadas por outras empresas.

OTOBO Dark Skin / Tema

Link para a Skin / Tema: Github Dark Skin

Modern Skin / Tema da Efflux

Link do Github para a Skin / Tema: Efflux Modern Skin