# Stilguide for chatvindue i &kopete;

## Stilreference for chatvindue i &kopete;

Fra og med &kopete; 0.12, bruger vi nu formatet Adium til chatvinduestil. Temaformatet er baseret på HTML-skabeloner og CSS. De er enklere at oprette og udvikle, kun kunskab om HTML og CSS behøves. Desuden kan stiler have varianter (definerede med en CSS-fil), som tilføjer flere egenindstillede værdier).

### Reference guide.

Adium-formatet består af en mappestruktur, HTML-skabeloner, CSS-filer og nøgleord som erstattes hver gang skabelonen behandles. Den endelige konvertering er en XHTML-side hvor meddelelser tilføjes med DOM-handlinger. Det centrale element er et div-element som hedder `Chat`. Før og efter dette div-element findes skabeloner for sidehoved og sidefod. Meddelelser findes under div-elementet `Chat`.

#### Mappestruktur

En stil skal holde sig til denne mappestruktur. Koden i &kopete; styres af denne mappestruktur. Når stilen arkiveres, arkivér så mappen `styleName`. Mappestrukturen er en struktur ifølge med en bundle i Mac OS X, for dem som kender til det operativsystem. Du skal desuden følge versaltilstanden som vises her, eftersom Unix-systemer er versalfølsome.

    styleName\ (kan have .adiumMessageStyle som suffix, eftersom det er en bundle i Mac OS X)
            Contents\
                    Info.plist
                    Resources\
                            main.css
                            Header.html
                            Footer.html
                            Status.html
                            Incoming\ (och Outgoing\)
                                    Content.html
                                    NextContent.html (for efterfølgende meddelelsen)
                                    Contekst.html (for meddelelsehistorik)
                                    NextContekst.html
                                    Action.html
                            Variants\
                                    *.css

#### Om <div id="insert"></div>

Dette er et særligt div-element som bruges internt. Det er en pladsmarkør som angiver hvor næste meddelelse skal indsættes. Hvis det er en ny meddelelse, fjernes det og den nye meddelelse tager dens plads. Men hvis det er en efterfølgende meddelelse erstattes div-elementet med den nye meddelelses indhold. Dette særlige div-element kræves i skabelonerne Content, Context, NextContent, NextContext. Det skader dog ikke også at tilføje det i skabelonerne Action og Status.

#### HTML-skabeloner.

#### Skabelonbeskrivelse.

`Header.html` (kræves)

- Brug skabelonen Header til at vise et pænt sidehoved for konversationen. Denne skabelon indsættes inden div-elementet `Chat`. Hvis du ikke bruger det, så brug blot en tom fil.

`Footer.html` (kræves)

- Dette er i hovedsagen det samme som Header, men er for konversationens sidefod. Denne skabelon indsættes efter div-elementet `Chat`. Hvis du ikke bruger det, bruges blot en tom fil.

`Status.html` (kræves)

- Denne skabelon bruges til at vise en intern meddelelse. Interne meddelelser såsom statusændringer, meddelelser fra Kopete (f.eks. indkommende filoverførsel) vises. Når stilen ikke sørger for skabelonen Action, bruges den til at vise sådanne meddelelser.

`Incoming/Content.html`

`Outgoing/Content.html` (kræves)

- Indholdsskabelonen er meddelelsens kerne. Forestil dig det som en blok som vil indeholde meddelelser. Sørg for at det er parat til at tage imod de efterfølgende meddelelser, konstruér den ikke til kun at vis en meddelelse. Efterfølgende meddelelser indsættes ved div-elementet.

`Incoming/NextContent.html`

`Outgoing/NextContent.html` (kræves)

- Skabelonen NextContent er meddelelsefragment for efterfølgende meddelelser. Den indsættes i hovedmeddelelsesblokken. HTML-skabelonen skal kun indeholde det som minimalt behøves for at vise en meddelelse.

`Incoming/Action.html`

`Outgoing/Action.html` (valgfri) (udvidelse i &kopete;)

- Denne skabelon er en udvidelse af Adium-formatet i &kopete;. Den er tilgængelig for indkommende og udgående retninger. Handlingsmeddelelser er specialmeddelelser som fortæller at en handling udføres. For eksempel: "/me installerer &kopete;" vil blive vist som "DarkShock installerer &kopete;".

`Incoming/Content.html`

`Incoming/NextContent.html`

`Outgoing/Context.html`

`Outgoing/NextContext.html` (valgfri)

- Disse skabeloner bruges ikke i Kopete. I Adium bruges de til at vise historik. De er i hovedsagen ligesom Content og NextContent men med visse forskelle for at adskille dem fra normale meddelelser.

