OTOBO / OTRS ((Community Edition)) - Apariencias - Temas - Diseño

Es posible cambiar la apariencia del sistema de tickets OTOBO, para ello se puede crear una nueva apariencia.

Cambiar la configuración de la apariencia / tema de OTOBO

Cada Agente puede seleccionar por sí mismo qué apariencia desea utilizar. Después de la instalación de OTOBO, solo existe la apariencia predeterminada. La apariencia de OTOBO define el diseño de la interfaz. En su configuración personal, se encuentra la opción para reemplazar su apariencia actual por otra.

Crear una nueva apariencia

Cambiar CSS

Si tiene una instalación de OTOBO en docker, las apariencias se encuentran en la siguiente carpeta: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent/ de lo contrario en * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nueva carpeta

Si aún no se ha agregado ninguna apariencia, en esta ruta solo encontrará la carpeta "default". Para agregar una nueva apariencia, primero debe agregar una nueva carpeta. Por ejemplo, "my_skin".

Cambiar el diseño

Para cambiar el diseño, puede crear la carpeta "css" dentro de la carpeta "my_skin". Las apariencias funcionan de tal manera que siempre se carga la apariencia CSS predeterminada. En la propia apariencia, puede sobrescribir los valores de la apariencia predeterminada. Por ejemplo, sobrescribiendo clases CSS de la apariencia predeterminada:

CSS de la apariencia predeterminada: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Podría sobrescribirse, por ejemplo, con: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Luego, debe crear un archivo de configuración en la carpeta $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Este debería tener la siguiente estructura:

<?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"></Description>
                <Item Key="HomePage"></Item>
            </Hash>
        </Setting>
    </ConfigItem>
</otobo_config>

Apariencias / Temas disponibles

Ya existen apariencias creadas por otras empresas.

OTOBO Dark Skin / Tema

Enlace a la apariencia / tema: Github Dark Skin

Modern Skin / Tema de Efflux

Enlace de Github a la apariencia / tema: Efflux Modern Skin