Skip past the cut to get to the tutorial. I will first ramble a little bit on how I came to start using Instantbird…

Meebo, my one reliable instant messenger compilation service and one that I’ve used since it’s early days (2006?), has been acquired by Google. This would normally be a cause to celebrate, except that they’re shutting down the instant messenger service. A big shame. Not to mention, every other service that Google acquires ends up being tortured and made worse before it gets any better. Writely was another service I used during my undergrad days. Collaborating with a friend on taking notes during class was a lot smoother than Google Docs.

So, without rambling on my irritation of the loss of Meebo, I spent some time checking out other cloud-like browser-based compilation instant messenger services but was disappointed in the alternatives. I used to use Trillian before switching to Meebo. Trillian’s web service unfortunately relies on Flash for its UI. I use a lot of my keyboard to navigate websites instead of my mouse (mainly backspace, shift-backspace, page down, page up, ctrl-tab, ctrl-shift-tab, ..) and keyboard shortcuts + Flash is just horrible. So, that was a no go, although I was quite tempted to fork over $12/yr for the cloud logs. I eventually gave up on the browser-based IM and settled down with Instantbird. I just needed something simple, clean, and easy to use.

I wasn’t expecting to want to customize it as well. Instantbird is built on the same framework as Firefox, so much of the UI options are very similar. As I have been reluctant to use Chrome other than for my Gmail, it seemed the perfect fit. Instantbird also shares a lot of organization as Adium, the Mac-only IM compilation similar to Trillian/Miranda/Pidgin. As I don’t use a Mac, I can’t say much on the similarity. However, I did notice a distinct lack of straightforward instructions on how to make your own message themes. I hope this tutorial will help.
—

A message style is nothing more than a fancy way of organizing and presenting your IMs. With the advent of smartphones, users may prefer that their computer IMs look like their text messages on their phones. Other people, like me, prefer something more simple and perhaps retro. Instantbird, like Adium, constructs IM chains using HTML templates and CSS. It’s actually quite easy if you have a general grasp of HTML and CSS concepts. The problem I ran into was structure and how it was put together. Let me begin by outlining the file structure you can expect to have, then I will go into more detail of the individual files. Admittedly, I will gloss over many details because I don’t understand it all (this Adium tutorial goes into more detail and is also wordier than this tutorial) – I’m the type of person who would like to see code, play with code, and then understand code. However, I need to understand the structure as sort of an anchoring point.

File Structure
Below is roughly the filestructure of the XPI (or simply a .zip compilation with a .xpi extension instead – more later):

chrome.manifest
install.rdf
chrome/
chrome/Footer.html
chrome/Header.html
chrome/Status.html
chrome/NextStatus.html
chrome/main.css
chrome/Info.plist
chrome/Incoming/Content.html
chrome/Incoming/Context.html
chrome/Incoming/NextContent.html
chrome/Incoming/NextContext.html
chrome/Outgoing/Content.html
chrome/Outgoing/Context.html
chrome/Outgoing/NextContent.html
chrome/Outgoing/NextContext.html

This list looks daunting, but the bare minimum you’ll need is the following:

chrome.manifest
install.rdf
chrome/
chrome/main.css
chrome/Info.plist
chrome/Incoming/Content.html

Take a look here for the fallback dependencies and why chrome/Incoming/Content.html is required.

The setup I use for my theme falls in between the full and minimal list:

chrome.manifest
install.rdf
chrome/
chrome/Status.html
chrome/main.css
chrome/Info.plist
chrome/Incoming/Content.html
chrome/Incoming/NextContent.html
chrome/Outgoing/Content.html
chrome/Outgoing/NextContent.html

And looks like this:

I’ll take a top-down approach and knock out the metafiles before getting into the actual coding files.

Metafiles
These files aren’t directly related to the styling of the theme, but rather tells Instantbird how to handle the package.

chrome.manifest: just tells where to find the files. You can compile the chrome folder into a .jar, or leave it as is (see the actual wiki entry for the alternative line). The contents of this file is rather simple:

skin	THEMENAME classic/1.0	chrome/

Where “THEMENAME” is the one word identifier for your style. In my case, it was “zenburn”.

install.rdf: an XML file that gives more detail to Instantbird, specifically, what to call your theme name, version, and so forth:

  
    messagestyle-THEMENAME@hostname.domain.tld
    THEME NAME
    THEME VERSION
    THEME DESCRIPTION
    AUTHOR NAME
	
    
    
      
        {33cb9019-c295-46dd-be21-8c4936574bee}
        0.2a1pre
        MAX VERSION
      
    
  	

