Skinning: Let's learn how to skin!

Skinning: Let's learn how to skin! - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Skype & Live Messenger (/forumdisplay.php?fid=10)
+----- Thread: Skinning: Let's learn how to skin! (/showthread.php?tid=56256)

Skinning: Let's learn how to skin! by absorbation on 02-26-2006 at 02:20 PM

Now I have finshed this, and I am so happy now. This is probably going to get popular with the right promotion. I have decided I will keep this on msgstuff.com and on msghelp.net and nothing else. You can link to either this thread or the msgstuff version, you cannot copy and paste it to your own website. That being said I don't mind how you speak about it, send me a PM if you have any questions concering this or if you need any help

View the main version

Lesson 1: 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 has nothing to do with hacking but replaces resources in .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 2: 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 Messenger 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:

[Image: resourcetree.gif]

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 what-so-ever.
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.

[Image: resourcetreeexpanded.gif]

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

[Image: rightclickmenu.gif]

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.

[Image: replaceresource.gif]

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 3: 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 or 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 my 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 a page 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 the web 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:

code:
<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:

code:
<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:

code:
<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:

code:
<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.

Lesson 4: Skinning Other Parts

So so, so I told you how to skin the main section, the PNGS and things are pretty much the same for others. However, a few tweaks need to be made to do so. This is there you will learn what they are, and how simple the changes are when they are in front of you.

Bitmaps: The bitmaps as said before mainly are the system tray images as well as the scrollbars. However, they are a bit more than that, such as that buddy icons and sign in details background. You may have noticed some have a bright kind of pinky purply background. This is important. It is what makes the images transparent and in order to get those images transparent they must be that colour (255,0,255) in RGB format. In addition, one image can make up 8 images, this may seem odd but MSN Messenger slices up the areas, so beware when skinning them because the end result can look odd.

The buddy images: They are also sliced images but in PNG format that make up the buddy images in the contact list. Open them in your image editor and place your new images on top of them, trying to get the size right. Just export and overwrite as normal and the buddy images are done:

[Image: buddyimages.gif]

