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

Możliwe jest zmienienie wyglądu systemu OTOBO ticketowego, do tego celu można utworzyć nowy motyw.

OTOBO motyw - zmiana ustawień wyglądu

Każdy agent może samodzielnie wybrać, jaki motyw chce używać. Po zainstalowaniu OTOBO dostępny jest tylko motyw domyślny. Motyw OTOBO definiuje wygląd interfejsu. W swoich ustawieniach osobistych znajduje się opcja zmiany bieżącego motywu na inny.

Tworzenie nowego motywu

Zmiana CSS

Jeśli masz instalację OTOBO w dockerze, motywy znajdują się w następującym katalogu: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent, w przeciwnym razie w *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME*

Nowy katalog

Jeśli jeszcze nie dodano motywu, w tym miejscu znajduje się tylko katalog "default". Aby dodać nowy motyw, należy najpierw dodać nowy katalog. Na przykład "my_skin".

Zmiana designu

Aby zmienić design, można utworzyć w katalogu "my_skin" katalog "css". Motywy działają w ten sposób, że zawsze ładuje się domyślny motyw CSS. W swoim motywie można następnie nadpisać wartości z domyślnego motywu, na przykład nadpisując klasy CSS z domyślnego motywu:

CSS z domyślnego motywu: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Można to nadpisać na przykład: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

Następnie należy utworzyć plik konfiguracyjny w katalogu $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Plik ten powinien mieć następującą strukturę:

<?xml version="1.0" encoding="utf-8"?>
<otobo_config version="2.0" init="Changes">
    <ConfigItem Name="AgentLogo" Required="0" Valid="1">
        <Description Translatable="0">Logo wyświetlane w nagłówku interfejsu agenta. Adres URL do obrazu musi być adresem względnym do katalogu obrazów motywu.
        </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>

Dostępne motywy

Istnieją już motywy stworzone przez inne firmy.

OTOBO Dark Skin / Motyw

Link do motywu: Github Dark Skin

Modern Skin / Motyw od Efflux

Link do motywu na Github: Efflux Modern Skin