Shoutbox

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"/>

---

Now this will find the information in the style which is "ToolbarIcon". The MSN Messenger team have named the classes conveniently so we can guess what they are in this case "ToolBarIcon" is what the PNGS do on the top toolbar in the contact list. (MSN Today button etc) But your not expected to know anything like that. I didn't at this stage.

Just looking at that small code you are probably thinking … run, I give up. I don't blame you, finish reading all of this and it will all come together.

UIFILES also, do have a basic syntax. First, everything must be in an <element> tag of some form. But some parts of the code do have large blocks of element tags whereas some have one line.


You may find something like:

quote:

---

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

---

That is a normal way of opening and closing the tags however you may find a lot of code in the <element> tags in <element> tags in <element> tags:

quote:

---

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

---

But there is another way. Sometimes there is not much information in the <element< tags so they just add a </< at the end of one tag:

<element class="annoying uifiles" chmid=1254 layoutpos=right />

The trailing slash automatically ends the tag for you. If you do not close any tags, the uifiles will break and will not work. So beware when adding big lines or taking away big lines.

So that is out basic UIFILE tutorial. Do not be put off by it so far you will see much easier things to come now after this part do not worry.


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?

---

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

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

---

Ok then, I'll just wait for the full thing to be finished .

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!

---

Excalty what i want to go into. There was an outdated resource hacking article on mess.be but nothing for learning uifiles to. This is going to be updated, fresh and containing more information than ever before. The tut should be finshed by the end of the week

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