#### Om CSS-stilskabeloner og varianter

HTML-skabeloner bruges til at beskrive hvordan strukturen laves, men alle stiler beskrives i CSS-filer. `main.css` er hovedstilen, hvor varianter kun er ændringer af hovedstilen. Eksempel på varianter er anderledes farver, ingen visning af brugerfoto. Både `main.css` og varianter importeres i de endelige XHTML-sider.

##### -`main.css`

Dette er den hoved CSS-filen som er fælles for alle varianter. Denne fil skal indeholde al hovedbeskrivelse af stilen.

##### Varianter

Varianter er CSS-filer placerede i mappen `Variants/`. Hver variant er en enkelt CSS-fil som inkluderer `main.css` og gør ændringer af hovedstilen.

#### Fejlsøgning af stiler

Her er to vink om hvordan man tester en stil mens den laves.

##### - Gem et eksempel på en konversation.

Du kan gemme en konversation i chatvinduet. Dette er en kopi af den interne XHTML-side som vises. Brug den i Konqueror for at teste dine CSS-filer.

##### - Deaktivér stilcachen.

Et lille indstillingsflag findes til at deaktivere stilcachen. Når den aktiveres, genindlæses HTML-skabeloner hver gang en stil efterspørges. Tilføj følgende rækker i `kopeterc`. Meget nyttigt når en stil testes i &kopete;.

    [KopeteStyleDebug]
    disableStyleCache=true

### Nøgleordsreference

Nøgleord ligner huller som skal udfyldes med information. For hver ny meddelelse erstattes de af den rigtige værdi som svarer til deres sammenhæng. For helt at støtte alle funktioner i Kopete, er visse udvidelser af nøgleord tilføjet i Adium. Visse nøgleord er desuden også kun tilgængelige i visse sammenhænge.

### Nøgleordsliste for skabelonerne Header og Footer.

Der behandles nøgleord når chatten starter.

`%chatName%`

- Dette er navnet på nuværende chatsession. I en typisk session viser dette navn og status for kontakten. For IRC vises kanalens emne.

`%sourceName%`

`%destinationName%`

- Disse er navnene på kontakterne i en chatsession. `%sourceName%` er dit navn. `%destinationName%` er navnet på kontakten du chatter med. Foretræk `%chatName%` frem for disse, eftersom de kan være forvirrende i gruppechatter og IRC.

`%incomingIconPath%`

`%outgoingIconPath%`

- Dette er kontakternes billede, foto eller avatar for en chatsession. Incoming repræsenterer kontaktfotoet og Outgoing repræsenterer dit eget foto. Hvis et foto ikke er tilgængeligt, bruges billedet `buddy_icon.png` som findes i mappen `Incoming` eller `Outgoing`.

`%timeOpened%`

`%timeOpened{X}%`

- Dette er tiden da chatsessionen begyndte. `%timeOpened%` bruger standardtidformatet for den nuværende landsindstilling. Hvis du vil bruge et specifikt tidsformat, brug `%timeOpened{X}%` hvor X er en streng som indeholder tidsformatet. Tidsparametrene er de samme som i glibc-funktionen `strftime`. Skriv `man strftime` for at få en liste med tilgængelige parametre.

### Nøgleordsliste for skabelonerne Content, NextContent, Context, NextContext, Action

Der behandles nøgleord for hver meddelelse.

`%userIconPath%`

- Dette er kontaktens billede, foto eller avatar som hører sammen med meddelelsen. Hvis et foto ikke er tilgængeligt, bruges billedet `buddy_icon.png` som findes i mappen `Incoming` eller `Outgoing` afhængig af meddelelsens retning.

`%senderScreenName%`

- Dette er kontaktidentifikationen for kontakten som hører sammen med meddelelsen, Eksempelvis jeg@hotmail.com, 45566576, AnnaKrogh.

`%sender%`

- Dette er kontaktens navn som hører sammen med meddelelsen. Det bruger metakontaktens navn at vise som kilde.

`%service%`

- Viser tjenestens navn som hører sammen med meddelelsen. Eksempel: Jabber, Yahoo, MSN.

`%textbackgroundcolor{X}%`

- Dette nøgleord bruges til at repræsentere markeret baggrundsfarve i &kopete;. Ignorér parametrene indenfor parenteserne og brug det kun som `%textbackgroundcolor{}`.

`%senderStatusIcon%` (udvidelse af &kopete;)

- Viser kontaktens statusikon som hører sammen med meddelelsen. Det er en filsøgesti.

