Chat Core uses a message style system based on HTML, JS and CSS that is very similar to the one created for Adium.  If you plan to create a message style for Instantbird or Thunderbird, reading the Adium documentation on the topic may be helpful -- see this tutorial and this reference sheet.

On the other hand, you may prefer to jump right in, using the default message styles as examples: http://dxr.mozilla.org/comm-central/source/im/themes/messages/

The rest of this page includes a variety of information about the specifics for creating a message theme for Instantbird and/or Thunderbird. (Note Thunderbird currently does not provide an UI for users to select the message style, but that doesn't mean they don't work.)

Packaging and file structure

A message style addon needs to be packaged as an xpi file to be installable in Instantbird and Thunderbird.
The typical content of an XPI of a theme will be:

Note: an xpi file is just a zip file with the .xpi extension.

Registration

The files used for the registration of your theme with the theme system are install.rdf, chrome.manifest and Info.plist.

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>messagestyle-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>1.5</em:minVersion>
        <em:maxVersion>1.6.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

chrome.manifest

Typical content of chrome.manifest:

skin    shortthemename    classic/1.0    chrome/

Older message styles store the actual files of the theme in a jar archive, but this is no longer necessary. (A jar file is just a (non-compressed) zip file with the .jar extension.)

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 messagestyle-.

Theme files

The minimal content of chrome/ is:

The other files are optional:

File Name Fallback if missing Usage
Footer.html None (will use an empty string) Displayed at the bottom of a conversation. This is the right place to [[Instantbird:Message_Styles:JavaScript|include JavaScript code]].
Header.html None (will use an empty string) Optionally (user preference) displayed at the top of a conversation
Status.html Incoming/Content.html Used for status messages
NextStatus.html Status.html Used for status messages directly following another status message added a short time before.
Incoming/Content.html None (this file is required) Used for incoming messages.
Incoming/Context.html Incoming/Content.html Used for incoming messages in an old conversation displayed to give context.
Incoming/NextContent.html Incoming/Content.html Used for incoming messages directly following another incoming message added a short time before.
Incoming/NextContext.html Incoming/NextContent.html Used for incoming messages  directly following another incoming message added a short time before in an old conversation displayed to give context.
Outgoing/Content.html Incoming/Content.html Used for outgoing messages.
Outoing/Context.html Outoing/Content.html Used for outgoing messages in an old conversation displayed to give context.
Outgoing/NextContent.html Incoming/NextContent.html Used for outgoing messages directly following another outgoing message added a short time before.
Outgoing/NextContext.html Outgoing/NextContent.html Used for outgoing messages  directly following another outgoing message added a short time before in an old conversation displayed to give context.

HTML Template Replacements

These labels will be replaced with message-specific data when used in HTML files bracketed by percentage signs, e.g. %chatName%.

Replacement in both messages and status messages

<span class="ib-msg-txt">message</span>

Replacements in messages (incoming or outgoing) only

Replacements in status messages only

Info.plist Keys

The file Info.plist is a property list file containing metadata about the theme.

The following keys are used by Instantbird and Thunderbird:

The following keys work, but only use them if you really feel you absolutely need them, because they make it impossible for the user to select the font in the usual way via Preferences -> Content:

If your theme needs to work with Adium too, you need more keys, see this page for details.

Example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>ActionMessageTemplate</key>
	<string>&lt;span class="pseudo" style="%senderColor%"&gt;%sender%&lt;/span&gt; %message%</string>
	<key>DefaultVariant</key>
	<string>Normal</string>
	<key>MessageViewVersion</key>
	<integer>4</integer>
</dict>
</plist>

Including JavaScript in message styles

The right file to put JavaScript in a message style is Footer.html. Some Adium themes use a custom Template.html file to include JavaScript in the theme, this is NOT supported in Instantbird / Thunderbird.

The code that you insert in the Footer.html file will be executed as soon as the conversation is loaded. It is a good place to register event listeners.

DOM Mutation events are of particular interest, because they allow you to execute scripts when a new message is added. See the DOM Events documentation.

Example:

This can be placed in the file Footer.html:

<script type="text/javascript">
var body = document.getElementById("ibcontent");
body.addEventListener("DOMNodeInserted", function(aEvent) {
   if (!(aEvent.originalTarget instanceof HTMLElement))
     return;
   var node = aEvent.originalTarget;
   /* the node variable contains the inserted node,
      do something useful with it */
}, false);
</script>

Instantbird/Thunderbird-specific features

Below lists the known differences between message styles in Adium and in Chat Core. Keep in mind that Adium displays conversation using Webkit and that Instantbird / Thunderbird use Gecko, so the rendering may differ slightly.

Files

Info.plist keys

CSS Classes

These classes can be used in the CSS files of themes.

Unread messages ruler

The ruler that appears between read and unread messages (from Instantbird 1.2 and Thunderbird 38) is a hr element with the id #unread-ruler. When styling it, changes which override those in the default style for this element (in conv.css) must be marked !important.

Note: it is possible to style the unread messages themselves by using a CSS sibling selector on the unread ruler.

Element IDs which must not be used by message styles

The following element IDs are used internally by Instantbird and must not be given to any DOM elements by message styles:

Adium-specific features not implemented in Instantbird / Thunderbird

Files

Info.plist keys

Keyword substitutions

Other

#Chat * {
  overflow: visible !important;
}

The reason why lots of message styles used overflow: scroll; was that long words that could not wrap broke themes. This is no longer the case with the word-wrap: break-word; property that was recently added and is included in the default stylesheet.

Conversion of Adium message styles

We have a shell script to convert automatically a message style packaged for Adium into a message style installable in Instantbird. Because of the differences between the way Adium and Instantbird handle message styles, we can't guarantee that the resulting message style will actually work in Instantbird / Thunderbird.

It is very easy to use, just download the script makexpi.sh, place the theme you want to convert in the same folder and execute the script!

The script automatically looks for Adium Message Styles in the current folder. It will automatically extact the content of .zip and .tgz archives. It will also attempt to open .dmg disk images (this will fail if you are not executing the script on Mac OS X). If several themes are found, the script will create an .xpi file for each Adium Message Style it found, and finally bundle all the created .xpi files in a single multiple item package xpi file.

Example:

For the following example, we will convert the adium message style Vacation.

Files before the conversion:

$ find .
.
./makexpi.sh
./vacation_5_17162_5829.zip

To launch the conversion, simply execute the script, it will place the resulting .xpi file in a result subfolder and display some details about what it is doing:

$ ./makexpi.sh
In :
 Extracting vacation_5_17162_5829.zip
 Processing ./Vacation.AdiumMessageStyle:
  Creating vacation.jar
  Creating vacation.xpi
 Moving to vacation_5_17162_5829.xpi
Done!

The result:

$ find .
.
./makexpi.sh
./result
./result/vacation_5_17162_5829.xpi
./vacation_5_17162_5829.zip