# Stijlgids voor het chat-venster van &kopete;

## Stijlreferentiegids voor het chat-venster van &kopete;.

Beginnend met &kopete; 0.12, gebruiken we nu het format Adium voor de stijl van ons chat-venster. Het themaformat is gebaseerd op HTML sjablonen enCSS. Ze zijn gemakkelijker te maken en te ontwikkelen; er is alleen kennis van HTML en CSS nodig. Ook stijlen kunnen varianten hebben (gedefinieerd als CSS-bestand) die meer waarde toevoegen aan aanpassen :).

### Referentiegids.

Het Adium-format bestaat uit een mapstructuur, HTML-sjablonen, CSS-bestanden en sleutelwoorden die worden vervangen elke keer dat het sjabloon wordt verwerkt. De uiteindelijke conversatie is een XHTML-pagina waaraan berichten worden toegevoegd met DOM-bewerkingen. Het centrale element is een div-element genaamd `Chat`. Voor en na dit div-element bevindt zich het Header- en Footer-sjabloon. Berichten zijn Nakomelingen van het div-element `Chat`.

#### Mapstructuur

Een stijl moet deze mapstructuur respecteren. De code in &kopete; is gebouwd rond deze mapstructuur. Bij het archiveren van de stijl, archiveer dan de map `styleName`. De mapstructuur is een structuur van een Mac OS X-bundel voor hen die bekend zijn met dat besturingsysteem. U moet de hoofd-/kleine letters, die hier getoond worden respecteren, omdat een UNIX-systeem hiervoor gevoelig is.

    styleName\ (kan .adiumMessageStyle als achtervoegsel hebben, omdat het in Mac OS X een bundel is)
            Contents\
                    Info.plist
                    Resources\
                            main.css
                            Header.html
                            Footer.html
                            Status.html
                            Incoming\ (and Outgoing\)
                                    Content.html
                                    NextContent.html (for consecutive messages)
                                    Context.html (for message history)
                                    NextContext.html
                                    Action.html
                            Variants\
                                    *.css

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

Dit is een speciaal div-element dat intern wordt gebruikt. Het is een plaatshouder om aan te geven waar het volgende bericht in te voegen. Als het een nieuw bericht is, dan wordt het verwijderd en het nieuw bericht gebeurt. Maar als het een opvolgend bericht is, dan wordt het div-element vervangen door de inhoud van het nieuwe bericht. Dit speciale div-element is vereist in Content-,Context-,NextContent- en NextContext-sjablonen. Het is geen probleem om het ook in Action- en Status-sjablonen te zetten.

#### HTML-sjablonen.

#### Beschrijving van het sjabloon.

`Header.html` (Vereist)

- Gebruik het Header-sjabloon om een mooie kop van de conversatie weer te geven. Dit sjabloon wordt ingevoegd voor het div-element `Chat`. Als u het niet gebruikt, zet er dan een leeg bestand neer.

`Footer.html` (Vereist)

- Dit is meestal hetzelfde als het Header-sjabloon, het is er echter voor de voet van de conversatie. Dit sjabloon wordt ingevoegd achter het div-element `Chat`. Als u het niet gebruikt, zet er dan een leeg bestand neer.

`Status.html` (Vereist)

- Dit sjabloon wordt gebruikt om een intern bericht weer te geven. Interne berichten zoals een statuswijziging, bericht vanuit Kopete (⪚ inkomende bestandsoverdracht). Wanneer de stijl geen Action-sjabloon levert, wordt het gebruikt om het Action-bericht weer te geven.

`Incoming/Content.html`

`Outgoing/Content.html` (Vereist)

- Het sjabloon voor inhoud is het hart van het bericht. Denk er aan als een blok dat het bericht bevat. Zorg er voor dat het opvolgende berichten kan ontvangen; ontwerp het niet om maar één bericht te ontvangen. Opvolgende berichten zullen ingevoegd worden op de plaats van het div-insert-element.

`Incoming/NextContent.html`

`Outgoing/NextContent.html` (Vereist)

- Het NextContent-sjabloon is een berichtfragment voor opvolgende berichten. Het zal worden ingevoegd in het hoofd berichtenblok. Het HTML-sjabloon zou het absolute minimum bevatten om een bericht weer te geven.

`Incoming/Action.html`

`Outgoing/Action.html` (Optioneel) (&kopete;-extensie)

- Dit sjabloon is een extensie van &kopete; naar het Adium-format. Het is beschikbaar voor de richting inkomend en uitgaand. Actieberichten zijn speciale berichten om te vertellen dat er een actie gedaan wordt. Voorbeeld: "/me is &kopete; aan het installeren" zou worden weergegeven als "DarkShock is &kopete; aan het installeren".

`Incoming/Context.html`

`Incoming/NextContext.html`

`Outgoing/Context.html`

`Outgoing/NextContext.html` (Optioneel)

- Deze sjablonen worden in Kopete niet gebruikt. In Adium worden ze gebruikt om de geschiedenis weer te geven. Het is meestal hetzelfde ding als Content en NextContent maar met enige verschillen om ze van normale berichten te onderscheiden.