`%senderColor%`

`%senderColor{N}%` (udvidelse af &kopete;)

- Opret en farve fra afsenderens kontaktidentifikation. Kan bruges til at vise en anden farve for kontaktens alias.

  `%senderColor{N}%` hvor N er et positivt tal. Hvis N er større end 100 repræsenterer det en lysere farve end kontaktens farve. Hvis N er lig med 150 er det en farve som er 50 % lysere. Hvis N er mindre end 100 er det en mørkere farve. Brugbar for at lade baggrunden farves forskelligt for hver kontakt.

  Hvis du vil bruge farverne i en variant, men ikke i hovedstilen, findes en måde at komma rundt om det.

      <div style="color:%senderColor%;border:none;border-color:%senderColor{40}%;"
      ><p class="message"
      >...</p
      ></div>

  Du kan bruge farven for elementet p.message i filen `main.css`, og skrive noget som ligner følgende i varianten:

      p.message { color:inherit; border-color:inherit; }

### Nøgleordsliste fælles for meddelelser og Status.html

`%message%`

- Selve meddelelsen. Det er et HTML-fragment.

`%time%`

`%time{X}%`

- Tiden da meddelelsen blev modtaget. `%time%` bruger standardtidsformatet for den nuværende landsindstilling. Hvis du vil bruge et specifikt tidformat, brug så `%time{X}%` hvor X er en streng som indeholder tidsformatet. Tidsparametrene er de samme som i glibc-funktionen `strftime`. Skriv `man strftime` for at få en liste med tilgængelige parametre.

`%messageDirection%` (udvidelse af &kopete;)

- Repræsenterer meddelelsens retning, om meddelelsen skal vises skrevet fra højre til venstre eller fra venstre til højre. Værdierne er enten "rtl" eller "ltr". Læs Guide for meddelelseretning for at finde ud af hvordan nøgleordet bruges på en rigtig måde.

## Stilguide for chatvindue i &kopete;

Stilguide for chatvindue i &kopete; er et sæt ting som din chatvinduesstil skal støtte for at fungere sammen med Kopete.

### Understøt markeringer

Stilen skal vise markeringer. I Kopete og Adium erstattes `%textbackgroundcolor{}%` med markeringsfarven. Tilføj stilattributten `background-color: %textbackgroundcolor{}%` i HTML-elementet som viser meddelelsen.

### Meddelelsesskabeloner for efterfølgende meddelelser kræves.

Denne guide er til for dem som skriver gamle XSL-stiler om til det nye format. Alle stiler skal sørge for en skabelon for efterfølgende meddelelser. Det er nu en standardfunktion.

### Brug kodningen UTF-8.

Overskriften siger alt. Du skal gemme filerne som UTF-8.

### Sørg for at `Contents/Info.plist` for at virke sammen med Adium

Filen `Contents/Info.plist` bruges ikke endnu i Kopete, men hvis du ønsker at stilen skal fungere sammen med Adium skal du sørge ofr denne fil. Her er en grundlæggende eksempelfil. Strenge at erstatte omgives af "$".

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
            <key
    >CFBundleDevelopmentRegion</key>
            <string
    >English</string>
            <key
    >CFBundleGetInfoString</key>
            <string
    >$Your style full name$</string>
            <key
    >CFBundleIdentifier</key>
            <string
    >$Your style ID in the form: com.adiumx.smooth.operator.style$</string>
            <key
    >CFBundleInfoDictionaryVersion</key>
            <string
    >1.0</string>
            <key
    >CFBundleName</key>
            <string
    >$Your style name here$</string>
            <key
    >CFBundlePackageType</key>
            <string
    >AdIM</string>
            <key
    >MessageViewVersion</key>
            <integer
    >3</integer>
    </dict>
    </plist>

### Sørg for `buddy_icon.png`

Du skal placere en fil som hedder `buddy_icon.png` i `Incoming` og `Outgoing`. Billederne bruges når kontakten ikke har noget foto.

### Støtte for sprog som skrives fra højre til venstre med nøgleordet `%messageDirection%`.

Nøgleordet `%messageDirection%` er til for de sprog i verden som skrives fra højre til venstre. Det definerer meddelelsens retning om det er "rtl" (højre til venstre) eller "ltr" (venstre til højre). Tilføj stilattributten i HTML-elementet som viser meddelelsen: `direction: %messageDirection%`. Forhåndsvisning af stilen i udseendeindstillingen indeholder en kontrol af at stilen viser højre til venstre rigtigt. Den skal vise strengen med begyndelse fra højre.