Smiley Themes

A smiley theme for Chat Core (used by Instantbird and Thunderbird) is very easy to create, it contains a bunch of image files, a theme.js file and the necessary packaging around it to make it an extension.

theme.js

This file describes the theme: it lists the sequences of characters that should be associated with the various images in the theme.

This file uses the JSON format, you can check this format using JSLint or JSONLint. This is recommended as it's very easy to miss small mistakes.

You'll also need to escape certain special characters with a backslash. If you use unicode characters, make sure themes.js is properly UTF-8 encoded.

Here is an example:

{
 "smileys": [
   {"filename": "smile.png", "textCodes": [":-)", ":)"]},
   {"filename": "smile-big.png", "textCodes": [":-D", ":D"]},
   {"filename": "wink.png", "textCodes": [";-)", ";)"]},
   {"filename": "tongue.png", "textCodes": [":-P", ":P", ":-p", ":p"]},
   {"filename": "neutral.png", "textCodes": [":-|", ":|"]},
...
   {"filename": "bored.png", "textCodes": ["-_-"]},
   {"filename": "annoyed.png", "textCodes": ["-_-'"]},
   {"filename": "big-eyes.png", "textCodes": ["O_O", "o_o"]}
 ]
}

Packaging

A theme needs to be an xpi file to be installable in Instantbird. The typical content of an XPI of a smiley theme will be:

• chrome/
• chrome/skin.jar
• chrome.manifest
• install.rdf

Typical content of install.rdf:

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">
    <em:id>emoticons-shortthemename@hostname.domain.tld</em:id>
    <em:name>theme name (human readable)</em:name>
    <em:version>theme version</em:version>
    <em:description>theme description</em:description>
    <em:creator>author name</em:creator>
    <!-- Instantbird -->
    <em:targetApplication>
      <Description>
        <em:id>{33cb9019-c295-46dd-be21-8c4936574bee}</em:id>
        <em:minVersion>0.2a1pre</em:minVersion>
        <em:maxVersion>0.2.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>	
</RDF>

Typical content of chrome.manifest:

skin shortthemename	classic/1.0	jar:chrome/skin.jar!/

All the values in italic in the 2 previous listings should be replaced with appropriate values for your theme.

Important: Please note that for your theme to work, shortthemename in the chrome.manifest and install.rdf files should be identical. The ID of your theme has to start with emoticons-.

Typical content of skin.jar:

theme.js
smile.png
smile-big.png
wink.png
tongue.png
neutral.png
...
bored.png
annoyed.png
big-eyes.png