» Messenger Skins » Resources for skin creators

Willz - 1 - An Introduction to skinning

Written by Will "Willz" Ingles

Index

• Brief History of Skinning
• Windows Live Messenger Resource Basics
• Windows Live Messenger UIFILES
• The 4000 Group
• The 4006 Group
• The 4002 Group
• The Icon and Bitmap Groups
• Windows Live Messenger Strings
• Windows Live Messenger 8.5 UIFile Guide

So you want to skin Windows Live Messenger. Great, good to have you on board as a part of the growing skinning community. For those who don't know me I am Willz, a person who has been skinning messenger since 7.5 and the old days of traditional skinning. I have released popular skins such as AeroMSN, Windows Aero Messenger and Ev0. It's getting to the point where I know I won't be skinning for much longer so I figure instead of having this knowledge lost I may as well share it.

The following will be a rundown of skinning and a bit of background info to get you well introduced. I will try to cover things in the simplest terms I can, but in further articles I will not spoon feed stuff since you should have become familiar by that point.

Anyway let's begin.

Brief History of Skinning

Skinning Windows Live Messenger has never been easy. Since the days of MSN Messenger, making a skin required time, patience and a whole lot of trial and error. Before Messenger Plus 4.50, skinners had to use a resource extractor such as Resource Hacker to take out messengers resources from its DLL's and EXE's. A skinner would then have to edit these files and make sure that in editing them they did not cause errors. Once these files were edited the skinner would use Resource Hacker and put these images back into the DLL and EXE and then distribute the patched files as a skin.

Some were fortunate enough to have contact with an installer maker who would make an automatic patcher which would inject a skins resource into the exe. The rest however had to rely on just spreading EXEs and DLLs, which most people did not trust. When Windows Live Messenger came into the scene it saw a lot of skinners to disappear into the shadows and never return. Why? Well because Microsoft introduced their own image format which to this day no one has been able to make. Skinning seemed to be taking a turn for the worst and was looking to just disappear.

But then came a change which has looked to have revitalised the skinning community. Messenger Plus! 4.50 has of course introduced a skinning feature which allows a skin to be made without the tedious process of hacking away files. It has also brought new features which were previously impossible using traditional methods.

So if you ever see Patchou in the streets, remember to shake his hand and buy him a drink. Because as a skinner, he has made your life so much easier.

Windows Live Messenger Resource Basics

While Plus! may have made things easier when it comes to skinning, the knowledge of Messengers UI Files and resource structure is still needed if you want to make a skin (A good one anyway). I should point out here and now that if you want to skin you should familiarise yourself with XML and CSS (because styles are kind of like CSS). These things will make your life easier in understanding what is going on here.

For this part I recommend you download Resource Hacker and follow on.

If you open up msgsres.dll in "C:\Program Files\Windows Live\Messenger" then we can now take a look at how Windows Live Messenger is on the inside so you can understand what is going on. I will cover the parts of msgsres.dll that matter, if I skip parts of it, it just means that these sections do not matter when it comes to skinning.

Windows Live Messenger UIFILES

Windows Live Messenger is broken up into a series of what used to be called "UIFILES". Each of these files defined how things were to be laid out and styled in each window. In MSN Messenger these files were one long file, however in Windows Live Messenger these file were broken up into two parts: Definitions and Styles

Definitions form the 4004 section of msgsres.dll. These files are XML files and define how things are laid out in each section of Windows Live Messenger. The main reason you edit definition files is to either move around the layout of things in a window or to add new parts to a window (such as a watermark image).

Styles form the 4005 section of msgsres.dll. These files are made in a form similar to CSS. While it may look like CSS to the untrained eye, you must note that adding in CSS functions to this section will not work (e.g. float), please stick to the ones that you see in the files. The reason you edit style files is to change styling properties of an element within a definition file, whether it be background, foreground or spacing.

Now what you will notice is that each file in 4004 and 4005 have numbers, these numbers represent a part of WLM and you must make sure you do not confuse them when you begin to replace them in your plus skin (more on that later). Most importantly: When a new major version (e.g. 8.5 to 9.0) of Windows Live Messenger comes out it will most likely render your skin useless for that version.

