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

Es posible cambiar la apariencia del OTOBO sistema de tickets, para ello se puede crear un nuevo skin.

OTOBO skin - tema configuración cambiar

Cada agente puede seleccionar qué skin desea utilizar. Después de la instalación de OTOBO, solo hay un skin estándar. El skin de OTOBO define el diseño de la interfaz. En sus configuraciones personales, se encuentra la opción de reemplazar su skin actual con otro skin.

Crear un nuevo skin

Cambiar CSS

Si tiene una instalación de OTOBO con docker, los skins se encuentran en el siguiente directorio: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent y de lo contrario en * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nuevo directorio

Si aún no se ha agregado un skin, entonces en este camino solo se encuentra el directorio "default". Para agregar un nuevo skin, es necesario agregar un nuevo directorio. Por ejemplo, "my_skin".

Cambiar el diseño

Para cambiar el diseño, se puede crear un directorio "css" dentro del directorio "my_skin". Los skins funcionan de tal manera que siempre se carga el skin CSS estándar. En el propio skin, se pueden sobrescribir los valores del skin estándar. Por ejemplo, sobrescribiendo clases CSS del skin predeterminado:

CSS del skin estándar: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Se puede sobrescribir con: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Luego, es necesario crear un archivo de configuración en el directorio $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Este archivo debe 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">El logotipo que se muestra en el encabezado de la interfaz del agente. La URL de la imagen debe ser
            una URL relativa al directorio de imágenes 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 / Temas disponibles

Ya existen skins creados por otras empresas.

OTOBO Dark Skin / Tema

Enlace al skin / tema: Github Dark Skin

Modern Skin / Tema de Efflux

Enlace a Github del skin / tema: Efflux Modern Skin