Az összes felszín az $OTRS_HOME/var/httpd/htdocs/skins/$SKIN_TYPE/$SKIN_NAME mappában van. Kétféle típusú felszín létezik: ügyintézői és ügyfél felszín.

Az ügyintézők mindegyike egyénileg választhatja ki, hogy melyik telepített ügyintézői felszínt szeretnék „viselni”.

Az ügyfélfelületnél egy felszínt globálisan kell kiválasztani a Loader::Customer::SelectedSkin konfigurációs beállítással. Az összes ügyfél ezt a felszínt fogja látni.

Fontos megjegyezni, hogy mindig az „alapértelmezett” felszín fog először betöltődni. Ha az ügyintéző egy másik felszínt választott az „alapértelmezett” helyett, akkor a másik felszín csak az alapértelmezett felszín után lesz betöltve. A „betöltésen” itt azt értjük, hogy az OTRS olyan címkéket fog elhelyezni a HTML tartalmában, amelyek a CSS-fájlok betöltését idézik elő a böngészőnél. Nézzünk egy példát erre:

<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css-cache/CommonCSS_179376764084443c181048401ae0e2ad.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/ivory/css-cache/CommonCSS_e0783e0c2445ad9cc59c35d6e4629684.css" />
            

Itt tisztán látható, hogy az alapértelmezett felszín töltődik be először, majd ezután az ügyintéző által megadott egyéni felszín. Ebben a példában a bekapcsolt betöltő (a Loader::Enabled 1-re állítva) eredményét látjuk, amely begyűjti az összes CSS-fájlt, összefűzi és minimalizálja azokat, majd egyetlen nagy egységként szolgálja ki a böngészőnek. Ezzel sávszélességet spórol, és csökkenti a HTTP-kérések számát is. Nézzük meg ugyanezt a példát kikapcsolt betöltővel:

<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Reset.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Default.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Header.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.OverviewControl.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.OverviewSmall.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.OverviewMedium.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.OverviewLarge.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Footer.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Grid.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Form.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Table.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Widget.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.WidgetMenu.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.TicketDetail.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Tooltip.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Dialog.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Print.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Agent.CustomerUser.GoogleMaps.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/default/css/Core.Agent.CustomerUser.OpenTicket.css" />
<link rel="stylesheet" href="/otrs-web/skins/Agent/ivory/css/Core.Dialog.css" />
            

Itt jobban láthatjuk az egyes fájlokat, amelyek a felszínekből jönnek.

Különböző típusú CSS-fájlok vannak: közös fájlok, amelyeket mindig be kell tölteni, és „modul specifikus” fájlok, amelyek csak az OTRS keretrendszeren belüli speciális moduloknál vannak betöltve.

Továbbá lehetséges olyan CSS-fájlok megadása, amelyeket csak IE7 vagy IE8 böngészőknél kell betölteni (az ügyfélfelület esetén IE6 böngészőnél is). Ez szerencsétlen ugyan, de ezeknél a böngészőknél nem volt lehetséges egy modern grafikus felhasználói felület kifejlesztése a hozzájuk elkészített speciális CSS nélkül.

A CSS-fájltípusokra vonatkozó részletekért nézze meg a betöltőről szóló szakaszt.

Minden egyes HTML-oldal előállításához a betöltő először az alapértelmezett felszínből fogja az összes beállított CSS-fájlt venni, és ezután az egyes fájlok kinézetéhez, ha az egy egyéni felszínben is elérhető (ha egy egyéni felszín ki lett választva), majd betölti azokat az alapértelmezett fájlok után.

Ez azt jelenti, hogy az egyéni felszínekben lévő CSS-fájloknak ugyanolyan nevűeknek kell lenniük mint az alapértelmezett felszínekben, és hogy egy egyéni felszínnek nem kell az alapértelmezett felszín összes fájljával rendelkeznie. Ez a nagy előnye az alapértelmezett felszín elsőként való betöltésének: egy egyéni felszínben az összes alapértelmezett CSS-szabály jelen van, és csak azokat szükséges megváltoztatni, amelyeknek eltérő megjelenítést kell eredményezniük. Ez gyakran egyetlen fájllal elvégezhető, mint a fenti példában látható.

Ennek másik hatása, hogy figyelmesnek kell lennie az egyéni felszínekben lévő összes olyan alapértelmezett CSS-szabály felülírásánál, amelyeken változtatni szeretne. Nézzünk egy példát:

.Header h1 {
    font-weight: bold;
    color: #000;
}
            

