OTOBO / OTRS ((Community Edition)) - Skiny - Motywy - Projekt
Możliwe jest zmiana wyglądu systemu biletowego OTOBO, w tym celu można stworzyć nowy skin.
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
.Navigation {
height: 100px;
}Można na przykład nadpisać to za pomocą: /* Skin/my_skin/Core.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 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
Link do skina / motywu: Github Dark Skin
Modern Skin / Motyw od Efflux
Link do skina / motywu na Githubie: Efflux Modern Skin