OTOBO / OTRS ((Community Edition)) - Thema's - Ontwerp

Het is mogelijk om het uiterlijk van het OTOBO ticketsysteem te veranderen, hiervoor kunt u een nieuw thema maken.

OTOBO-thema - instellingen wijzigen

Elke agent kan zelf kiezen welk thema hij wil gebruiken. Na de OTOBO-installatie is er alleen het standaardthema beschikbaar. Het OTOBO thema definieert het ontwerp van de interface. In zijn persoonlijke instellingen vindt u de optie om zijn huidige thema te vervangen door een ander thema.

Nieuw thema maken

CSS wijzigen

Als u een docker OTOBO installatie heeft, vindt u de thema's in de volgende map: /var/lib/docker/volumes/otobo_opt_otobo /_data/var/ httpd/htdocs/skins/Agent en anders in * *$OTOBO_HOME/var/httpd/htdocs/skins/Agent/$SKIN_NAME**

Nieuwe map

Als er nog geen thema is toegevoegd, vindt u in deze map alleen de map "default". Om een nieuw thema toe te voegen, moet u eerst een nieuwe map maken. Bijvoorbeeld "my_skin".

Ontwerp wijzigen

Om het ontwerp te wijzigen, kunt u in de map "my_skin " de map "css " maken. De thema's werken zo dat altijd het standaard CSS-thema wordt geladen. In uw eigen thema kunt u de waarden uit het standaardthema overschrijven door bijvoorbeeld CSS-klassen uit het default-thema te overschrijven:

CSS uit het standaardthema: Skin/default/Core.css

.Navigation {
  height: 100px;
}

Kunt u bijvoorbeeld met: /* Skin/my_skin/Core.css

.Navigation {
  height: 30px;
}

overschrijven.

Vervolgens moet u nog een configuratiebestand maken in de map $OTOBO-HOME/Kernel/Config/Files/XML/{skinName}.xml. Dit bestand moet de volgende structuur hebben:

<?xml version="1.0" encoding="utf-8" ?>
<otobo_config version="2.0" init="Changes">
    <ConfigItem Name="AgentLogo" Required="0" Valid="1">
        <Description Translatable="0">Het logo dat wordt weergegeven in de header van de agentinterface. De URL naar het afbeelding moet een relatieve URL zijn naar de skin-afbeeldingsmap.
        </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>

Beschikbare thema's

Er zijn al thema's gemaakt door andere bedrijven.

OTOBO Dark Skin / Thema

Link naar het thema: Github Dark Skin

Modern Skin / Thema van Efflux

Github-link naar het thema: Efflux Modern Skin