#### Over CSS-stijlen en varianten

Het sjabloon voor HTML wordt gebruikt om te beschrijven hoe de structuur is opgebouwd. Echter alle stijl is beschreven in CSS-bestanden. `main.css` is de hoofdstijl, waar varianten eenvoudig wijzigingen zijn van de hoofd stijl. Voorbeelden van varianten zijn verschillende kleuren, geen weergave van een foto van de gebruiker. Beide `main.css` en varianten worden geïmporteerd in uiteindelijke XHTML-pagina.

##### -`main.css`

Dit is het hoofd CSS-bestand dat gemeenschappelijk is voor alle varianten. Dit bestand moet alle hoofd beschrijvingen van de stijl bevatten.

##### -Varianten

Varianten zijn CSS-bestanden gelocaliseerd in de map `Variants/`. Elke variant is een enkel CSS-bestand die ingevoegd wordt in `main.css` en de hoofdstijl wijzigen.

#### Stijlen debuggen

Hier zijn twee tips voor het testen van een stijl tijdens het aanmaken.

##### -Een voorbeeld conversatie opslaan.

In het chat-venster kunt u een conversatie opslaan. Dit is een kopie van de interne weergegeven XHTML-pagina. Gebruik het in Konqueror om uw CSS-bestanden te testen.

##### -Stijlbuffer uitschakelen.

Er bestaat een kleine configuratioeschakelaar om de stijlbuffer uit te schakelen. Indien ingeschakeld, herlaadt het telkens de HTML-sjablonen wanneer er om de stijl wordt gevraagd. Voeg de volgende regels toe aan uw `kopeterc`. Zeer bruikbaar bij het testen van een stijl in &kopete;

    [KopeteStyleDebug]
    disableStyleCache=true

### Naslag van sleutelwoorden

Sleutelwoorden lijken op gaten die met details gevuld moeten worden. In elk nieuw bericht worden ze vervangen door de juiste waarde die overeenkomt met hun context. Om alle functies van Kopete te ondersteunen, hebben we enkele extensies van sleutelwoorden toegevoegd aan Adium. Enkele sleutelwoorden zijn alleen in een bepaalde context beschikbaar.

### Lijst met sleutelwoorden voor Header- en Footer-sjablonen.

Deze sleutelwoorden worden aan het begin van de chat verwerkt.

`%chatName%`

- Dit is de naam van de huidige chat-sessie. Voor een typische sessie, toont het de naam van de contactpersoon en zijn status. Voor IRC, toont het het onderwerp van een kanaal.

`%sourceName%`

`%destinationName%`

- Dit zijn de namen van de contactpersonen voor een chat-sessie. `%sourceName%` is uw naam. `%destinationName%` is de naam van de contactpersoon waarmee u aan het converseren bent. Geef de voorkeur aan `%chatName%` boven de eerdere, omdat ze verwarrend kunnen zijn bij groepchat en IRC.

`%incomingIconPath%`

`%outgoingIconPath%`

- Dit zijn de afbeeldingen/foto's/avatars van de contactpersonen voor een chat-sessie. Inkomend representeert de foto van de contactpersoon en uitgaand representeert uw eigen foto. Als er geen foto beschikbaar is, gebruikt het afbeelding `buddy_icon.png` die zich in de map `Incoming` of `Outgoing` bevindt.

`%timeOpened%`

`%timeOpened{X}%`

- Het is de begintijd van de chat-sessie. `%timeOpened%` gebruikt het standaard tijdformat voor de huidige taalregio. Als u een specifiek tijdformat wilt gebruiken, gebruik dan `%timeOpened{X}%` waar X een tekenreeks is die het tijdformat bevat. De tijdparameters zijn hetzelfde als in de glibc-functie `strftime`. Geef het commando `man strftime` om de lijst met beschikbare parameters te krijgen.

### Lijst met sleutelwoorden voor Content-, NextContent-, Context-, NextContext- en Action-sjabloon

Hun sleutelwoorden worden verwerkt voor elk bericht.

`%userIconPath%`

- Dit is de afbeelding/foto/avatar van de contactpersoon behorende bij het bericht. Als er geen foto beschikbaar is, dan gebruikt het de afbeelding `buddy_icon.png` die zich bevindt in de map `Incoming` en `Outgoing` afhankelijk van de richting van het bericht.

`%senderScreenName%`

- Dit is de contact-ID van het contact geassocieerd met het bericht. Voorbeelden: me@hotmail.com, 45566576, JanJansen.

`%sender%`

- Dit is de naam van de contactpersoon behorende bij het bericht. Het gebruikt MetaContact weergave van de naam als een bron.

`%service%`

- toon de naam van de service verbonden met het bericht. Voorbeelden: Jabber, Yahoo, MSN.

`%textbackgroundcolor{X}%`