String Table: The first section of the string table is the contact card colours. Basically, the contact card is made up of three gradients. If you look at the code, it blends so hex colours (just standard HTML colours like #FFFFFF) go into each other to create a nice effect on the contact card. The first set of gradients being the top bar, the second being the middle and the third being the bottom bar. Skinning the contact cards is simple and once your done just click compile script, wait a few seconds, and restart MSN messenger.

The colour values are:
background=\"C0D0F0,F8F8F8\ (Section 1)
background=\"F8F8F8,E2EAF3\ (Section 2)
background=\"CDD9EE,EEF2F8\ (Section 3)

Just find those parts of the code (they are in order) and change the values to what you want. Also by editing the foreground="#hex colour" part you change the text colour on the contact card.

[Image: skinningcontactcard.gif]

Lesson 5: UIFILE Reference

So you're a little confused. Well I don't blame you. Here is some basic UIFILE references starting with what each UIFILE does: (Note: these are UIFILES for MSN Messenger 7.5)

919 = MSN Today/ Tab Content
920 = Conversation Window
921 = Toast Window
922 = Group Conversation Container
923 = Contact List
924 = Activities Menu??
925 = Style??
926 = Message Box
928 = Menu Design
930 = My Games
931 = Contact Card (layout only, not gradient colors)
932 = My Activities
933 = Wink??
934 = My Emoticons
935 = My Winks
936 = Contact Buddy 937 = Download MSN Messenger Content
939 = Wink History
940 = Dropdown Emoticons/ Winks/ Backgrounds
941 = Deluxe Display Container
942 = Auto Share Background Window
943 = Connection Tester
947 = Sign In Windows

Ok lets learn how to actually make the UIFILES change in MSN Messenger. This time there is a load of text and a compile button. I edit the UIFILES in a text editor and then copy and paste them in resource hacker. Go to the UIFILE you want to edit and copy it all and paste it in your text editor. The edit the values you want (you will learn all this later) and copy your new UIFILE data. Then go back into Resource Hacker and delete at least one character (this enables you to copy your new data in) paste your new UIFILE data in. Then click "Compile Script". Wait a few seconds. Restart MSN Messenger and view the changes for yourself.

[Image: compilescript.gif]

Lesson 6: UIFILE Parts

Now below is pretty much what every command in UIFILES are. In this section, it tells you how to and what by changing them it does to the appearance of MSN Messenger. After practice, you will be able to start coding your own sections. This is something you probably would want to print or save. I also suggest looking at some examples, in the examples section.

Layoutpos

Layoutpos is the way you can change the layout of an element or an object. There are 4 types, which are left, right, client (center) and none. e.g. layoutpos=left. To edit these just change the last part to what you want and it should change the position of that object. However, as you can see in the image below MSN Messenger is a slice up of elements. Some elements are small and by changing an object in them, you will not see much change in the layout. Nevertheless, in the conversation window (UIFILE 920) if you change the send button from left to right, you see a huge change as the element is very big. This movement varies a lot, and you should note that in your head.

[Image: elementareas.jpg]

Idres

This one is very easy. It is the way to insert images into the UIFILES. You will see something like idres=1000, which is the PNG image 1000, which you can see in the skinning resources. You can change the number to what you want or remove the line totally to not show that image. An example of the code is:

code:
<png flip=false idres=1092 />

(MSN Today butterfly)

Padding=rect()

For all those who are familiar with CSS you probably could guess what this is. It is nearly the exact same as padding of divs and tables, however, it has a slight twist. There are four ways it does it, top, bottom left, and right. It moves depending on which way you padded and the amount you done it. You tend to find these more in elements. Look at this code below:

code:
padding=rect(2,1,0,1)

Foreground

This applies to the style information however, it is very important. Foreground means the text colour in rgb format. By editing the colours you edit the text colour of that class:

code:
foreground:ifhc(windowtext,rgb(68,96,151));

If you do not know what the numbers mean, Then open a program such as paint and go to colours > edit colours. You can mix colours and it will give you the rgb format. (Look at the image below)

[Image: rgbformat.png]

Mousefocued, selected, pressed

Notice the effects when you rollover a certain area, the text may change the background changes etc. Well this is controlled in the style information and is a great effect to use.

code:
cmdbutton[class="CaptionBtn"][mousefocused]
{
idres: ifhc(0, 100);
}
cmdbutton[class="CaptionBtn"][selected]
{
idres: ifhc(0, 100);
}
cmdbutton[class="CaptionBtn"][pressed]
{
idres: ifhc(0, 100);
}

The idres : ifhc (0, 100) means the PNG to show. You probably gathered this from before, but this time it is a little different, in this case it shows PNG 100.

Mousefocued means what it does when the cursor is over that object, in this case it will show PNG 100. Selected means the effect after you pressed the object and while the command is running. Finally pressed is what it does while you are pressing it. I could give a different image for each one which will provide a unique effect. In this case it just shows one image.

Now boys and girls those were just a few examples, what there must be hundreds all together and I am not going to go through each one. These were the main ones and with practice, you will understand them and when you do, wham! Everything seems easier. I never had this luxury, I had to go trough pain staking trail and error to learn UIFILES and I did not find it that hard, I am sure you can understand this with time.

Lesson 7: UIFILE Examples

The best way I learnt UIFILES was by viewing source examples and practice. I suggest viewing this thread, as it will help you so much. Enjoy!
View Thread

Lesson 8: Skinning Windows Live Messenger

Hold on there buddy, Windows Live Messenger has some dramatic changes. But don't worry I'll tell you them. First all resources are stored in msncore.dll and not msnmsgr.exe, doesn't sound too bad, well just prepare yourself.

The main change is the image format PNG has been removed and replaced by an extension knows as .rle. Problem with that is, no image editor will edit it nor convert it. With this set back, replacing images are impossible at the moment. However, with great minds in the MSN Messenger community we discovered if you know your UIFILES well you can manually re-add the PNG code.

Then later on, we got half way there, we found a way to convert the image to a PNG and edit them. Unfortunately we still cant convert them back. Read how to do this here.

There are also some changes to the UIFILES. You may have noticed all the style classes are stored at the top and all the main code at the bottom. Now each UIFILE has been spilt up, into two, 1 for style the other for the main code. In addition, some UIFILE names are totally different with ridiculously long numbers. I don't want to go into full detail as it keeps on changing but soon a full report will be published for you. There are no skins for Windows Live Messenger at the moment for these reasons.

So, that it is. The ins and outs you need to know. But not everything can be taught by writing, no practice is key, this tut gives you a great idea to get started, from doing basic skins to doing advanced UIFILE editing. I hoped you enjoyed it

RE: Skinning: Let's learn how to skin! by Nathan on 02-26-2006 at 02:23 PM

Very nice absorbation,
That'll help lots of people!!!
Including me if i can be bothered

RE: Skinning: Let's learn how to skin! by RebelSean on 02-26-2006 at 02:25 PM

Very nice work, something I've been waiting on. I'll certainly show people this!

RE: Skinning: Let's learn how to skin! by xJ + on 02-26-2006 at 02:32 PM

Seriously, it's cool!! A brilliant tutorial! (Y) I've been waiting such tutorials!! I'm going to bookmark it...
* my apology to those who think I sound like a newb ...

RE: Skinning: Let's learn how to skin! by Zahid™ on 02-26-2006 at 02:46 PM

Nice tutorial (Y) .

RE: Skinning: Let's learn how to skin! by albert on 02-26-2006 at 03:52 PM

Great Job! (Y)

RE: Skinning: Let's learn how to skin! by Chris4 on 02-26-2006 at 03:55 PM

Thanks Absorbation. If I get soem spare time, I'll give it a go (Y)

RE: Skinning: Let's learn how to skin! by Voldemort on 02-26-2006 at 05:43 PM

ITS VERY GOOD
the only bad thing i can see is that it isnt useful for wlm

RE: Skinning: Let's learn how to skin! by GiantSpider on 02-26-2006 at 05:48 PM

Nice one Absorbation (y)

RE: Skinning: Let's learn how to skin! by Rik on 02-26-2006 at 06:21 PM

Awesome work Absorbation!

RE: Skinning: Let's learn how to skin! by aNILEator on 02-26-2006 at 10:51 PM

don't forget that there is a program being developped called skin+ that will allow memory skins (interchangable skins for all versions of msn) looks promising

RE: RE: Skinning: Let's learn how to skin! by TheSteve on 02-27-2006 at 03:23 AM

quote:
Originally posted by Fukafly
don't forget that there is a program being developped called skin+ that will allow memory skins (interchangable skins for all versions of msn) looks promising

I hope you're not refering to my program call MemSkin+... It allows you to run memory skin indeed. It works on all versions of messenger than use Resources. (Which is pretty much all of them

) However, the skins are not interchangable for version. Meaning each skin will need to be for 1 version of Messenger.

Back on topic:
Good job. Fix your mistake in the WLM section.

(msncore.dll is the user interface library, not the resource containment library)

RE: Skinning: Let's learn how to skin! by sunny81 on 02-27-2006 at 12:54 PM

cool
thx so much.

RE: Skinning: Let's learn how to skin! by absorbation on 02-27-2006 at 03:50 PM

quote:
Originally posted by TheSteve

Back on topic:
Good job. Fix your mistake in the WLM section. (Smilie) (msncore.dll is the user interface library, not the resource containment library)

Probably is, only checked it once, I want to post tools as well such as yours and Huff's skinning tool

RE: Skinning: Let's learn how to skin! by tony on 02-27-2006 at 03:57 PM

good jobs abs, im currently making white msn skin :banana:

RE: Skinning: Let's learn how to skin! by absorbation on 03-21-2006 at 04:11 PM

http://www.zolexmsn.com/index.php?name=Tuto

A french version is now advaible. Thanks to who made it