Chatskiny

Chatskiny jsou v Jabbimu uloženy v adresáři chatskins nebo HOME/.jabbim/chatskins každý ve svém vlastním adresáři. Chatskiny jsou založeny na HTML a CSS. Díky tomu, že Jabbim používá pro vykreslování rozhovorů WebKit, je možné použít i Javascript pro různé efekty (onmouseover atd...). Jeden Chatskin může obsahovat více variant, které se liší jen CSS souborem (lze tak měnit barvy, zarovnání textu...).

Popis adresáře chatskinu

main.css

Main.css je hlavní CSS soubor, který je nahrán za použití jakékoliv Varianty chatskinu.

Status.html

Status.html obsahuje html kód, který je přídán do okna konverzace při změně statusu (například pokud se v místnosti někdo odhlásí,přihlásí atd.). Používá se i pro některé systémové zprávy

Header.html

Header.html obsahuje html kód, který se vloží do okna konverzace jako první před jakýmkoliv rozhovorem. Může jít například o hlavičku rozhovoru nebo o Javascript atd.

Footer.html

Footer.html obsahule html kód, který se vloží na konec konverzace.

Incoming/Content.html

Html kód, který se vloží do okna konverzace při příchodu nové zprávy. Musí obsahovat <div id="insert"></div> , místo kterého je v pak v budoucnu případě nutnosti vložen obsah Incoming/NextContent.html (viz níže).

Incoming/NextContent.html

Html kód, který se vloží do okna konverzace při příchodu nové zprávy, která je od stejného člověka, jako zpráva předchozí. Opět musí obsahovat <div id="insert"></div> , místo kterého je v případě nutnosti vložen obsah Incoming/NextContent.html.

Outgoing/Content.html, Outgoing/NextContent.html

Plní stejnou funkci jako soubory v Incoming, ale jejich obsah se používá pro odchozí zprávy.

Incoming/SenderColors.txt

Nepovinný soubor, který obsahuje barvy ve tvaru #FFFFFF oddělené dvojtečkou. Použijí se pro rozlišení příchozích zpráv od různých uživatelů v místnosti. Pokud soubor neexistuje, použijí se předdefinované barvy.

Variants/

Adresář obsahuje .css soubory, které nějakým způsobem upravují a doplňují main.css (například mění barvy a zarovnání jednotlivých tagu atd.). Jabbim automaticky nabídne dostupné varianty uživateli v nastavení.

Keywords

Aby Jabbim věděl, na kterém místě v html kódu má zobrazit konkrétní informaci, používá tzv. Keywords, které jsou při zpracování nahrazovány za konkrétní informace (například za text zprávy, jméno odesílatele, cesta k avataru atd...)

Keywords použítelné z Footer.html a Header.html

• %chatName% - název chatu (většinou jméno kontaktu, se kterým rozhovor probíha).
• %incomingIconPath% - cesta k avataru uživatele.

Keywords použítelné ze Status.html

• %time% - čas události.
• %message% - text události/změny stavu.

Keywords použítelné z Content.html, NextContent?.html

• %sender% - přezdívka uživatele.
• %time% - čas příchodu zprávy.
• %message% - text zprávy.
• %userIconPath% - cesta k avataru uživatele.
• %highlight% - obsahuje text "highlight", pokud jde o zvýrazněnou zprávu z groupchatu.
• %senderColor% - barva použitá k odlišení uživatelů v místnosti.

Příklady

Content.html

<div class="container" style="background-color:%textbackgroundcolor{.75}%;">
    <span class="time_initial">
                %time%
        </span>
    <span class="buddyicon">
        <img src="%userIconPath%" width="24" height="24" />
    </span>
    <div class="placeholder" visible="%userIconPath%">
        <span class="sender incoming"><span style="color:%senderColor%;">
            %sender%
        </span></span>
        <span class="message incoming_link">
            <br>%message%
        </span>
    </div>
    <span class="clear"></span>
</div>
<span id="insert"></span>

NextContent?.html

<div class="container_next" style="background-color:%textbackgroundcolor{.75}%;">
    <span class="time_initial">
                %time%
        </span>
        <div class="placeholder_next" visible="%userIconPath%">
        <span class="next_label incoming">

        </span>
        <span class="message incoming_link">
            %message%
        </span>
    </div>
    <span class="clear"></span>
</div>
<span id="insert"></span>

Variants/Black and White.css

.incoming { color: #0090ff; }
.outgoing { color: #333333; }
.status { color: #0090ff; }
.greyed { color: #CCCCCC; }

.incoming_link a { color: #0090ff; }
.outgoing_link a { color: #000000; }
.status_link a { color: #0090ff; }
.greyed_link a { color: #999999; }

Status.html

div class="container">
    <span class="time_initial">
                %time%
        </span>
    <span class="message status">
        %message%
    </span>
    <span class="clear"></span>
</div>
<span id="insert"></span>