- Dit sleutelwoord wordt in &kopete;, gebruikt om de achtergrondkleur voor accentueren aan te geven. Negeer de parameter in de haakjes en gebruik het alleen als `%textbackgroundcolor{}`.

`%senderStatusIcon%` (&kopete; extensie)

- Toon het statuspictogram van de contactpersoon behorende bij het bericht. Het is een bestandspad.

`%senderColor%`

`%senderColor{N}%` (&kopete; extensie)

- Genereer een kleur uit de id van de zender. Kan worden gebruikt om een andere kleur te tonen voor de schermnaam van de contactpersoon.

  `%senderColor{N}%` waar N een positief getal is. Als N groter dan 100 is, dan vertegenwoordigt het een lichtere kleur dan de kleur van de contactpersoon. Als N gelijk is aan 150 is een kleur 50% meer helder. Als N kleiner is dan 100 dan is een kleur donkerder. Bruikbaar voor het hebben van een achtergrondkleur die anders is dan voor elke contactpersoon.

  Als u deze kleuren in een variant wilt gebruiken, maar niet in de hoofdstijl, dan moet u er omheen werken.

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

  u kunt kleur toekennen aan het p.message-element in uw bestand `main.css` en in uw variant iets stoppen zoals

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

### Gezamelijke lijst met sleutelwoorden voor berichten en Status.html

`%message%`

- Het bericht zelf. Dit is een HTML-fragment.

`%time%`

`%time{X}%`

- Het tijdstip dat het bericht is ontvangen. `%time%` gebruikt het standaard tijdformat voor de huidige taalregio. Als u een specifiek tijdformat wilt gebruiken, gebruik dan `%time{X}%` waar X een tekenreeks is die het tijdformat bevat. De tijdparameters zijn hetzelfde als de glibc-functie `strftime`. Geef `man strftime` om de lijst met beschikbare parameters te verkrijgen.

`%messageDirection%` (&kopete;-extensie)

- Geeft de richting van het bericht aan, als het bericht van rechts naar links of links naar rechts moet worden getoond. De waarden zijn "rtl" of "ltr". Lees Richtlijn voor richting van bericht om te zien hoe dit sleutelwoord juist te gebruiken.

## Richtlijn voor de stijl voor het chat-venster van &kopete;

De richtlijn voor de stijl voor het chat-venster van &kopete; is een aantal dingen die de stijl van het chat-venster moet ondersteunen om met Kopete compliant te zijn.

### Accentueren ondersteunen

Uw stijl moet accentuering tonen. In Kopete en Adium wordt `%textbackgroundcolor{}%` vervangen door de achtergrondkleur voor accentueren. Voeg dit stijlattribuut toe: `background-color: %textbackgroundcolor{}%` aan het HTML-element dat het bericht toont.

### Sjablonen voor opeenvolgende berichten zijn vereist.

Deze richtlijn is voor hen die oude XSL stijlen herschrijven tot het nieuwe format. Alle stijlen moeten een sjabloon leveren voor opvolgende berichten. Het is nu een standaard feature.

### UTF-8 codering gebruiken.

De titel zegt het al. U moet uw bestanden opslaan in UTF-8.

### Lever `Contents/Info.plist` voor interoperabiliteit met Adium

Het bestand `Contents/Info.plist` wordt nog niet in Kopete gebruikt. Maar als u uw stijl compatibel with laten zijn met Adium, dan moet u dat bestand leveren. Hier is een basis voorbeeldbestand. Te vervangen tekenreeksen zijn omsloten met "$".

    <?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
    >$De volledige naam van uw stijl$</string>
            <key
    >CFBundleIdentifier</key>
            <string
    >$De ID van uw stijl in de vorm: com.adiumx.smooth.operator.style$</string>
            <key
    >CFBundleInfoDictionaryVersion</key>
            <string
    >1.0</string>
            <key
    >CFBundleName</key>
            <string
    >$Hier de naam van uw stijl$</string>
            <key
    >CFBundlePackageType</key>
            <string
    >AdIM</string>
            <key
    >MessageViewVersion</key>
            <integer
    >3</integer>
    </dict>
    </plist>

### Lever bestand `buddy_icon.png`

U moet een bestand met de naam `buddy_icon.png` plaatsen in de map `Incoming` en `Outgoing`. Deze afbeeldingen zullen worden gebruikt als de contactpersoon geen foto heeft.

### Talen met tekens van rechts-naar-links worden ondersteund met het sleutelwoord `%messageDirection%` keyword.

Sleutelwoord `%messageDirection%` is aanwezig voor talen met tekens die je schrijft van rechts-naar-links. Het definieert de richting van het bericht, als het "rtl" is (rechts-naar-links) of "ltr" (links-naar-rechts). Voeg dit stijlattribuut toe aan het HTML-element dat het bericht toont: `direction: %messageDirection%`. Het Stijlvorbeeld in de instelling van het uiterlijk bevat een rechts-naar-links om te controleren of uw stijl het op de juiste manier laat zien. Het zou de tekenreeks rechts moeten laten beginnen.