Background

In my work we have relied heavily on Skype as the internal communication tool. It helped out a lot by coordinating between peers, having group conversation, everyday conversations, as well as being able to talk to people on the floor downstairs (we outgrew the first floor we had, so my team moved two floors up) without having to run up and down the stairs all the time. However when having around +5 people in a group conversation it have been a bit annoying to easily spot who-wrote-what, mainly because all messages look the same nevertheless who is writing. I thought there had to be a way to make avatars work.

Most IM applications, as well as online communities use avatars to identify large set of people more easily. This is no coincidence. It is both more easily for the human mind to spot geometrical figures than reading and “parsing” texts. Just like many blogs use identicons to represent comment authors there should be the same option in a modern IM app, one would think. If I recall correctly there were even a time when Skype had a theme with avatars, but it seems to have been removed.

There are a few articles and forum comments about this issue, but none of them really worked or was satisfiable. Turns out that Skype’s chat styles actually are based on Adium ones’, which really only are simple XHTML and CSS. Thanks to this, altering the built-in chat styles of Skype turned out to be really easy. Basically this is the difference I am after:

I will write the long version and changes I did to make it work here. If you’re only interest in adding avatars to Skype chats just jump to the bottom and you find the short version there.

Long version – Modifying the source

Since I’m a Mac user this guide is described for that, but it should be applicable for Windows as well. I also assume you know how to handle a text-editor and have some very least basic knowledge of HTML and CSS. Other than you should do fine.

1. Locate the SkypeChatStyle files which are the message style packages used in Skype. On Mac found under Skype.app/Contents/Resources/ChatStyles/

2. Copy one of the files (e.g. Skype Modern.SkypeChatStyle) and rename to whatever name you want your style to have. I choose Skype Modern with Avatars.SkypeChatStyle

3. Right-click you copied file and choose “Show Package Contents” and navigate to Contents/Resources. There you will find all the source files for HTML, CSS and JS which renders the chat messages in Skype. We will basically made modifications the files in Incoming, Outgoing and css directories.

4. The first thing we need to do is to modify structure of messages a little bit. This needs to be done for all templates related to the messages. We start out with an example. Open file Contents/Resources/Incoming/Content.html, it should have the following content:

To make the avatars work and look nice we need to add a few lines. Compare content above with the following snippet.

As seen I have added two new div blocks; The first is a container for the avatar, and the second one wrapping the previous block of header and message. %userIconPath% is the variable that actually holds the absolute path to the avatar within the Skype application.

This is basically it when it comes to the structure. We do the same changes to all the following files:
Contents/Resources/Incoming/Context.html
Contents/Resources/Outgoing/Content.html
Contents/Resources/Outgoing/Context.html

There are also templates for the messages that are following an initial message sent, before another user replies. In these template we don't want to show the avatar but still want to keep the style form. Thus, we use the same structure but don't include the image tag for the avatar.

This should be applied to the following files in the same way:
Contents/Resources/Incoming/NextContent.html
Contents/Resources/Incoming/NextContext.html
Contents/Resources/Outgoing/NextContent.html
Contents/Resources/Outgoing/NextContext.html

5. Now, when we have the HTML changes done all we need is to apply the visual changes. This is done by adding the new class definitions in the end in the file Contents/Resources/css/styles.css:

6. That's it! Now all you need to do is to start/restart you Skype app and select your new theme and you should be good to go! See next section for details about that.

Of course this also opens up for more possible modifications. There is also a JS file which imply you could do some neat interactive functionality if you have the time. For me, this is enough for now.

Short version - Install avatars theme

1. Download the following file: Skype Modern with Avatars

2. Put it in the following folder /Applications/Skype.app/Contents/Resources/ChatStyles and unzip the file there (should be an equal directory on Windows I suppose).

3. Open preferences > Chats, and select "Skype Modern with Avatars" in the dropdown menu.

Bottom line

Hacking or modifying an application even if it is closed source does not have to be that hard. Adding avatars to Skype chats did turn out to be really easy and of course you could make your very own styles if you want to.

There is also an issue that if a user does not have an avatar an empty photo with a question mark is displayed instead. Since there is no documentation for this I have not figured out how to hide it all together just yet.

Well, that's it. I hope you find it as useful as I do!