Skinning Tutorial - 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.
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:
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:
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:
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)
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.
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.
Cmdid
Chmid controls what commands to do. In msglang.dll there is a list of menu items and a number beside it. The number represents the command in question.
(MSN Spaces button)
If I change the number to cmdid=40400, it would open my contact card instead. You can use this to add new buttons using whatever commands and images you want.
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.
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.
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:
<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:
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:
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)
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.
cmdbutton[class="CaptionBtn"][mousefocused]
{
idres: ifhc(0, 100);
}
cmdbutton[class="CaptionBtn"][selected]
{
idres: ifhc(0, 100);
}
cmdbutton[class="CaptionBtn"][pressed]
{
idres: ifhc(0, 100);
}
{
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.
Cmdid
Chmid controls what commands to do. In msglang.dll there is a list of menu items and a number beside it. The number represents the command in question.
<cmdbutton cmdid=40421 id=atom(spacebtn) class="ToolbarBtn" layout=flowlayout(0,2,0,2) AccName=rcstr(4257) AccRole=57 AccDesc=rcstr(61769) ShortcutString=rcstr(4256)>
(MSN Spaces button)
If I change the number to cmdid=40400, it would open my contact card instead. You can use this to add new buttons using whatever commands and images you want.
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.