So after many a request I deiced to write a skinning tut for people and currently in devolpment i decided to post lessons 1-3. If you find something hard to understand please point it out and I shall fix it


Lesson One: (basics)


Hello good friends of thy! I have had many requests and constant nagging from many people to teach them how to skin and I do try but without a full tutorial it is pretty unless don't you think? Therefore, I decided to write one up giving the ins and outs of skinning as well as a few inside tips and I am sure this topic will be helpful to many people.

Basically skinning MSN Messenger is easy with the right tools. All the data and images we need are stored in one file in your MSN Messenger directory in main and infamous file, "msnmsgr.exe". In here, you have the PNG images, the GIF images, the bitmaps, icons, cursors, and uifiles. I will go into more detail about them a little later.


I first have to say skinning is not easy, there are many images to edit, and you need to have basic css and html knowledge to succeed, as the uifiles will reveal later. So let me explain what is what in skinning:

GIFS: They are mainly the animated images and very few at that plus it contains the image when you view the about box.
Bitmaps: Not too many bitmaps either, the system tray images and the scrollbar images are found here.
PNGS: This is the main place to find all your images, in PNG32 format. You probably be editing this section a lot.
Cursors: Well you can customise the rollover cursors if you truly want to although most skinners do not.
Icons: Contains the main icon for the program well as the various ones we see here and there for example some of the system tray is icons.
Uifiles: Now this is normal text but allows you to add/remove certain things like the advertisement, add images, take away content move things around, and I will try to explain these as much as I can later.

Now there are the basic things you have to edit to make a successful skin. In future lessons you will learn about each one of them.


Tools:

Any skinner needs to be ready, ready for the battle ahead. You need an image editing program e.g. Photoshop, fireworks. You need an icon-editing program e.g. IconXP or Icon workshop. You may want to search for bit strip or a hex editor. However, our most important tool, which we need to know and use inside out, is "Resource Hacker". Don't worry the name have nothing to do with hacking but replaces resources on .dll and .exe files. There are many resource editors but this is a great one to use and is free.
[Download Resource Hacker]

I also suggest that you download the skinning resources which contains all the images you can edit as well as the uifiles.
[Download Skinning Resources]




Lesson Two: (resource hacking)

So you understand what skinning is (well sort of) now you need to replace the various images of a skin using a resource editor. This is the lesson when you will learn how to use the program provided. I prefer Resource Hacker as it works well and is nowhere near buggy plus it is free. I hope you downloaded the skinning resources and took a peak inside to see how many and what images you can skin, as you will get a shock. Now let's learn you how to change MSN for real.

So open Resource Hacker and go to File> Open > then go to your MSN Messenger directory and open msnmsgr.exe. You will then see on the left a list of resources like this:


The ones in the red boxes are the main ones skinners edit and mess around with. When you view the PNGS all you will get is the raw coding. However if you want to see the PNGS as an image, view the skinning resources referring to the right number. (Yes, I do refer to the resources a lot but you will need them)

So our next important step is to actually replace a resource and I will show you using the most common image in skinning, the PNG. First, find in the skinning resources a PNG you would like to edit. Then edit it in your preferred image editing program and export the new image in PNG format. (Try to keep the number the same so you can remember it easily.) Then follow the next steps to replacing that resource:

1.) Close MSN Messenger via the system tray. It should not be running whatsoever.
2.) In Resource Hacker, go to the resource section you want (PNG in this case) and select the PNG number you wish to edit and expand that tree. Then just click on the 1033 resource underneath that folder.


3.) Then right click and select "Replace Resource"


4.) A window should come up. Follow what I say carefully. Browse to the new image that you have created, as this will overwrite the current one. In "Resource Type", put PNG, (however, this changes for certain resources e.g., you can put GIF or JPG when editing those). For "Resource Name" put the resource name, in this case it is 1090. In "Resource, Language" always put 1033. The press the replace button.


5.) Horary it has been replaced. However, do not think it is over yet, you must do some more things. First go to File > Save. Then wait about 10 seconds (if you do not wait you can corrupt the program and lose your work). After that, open MSN Messenger and you can see your new Messenger for yourself.

You can experiment with replacing Icons, Bitmaps etc, they are a bit different, but Resource Hacker sorts it all out for you. Basically, you now know what skinners used to do to skin MSN Messenger but over time things have changed and more and more stuff became possible. Please practice this first for a few days until you get the full hang on it and then you can move one to the next lesson.

Note: Keep regular backups of msnmsgr.exe as sometimes the file can become corrupt. If it does become corrupt, replace the file with a backup and your back on track. If you do not do this, you could lose your entire skin!


Lesson Three: (UIFILE Basics)

By this stage I would expect you to have been practicing skinning for at least a week now and hopefully you would of made a small skin of your own. If you have not DO NOT read this. It will just confuse you, take your time with skinning or you will fail.