Ez speciális címsorokat határoz meg a .Header elemen belül félkövér, fekete szöveggel. Ha most azt szeretné megváltoztatni, hogy a felszínben más színnel és normál szöveggel jelenjen meg, akkor nem elég ezt írni:

.Header h1 {
    color: #F00;
}
            

Ugyanis az eredeti font-weight szabály még mindig alkalmazva lesz. Határozottan felül kell írnia:

.Header h1 {
    font-weight: normal;
    color: #F00;
}
            

Ebben a szakaszban egy új ügyintézői felszínt fogunk létrehozni, amely lecseréli az alapértelmezett (fehér) OTRS háttérszínt egy egyéni (világos szürke) vállalati színre és az alapértelmezett logót egy egyénire. Azt is be fogjuk állítani, hogy ez a felszín legyen az, amelyet az összes ügyintéző alapértelmezetten látni fog.

Csak három egyszerű lépést kell megtennünk a cél eléréséhez:

Kezdjük az új felszínünkhöz szükséges fájlok létrehozásával. Először is létre kell hoznunk egy új mappát ehhez a felszínhez (ezt custom néven fogjuk hívni). Ez a mappa a következő lesz: $OTRS_HOME/var/httpd/htdocs/skins/Agent/custom.

Ebben el kell helyeznünk az új CSS-fájlt egy új css könyvtárban, amely az új felszín megjelenését fogja meghatározni. Ezt Core.Default.css néven fogjuk hívni (emlékezzen arra, hogy ugyanolyan névvel kell rendelkeznie mint az „alapértelmezett” felszínben lévő fájlok egyike). Ez a CSS-fájlhoz szükséges kód:

body {
    background-color: #c0c0c0; /* nem túl szép, de a célnak megfelel */
}
            

Most következik a második lépés egy új logó hozzáadásával, és az új felszín megismertetésével az OTRS rendszer számára. Ehhez először el kell helyeznünk az egyéni logónkat (például logo.png) egy új könyvtárban (például img) a saját felszín könyvtárunkban. Ezután létre kell hoznunk egy új $OTRS_HOME/Kernel/Config/Files/CustomSkin.xml beállítófájlt, amely tartalmazni fogja a szükséges beállításokat az alábbiak szerint:

<?xml version="1.0" encoding="utf-8" ?>
<otrs_config version="1.0" init="Changes">
    <ConfigItem Name="AgentLogo" Required="0" Valid="1">
        <Description Translatable="1">
          Az ügyintézői felület fejlécében megjelenített logó. A képre mutató
          URL-nek a felszín képkönyvtárától relatív URL-nek kell lennie.
        </Description>
        <Group>Framework</Group>
        <SubGroup>Frontend::Agent</SubGroup>
        <Setting>
            <Hash>
                <Item Key="URL">skins/Agent/custom/img/logo.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###100-custom" Required="0" Valid="1">
        <Description Translatable="1">Egyéni felszín a fejlesztői kézikönyvhöz.</Description>
        <Group>Framework</Group>
        <SubGroup>Frontend::Agent</SubGroup>
        <Setting>
            <Hash>
                <Item Key="InternalName">custom</Item>
                <Item Key="VisibleName">Egyéni</Item>
                <Item Key="Description">Egyéni felszín a fejlesztői kézikönyvhöz.</Item>
                <Item Key="HomePage">www.azencegem.hu</Item>
            </Hash>
        </Setting>
    </ConfigItem>
</otrs_config>
            

A beállítás aktívvá tételéhez el kell navigálnunk az OTRS adminisztrációs területén lévő rendszerbeállítás modulra (alternatív esetben lefuttathatja az $OTRS_HOME/bin/otrs.Console.pl Maint::Config::Rebuild parancsfájlt). Ez újra elő fogja állítani az XML beállítófájlok Perl gyorsítótárát azért, hogy az új felszínünk most már ismert legyen, és kiválasztható legyen a rendszeren. Ennek alapértelmezett felszínné tételéhez, amelyet az új ügyintézők azelőtt láthatnak, mielőtt a saját felszínválasztásukat megtennék, szerkessze a Loader::Agent::DefaultSelectedSkin rendszerbeállítási paramétert, és állítsa „Egyéni” értékre.

Következtetésképpen: egy új felszín létrehozásához az OTRS-ben el kellett helyeznünk az új logófájlt, és létre kellett hoznunk egy CSS-fájlt és egy XML-fájlt, amely három új fájlt eredményezett:

$OTRS_HOME/Kernel/Config/Files/CustomSkin.xml
$OTRS_HOME/var/httpd/htdocs/skins/Agent/custom/img/custom-logo.png
$OTRS_HOME/var/httpd/htdocs/skins/Agent/custom/css/Core.Header.css