OTOBO / OTRS ((Edição Comunitária)) - Skins - Temas - Design

É possível alterar a aparência do OTOBO sistema de tickets, para isso, você pode criar um novo skin.

OTOBO Skin - Alterar Configuração de Tema

Cada Agente pode escolher qual skin deseja usar. Após a instalação do OTOBO, há apenas o skin padrão. O skin do OTOBO define o design da interface. Em suas configurações pessoais, você encontrará a opção de substituir o skin atual por outro.

Criar Novo Skin

Alterar CSS

Se você tiver uma instalação do OTOBO em docker, os skins estão localizados no seguinte diretório: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent ou, caso contrário, em * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Novo Diretório

Se ainda não foi adicionado um Skin, você encontrará apenas o diretório "default" nesse caminho. Para adicionar um novo Skin, você precisa criar um novo diretório primeiro. Por exemplo, "my_skin".

Alterar Design

Para alterar o design, você pode criar um diretório "css" dentro do diretório "my_skin". Os skins funcionam de forma que o CSS padrão é sempre carregado. Em seu próprio skin, você pode sobrescrever os valores do skin padrão, por exemplo, sobrescrevendo classes CSS do skin padrão:

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

.Navigation {
  height: 100px;
}

Você pode sobrescrever com: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Em seguida, você precisa criar um arquivo de configuração no diretório $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Esse arquivo 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">O logotipo exibido no cabeçalho da interface do agente. A URL da imagem deve ser uma URL relativa ao diretório de imagens do 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 / Temas Disponíveis

Já existem skins criados por outras empresas.

OTOBO Dark Skin / Tema

Link para o skin / tema: Github Dark Skin

Modern Skin / Tema da Efflux

Link do Github para o skin / tema: Efflux Modern Skin