Now I'm not going to dumb down resource hacking this time. You can make skins without any UIFILE knowledge at all but for great skins with unique ideas, I suggest you learn them. It is nearly impossible to learn uifiles without html knowledge and basic css knowledge so I suggest you don't even attempt this if you don't know either of those.

So what are the UIFILES? Well, they are favourite part, a chance to make MSN Messenger something different, maybe remove this text here, change the font colour, add a menu, take away an image that's what uifiles control. Ever edited a web page? It's a bit like that but with different tags and much bigger.

When you view the Uifiles, they just look like a huge heap of text and probably mean nothing to you. Well they are responsible for every bit of GUI goes in MSN Messenger. Now each UIFILE changes a certain part. 920 is the conversation window and 923 is the contact list. By editing each UIFILE, you edit a different part of MSN Messenger.


So let me try to explain how they work…


Open them in a text editor I recommend Notepad++. When you open for example, UIFILE 923 you will see a heap of lines, enough to put anyone off, well don't worry we are not recoding, just editing.

At the top end is the style information and at the bottom (where the <element> tags start) is the main information. Now if you know css you will understand like in html we have something like <div class="personalmessage"> it will refer to the style information above and will display what the style information tells it to. However sometimes some parts do not have <div class="whatever"> but something like <td style="align=center"> which does not refer to the style information which UIFILES also sometimes do. But that is html and this is UIFILES and if you understood that your sorted. Otherwise, keep reading slooooooly.

Now don't be worried if I just confused you, that was showing how UIFILES are like html and css, but here are some real life examples:

quote:

---

<png flip=false idres=1092 class="ToolbarIcon"/>

---

quote:

---

<element>
<coding all goes here la la la />
</element>

---

quote:

---

<element>
<element>
<coding all goes here la la la />
<png idres=1000 />
</element>
</element>

---

Note: This thread is exclusive for msghelp.net and is being tested to see how understandable it is. This thread will be continously updated and I would enjoy your comments on it

VERY nice tutorial! Mind if I post it around?

quote:

---

Originally posted by XxRebelSeanxX
VERY nice tutorial! Mind if I post it around?

---

wow!! very good job, maybe ill try my hand at a skin now since theres not gonna be much updates to 7.5, i never wanted to before because of the constant updating but know i could look into it and your tutorial will help me so much im sure!

thx

this is awesome dude! very nice

These are really the basics...

There are a lot of harder parts in skinning, like borderthickness() for 'slicing' an image. But I appreciate your work, abso! GJ!

I'm missing something... I miss an explanation of the UIFILE numbers! (920 is the convo, 921 is the toast,...) Don't forget it in your update!

quote:

---

Originally posted by Absorbation

quote:

---

Originally posted by XxRebelSeanxX
VERY nice tutorial! Mind if I post it around?

---

go ahead but it will be updated over the next week when the full one will be published

---

quote:

---

Originally posted by Mattike
These are really the basics...

There are a lot of harder parts in skinning, like borderthickness() for 'slicing' an image. But I appreciate your work, abso! GJ!

I'm missing something... I miss an explanation of the UIFILE numbers! (920 is the convo, 921 is the toast,...) Don't forget it in your update!

---

It works in wlm right?

How about Windows Live Messenger 8.0?
I have been trying to edit the contact list status images. I've looked through all the files in the MSN Messenger program folder and I can't find them. I think they will be PNG but then theres the problem, I can't find PNGs.

I never used to have these problems on 7.5 because PNG was in msnmsgr.exe but on WLM they dont seem to be. Any suggestions?

Tnx

Nice job abs! I'd like to see some further explanations of the attributes like layoutpos, etc.

Very nice tutorial With reshacker, I make skins for gtalk. (creo que se dice así =p)

quote:

---

Originally posted by n0n3x1574n7
How about Windows Live Messenger 8.0?
I have been trying to edit the contact list status images. I've looked through all the files in the MSN Messenger program folder and I can't find them. I think they will be PNG but then theres the problem, I can't find PNGs.

I never used to have these problems on 7.5 because PNG was in msnmsgr.exe but on WLM they dont seem to be. Any suggestions?

Tnx

---

Really good work absor

I think ill try out one skin .... if i get the time ie

Nice job, but isn't skinning illegal? Thus breaking the rules on the forum?

IMHO, I would make one seperate tutorial about UIFILEs, because they are the most important resources in MSN Messenger.

Editing PNGs and other images is a lot easier to do. But UIFILEs are a lot more complex. They define the way thinks are placed and what they do. (calling what function) UIFILEs also have got some confusing declarations (like padding/borderthickness/...) which new skinners can scare because they don't know what they do and how they must edit them.

Use enough code examples, and this tutorial will be a great base for new skinners!

quote:

---

Originally posted by traxor
Nice job, but isn't skinning illegal? Thus breaking the rules on the forum?

---

Always has to be someone crying about legit things..

good tutorial rossy