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

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

Es posible modificar la apariencia del sistema de tickets OTOBO; para ello, se puede crear un nuevo Skin.

Cambiar el ajuste de Skin / Theme en OTOBO

Cada Agent puede seleccionar por sí mismo qué Skin desea utilizar. Tras la instalación de OTOBO, solo existe el Skin estándar. El Skin de OTOBO define el diseño de la interfaz. En sus ajustes personales, encontrará la opción de reemplazar su Skin actual por otro.

Crear un nuevo Skin

Modificar CSS

Si tiene una instalación de OTOBO en docker, los Skins 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 añadido ningún Skin, en esta ruta solo encontrará la carpeta “default”. Para añadir un nuevo Skin, primero debe añadir una nueva carpeta. Por ejemplo, “my_skin”.

Modificar el diseño

Para modificar el diseño, puede crear la carpeta “css” dentro de la carpeta “my_skin”. Los Skins funcionan de tal manera que siempre se carga el Skin CSS estándar. En su propio Skin, puede sobrescribir los valores del Skin estándar. Por ejemplo, sobrescribiendo clases CSS del Skin por defecto:

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

.Navigation {
  height: 100px;
}

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

.Navigation {
  height: 30px;
}

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

Skins / Themes disponibles

Ya existen Skins creados por otras empresas.

OTOBO Dark Skin / Theme

Enlace al Skin / Theme: Github Dark Skin

Modern Skin / Theme de Efflux

Enlace de Github al Skin / Theme: Efflux Modern Skin