Skip to content

OTOBO / OTRS ((Community Edition)) - Skiny - Motywy - Projekt

Możliwe jest zmiana wyglądu systemu biletowego OTOBO, w tym celu można stworzyć nowy skin.

OTOBO Ticketsystem Skin - Theme Einstellung

Zmiana ustawień skina / motywu OTOBO

Każdy Agent może samodzielnie wybrać, którego skina chce używać. Po instalacji OTOBO dostępny jest tylko domyślny skin. Skin OTOBO definiuje projekt interfejsu. W swoich osobistych ustawieniach można znaleźć opcję zastąpienia bieżącego skina innym skinem.

Tworzenie nowego skina

Zmiana CSS

Jeśli posiadasz instalację OTOBO w środowisku Docker, skiny znajdują się w następującym folderze: /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 folder

Jeśli jeszcze żaden skin nie został dodany, w tej ścieżce znajdziesz tylko folder "default". Aby dodać nowy skin, najpierw musisz dodać nowy folder. Na przykład "my_skin".

Zmiana projektu

Aby teraz zmienić projekt, można utworzyć folder "css" w folderze "my_skin". Skiny działają w ten sposób, że zawsze ładowany jest domyślny skin CSS. W własnym skinie można następnie nadpisać wartości z domyślnego skina. Na przykład, nadpisując klasy CSS z domyślnego skina:

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

css
.Navigation {
  height: 100px;
}

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

css
.Navigation {
  height: 30px;
}

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

xml
<?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>

Dostępne skiny / motywy

Istnieją już skiny stworzone przez inne firmy.

OTOBO Dark Skin / Motyw

OTOBO dark skin

Link do skina / motywu: Github Dark Skin

Modern Skin / Motyw od Efflux

Modern Skin von Efflux

Link do skina / motywu na Githubie: Efflux Modern Skin