Why? Well because Microsoft change ID's of elements and a whole bunch of other things in UIFILES which make older ones obsolete. This does not apply to skinners who just replace image and not touch UIFILES.

The 4000 Group

The 4000 section of msgsres.dll contains the resources which are called upon in UIFILES. These are not just images, things such preset colors and gradients fall under this section. What you must note is that when you are replacing images later on, you can only replace the ones that are under this group. Also when a new major version of Windows Live Messenger comes out, you should check this group to see if all the resources are the same because otherwise you will get random stuff ups or worse yet a skin that doesn't run.

The majority of images that you will replace will come from this group. While the majority of images you can be replaced with no problems there are some things you need to watch carefully.

The 4006 Group

That brings me to the next group, 4006. 4006 is a very important group as it will cause headaches to those replacing images later on if they do not read this part. 4006 is a group that contains data for 4000 group images. This data can be colorization data, stretch margin data or an image that is shown in a special case. So why is this significant?

The Messenger Plus! Skinning system was made so that people would no longer have to touch this group and go through the tedious process of hex-editing to achieve a certain effect when adding new resources. However here is the important part to note:

Important: If you replace an image from 4000 and it is not appearing when you load your skin it is most likely that it has a 4006 counterpart which is causing it to not render!

If you ever come across this issue, the workaround is to simply specify at least one Metadata item in the image declaration (more on that later).

The 4002 Group

The 4002 group contains color and gradient presets that are called upon in the UIFILES. The way this works is that the number used in the UIFILE points to that file in the 4002 group. So for example, if the style code says:

Element [id=atom(blah)]
{
Foreground:rcclr(550);
}

It means that that element will have a foreground of whatever the 550 resource in 4002 is. This is important because Plus can create 4002 resources for you so that you can have better control and management of colors. It is also handy for mass replacing the color of text in Windows Live Messenger.

The Icon and Bitmap Groups

The last groups we are going to cover are the BITMAP and ICON groups within msgsres.dll

These groups have resources that are not referenced in UIFILE code however are still used and appear in Windows Live Messenger. Therefore, these resources will not appear in the consolidated windows file extraction option in Plus. So please make a note of them.

The Bitmap group has resources that appear throughout Windows Live Messenger, the main ones are the taskbar icons and information icons. The resources that you will want to edit here are 726, 730 and 111. You can edit the rest, but it is a bit pointless in my opinion since you will most likely never see them.

The Icon group pretty much speaks for itself. It contains the Icons that are shown throughout Windows Live Messenger. The thing to note here is that the taskbar sign animations are part of this section. Icon 1 and 684 interchange while you are signing in and icons 685-691 form the animation that is shown in the taskbar when someone signs in. When you are signed out, icon 683 is shown. The rest of the icons are window icons that are placed in the top left corner of windows throughout Windows Live Messenger.

Important: The Windows Live Messenger icon that is shown as a taskbar item does not exist within msgsres.dll, this icon falls under msnmsgr.exe and is also icon 1.

Windows Live Messenger Strings

Windows Live Messenger has a file which contains every single label, command and menu item that is seen in it. The file is called msgslang. It is important to note this file because this file is different for every single language. One of the things I recommend not doing is instructing Plus to replace strings within msgslang as it will alienate and confuse people who speak other languages. While it is a nice feature to have if you are making a skin for yourself and friends, if you are going to release it to the public it is best that you don't use this feature.

That is just my opinion anyway; you don't have to follow it if you don't want to. Anyway msgslang is a good file to look at because it contains what definitions refer to as CMDIDs. Each action within messenger has a CMDID that a menu item or button can call on. For example:

If you take a look at the 923 definition file (the contact window for those of you playing at home) and go to this line:

<Button cmdid=40421 id=atom(spacebtn) AccRole=57 Class="TransparentButton"
Layout=flowlayout(0,2,0,2) Active=MouseandKeyboard|NoSyncFocus 
Padding=rect(5,4,5,4)>