Replace the caps with the appropriate values. This shouldn’t be too difficult, right? I actually didn’t quite figure out if I did the id tag properly since the wiki page has more of it italicized for replacement. However, I got my style to work and that’s all that matters to me.

chrome/Info.plist: a property list and given my superficial changes, I got by just copy-pasting the example from the wiki:

 
 
 
 	ActionMessageTemplate
 	<span class="pseudo" style="%senderColor%">%sender%</span> %message%
 	DefaultVariant
 	Normal
 	MessageViewVersion
 	4
 
 

Okay, that is all of the “metafiles” you need. Let me move on to the actual code and styling files.

HTML/CSS code files
chrome/Status.html: this file deals with displaying when someone you are talking to goes away or returns. Some people like to be notified when their chat buddy sets an away message, others do not. If you do like to be informed, here is sample code:

	
		%time% 
		%message%
	

A lot of these HTML files will be rather simple and short, consisting of a div or two. Note the classes as they will be given properties in the CSS file. The %ID%s are placeholders and get replaced by the appropriate values.

chrome/Incoming/Content.html
chrome/Outgoing/Content.html: these files are almost exactly the same. Incoming refers to messages you receive from your friend, Outgoing refers to messages you send. Here is code:

chrome/Incoming/Content.html:

	
		[%time%] 
		%sender%: 
		%message%
		

	

chrome/Outgoing/Content.html:

	
		[%time%] 
		%sender%: 
		%message%
		

	

The only difference is the class for %sender%: “senderInc” vs “senderOut”. The only thing I’m really changing is the color of the username – I will be blue, my friend will be red, and that is that. Note the div with id “insert”. This div gets replaced with code from NextContent.html.

chrome/Incoming/NextContent.html
chrome/Outgoing/NextContent.html: similar to Content.html, these two files are very much the same. These two files are also necessary if you send multiple messages in a row (as opposed to sending one, your friend sending one, then you send one) because the fallback relies on Incoming/Content.html for both incoming and outgoing messages. Here is code for both files:

chrome/Incoming/NextContent.html:

	[%time%] 
	%sender%: 
	%message%

chrome/Outgoing/NextContent.html:

	[%time%] 
	%sender%: 
	%message%

Again, very similar files with the only difference being %sender%’s class to denote between incoming and outgoing messages. You can see also the div with id “insert” is also present and ready to be replaced when necessary.

These are my “core” HTML files for my simple zenburn style. I will wrap up with my CSS file –

chrome/main.css:

body {
	background-color: #2C2C2C;
	line-height: 12pt;
	color: #f0dfaf;
	margin: 0px;
}

.incoming, .outgoing, .status {
	position: relative;
}

.message {
	overflow: auto;
	padding-right: 1px;
}

.status {
	color: #7f9f7f;
	font-style: italic;
}

.time {
	color: #708070;
}

.senderInc {
	color: #cc9393;
}

.senderOut {
	color: #8cd0d3;
}

Fairly straightforward if you have a good grasp of HTML and CSS. I like my messages resembling the IMs from the 90s, nothing fancy like bubbles or boxes for me. However, with this set of core files, you should be able to easily adapt, edit, and modify to your liking. If you like the styling I have and simply want to change the color theme, you can add additional CSS files into a Variants folder. I haven’t messed around with this as much, but I imagine there is a little tweaking in one or two of the metafiles as well.

Closing Remarks/Tips

Now, to actually use and install your theme is quite simple:
1. Zip chrome/, chrome.manifest, install.rdf
2. Rename your zip file so it has an .xpi extension instead of .zip
3. Go to the add-ons window of Instantbird (Ctrl-D or Tools-> Add-ons)
4. Click on the Gear icon to open a drop down list
5. Select “Install Add-on From File…”

I found out that capitalization of filenames does matter. Why main.css is camel-case and the rest Pascal, I don’t have a clue. What happened when I selected my style from the drop down options (it actually showed up, I was so excited), it didn’t show what I was expecting. I made a mockup.html file and copy-pasted the code from Content.html and replaced the %ID%s with made up values so I had an idea of how it would look like and made tweaking the CSS easier, but the preview screen was black text on white. Not at all what I was expecting. Turns out it’s very picky about filename capitalization. Chances are if your style is not working properly, a filename may have a typo, or the wrong capitalization.

Here is my mockup.html (which resides in the chrome directory) in case you are lazy to make your own:

	
		
		
	
	
	

		
			[8:56:57] 
			Me: 
			Random message.
			

		
	
	

		
			[8:56:57] 
			Friend: 
			Another message.
			

		
	
	

		
			[8:58:58] 
			Me has gone away.