Skinning Tutorial - Uifiles
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 re-coding, 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:
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:
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:
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:
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. If you understood what was said, then you have super powers. You should take each part step by step, but practice in the next lesson will help you understand them more.
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 re-coding, 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:
<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:
<element>
<coding all goes here la la la />
</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:
<element>
<element>
<coding all goes here la la la />
<png idres=1000 />
</element>
</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. If you understood what was said, then you have super powers. You should take each part step by step, but practice in the next lesson will help you understand them more.