This is the opening element for the Windows Live Spaces button. As you can see the button has a cmdid of 40421, this id basically tells it to open up your space. What you can do is change this ID to another one that exists in msgslang.dll and it would carry out a different action. This is how custom buttons are constructed essentially. We will cover that in a later topic. For now here is a screenshot that shows how to find a CMDID in mslang.

Windows Live Messenger 8.5 UIFile Guide

UIFiles are very important and something you have to get used to in order to succeed in making a skin. While you can technically make a skin without ever touching them, I wouldn't exactly recommend it since you are restricting yourself with what you can do very harshly. The one thing I hear from people when they start to skin is "Where do I start? How do I know what UIFile belongs to what?".

It is easy to become lost in a sea of what seem to be random numbers. Well lucky for you I am going to give you a table which outlines each UIFile and what is contained in it. This table was based upon Windows Live Messsener 8.5 and is subject to change on the next major version. (WLM 9.0 has added a lot of new UIFiles so they will not be in this list).

UIFile Number (Both style and definition)	Purpose
919	Windows Live Today and browser files. The browser can be found under Actions->Personalise Messenger->Mobile Messages
920	Chat Window. Also includes games window, and mobile chat window when talking to a mobile contact.
921	Sign in popup (toast) Also includes Alerts and Custom Alerts
922	"Roster Buddy" Template of where the contacts go when in a group conversation.
923	Contact List Window ** Please note that the actual contact list is not editable in this UIFile please see ones further on.
926	Standard Message Box This is a template for message boxes that appear throughout Windows Live Messenger
927	Non-Standard Message Box This appears to be a template for a message box that does not fall under the standard design. Have not seen it in action yet.
930	Games dropdown menu
931	Contact Card This is a tricky file to edit and control. So prepare for headaches here
932	Activities dropdown menu
934	My Emoticons Window
935	My Winks Window
937	"Single Click Dialog" Purpose isn't fully known, appears to be a downloader window.
940	A lot of dropdowns here: Emoticons Dropdown Backgrounds Dropdown Winks Dropdown Display Pictures Dropdown
941	Dynamic Display Picture Container
942	Automatically shared background dialog
943	Connection Tester dialog
944	Flash Upgrade Dialog
945	More Dropdowns: Colorize dropdown Ink Dropdown Pen Dropdown Grid Dropdown Eraser Dropdown Webcam Dropdown Send File Dropdown Call Dropdown
946	My Background Window
947	Sign In Window
949	Shared Folders Window
950	Shared Folders History Window
952	Templates with relation to custom Alerts. Rarely seen so do not worry too much here.
953	Dangerous File Transfer dialog
956	Messenger Update Window
1001	Contact list area. This is where you edit the position of the contact finder toolbar. To edit the look of this toolbar, please see 44103
1004	Detailed contact list template This is where you edit how you want the detailed contact list to look and work
1009	Compact contact list template This is where you edit how you want the compact contact list to look and work
44101	Contact Picker dialog You can see this dialog by adding someone to a group conversation
44102	Templates related to groups Don't really need to touch these files
44103	Word Wheel This is where you edit the look of the find contact bar in the contact list.
44104	More Templates Related to Groups Again don't have to touch these files.
45700	Template related to editing a Mobile Contact This doesn't need to be touched
45701	Edit/New Contact Group Window
45703	Templates related to results from the word wheel search Don't really have to edit this unless you really want to
45704	Templates related to making a new contact group Don't really have to edit this unless you really want to
45705	Template related to editing a Mobile Contact This doesn't need to be touched
45710	Add/Edit Contact Window

This concludes the first part to my skinning guide. You should now have some basic knowledge in traditional methods of skinning as well as a handy reference on UIFIles to get you started. What I recommend you do is go through these UIFiles and start looking at element names and what each of them has. This way you can familiarize yourself with what is in each window to make skinning a quicker process.

The next section will begin on Messenger Plus Skinning Basics. So stay tuned.

Willz.

More resources for skin creators