This Tutorial is now available as part of the Messenger Plus! Live Skin Resources section of the database, it has easier formatting and 'chapters'
http://www.msgpluslive.net/skins/resources/tut-Hi...iding-and-options/
----------------------------
In this tutorial I'll show you how to replace Multiple State images, such as the Minimize, Maximize and Close buttons.
In this example you will learn how to: Replace the min,max and close buttons on the Contact List, Log on and Chat Windows and also Browser Windows, although the same method applies to all other windows too.
And another thing....
Give me some credit If I help you with your skins! Far too many people just taking my help over messenger and/or code and not giving me credit
On to the Tutorial!
Creating States
• You will need to create separate images for each state of your buttons.
The states are
- Normal (Active Window)
- Hover (Mouse Over Button)
- Pressed (Mouse Down on Button)
- Inactive (Inactive Window)
All images that you use for a button
Should be the same dimensions. This keeps a nice style running throughout.
Buttons can vary in size though, as you see with the default set above, the close button is much wider than the other 2 buttons.
Create your images, and save them (you should have 12 if you created separate states for each image.)
Hint: When creating the images for your skin, if you use a layered image editor such as Adobe Photoshop you can create each state on a new layer and export each layer as a separate image.
Adding the images to SkinInfo
Assuming you have already created a SkinInfo file in <MessengerSkin> tag you can add this code (modifying Resource Id's where appropriate)
code:
<MessengerSkin>
<ResGroup>
<Restrictions>
<MsgVersions>
<Version Major="8" Minor="5"/>
<Version Major="9" Minor="0"/>
</MsgVersions>
</Restrictions>
<Resources>
<New>
<Pictures>
<!-- Minimize Button -->
<Picture Id="59000">
<File>Images\min1.png</File>
</Picture>
<Picture Id="59001">
<File>Images\min2.png</File>
</Picture>
<Picture Id="59002">
<File>Images\min2.png</File>
</Picture>
<Picture Id="59003">
<File>Images\min3.png</File>
</Picture>
<!-- Maximize Button -->
<Picture Id="59004">
<File>Images\max1.png</File>
</Picture>
<Picture Id="59005">
<File>Images\max2.png</File>
</Picture>
<Picture Id="59006">
<File>Images\max3.png</File>
</Picture>
<Picture Id="59007">
<File>Images\max4.png</File>
</Picture>
<!-- Close Button -->
<Picture Id="59008">
<File>Images\close1.png</File>
</Picture>
<Picture Id="59009">
<File>Images\close2.png</File>
</Picture>
<Picture Id="59010">
<File>Images\close3.png</File>
</Picture>
<Picture Id="59011">
<File>Images\close4.png</File>
</Picture>
</Pictures>
</New>
</Resources>
</ResGroup>
Here I've created a ResGroup for 8.5 and 9.0, this is because the images Id's are the same between versions so I will not need to split this section for 8.5 and a separate one for 9.0.
This is telling the skin to add the images defined (From the Images folder of my Skin) to Messenger with the Id's 59000->59011
We use 59000+ because these are unused by Messenger so we can add our own resources without interfering with other existing resources.
I have added
<!-- Comments --> so that I can easily identify sections of the code, it also acts to organise the XML. Text between the
<!-- comment tags --> is not parsed/loaded so you can place anything you like between them
This is explained more in my Previous tutorial
[How To] - Hide Elements....
Now you've added the images they should be loaded with messenger, when your skin is applied, however you've not told them to be displayed anywhere yet! This is our next task, editing the Styles files to display the new images instead of the original ones.
Defining Replacement Styles Files - WLM 8.5
You will need to create a new ResGroup after the code above similar to this:
code:
</ResGroup>
<!-- WLM 8.5 Only -->
<ResGroup>
<Restrictions>
<MsgVersions>
<Version Major="8" Minor="5"/>
</MsgVersions>
</Restrictions>
<Resources>
<Replace>
<Windows>
<Styles>
<Style Id="919">
<File>8.5\919 (browser)\msgres_4005_919.txt</File>
</Style>
<Style Id="920">
<File>8.5\920 (convframe)\msgres_4005_920.txt</File>
</Style>
<Style Id="921">
<File>8.5\921 (main)\msgres_4005_921.txt</File>
</Style>
<Style Id="923">
<File>8.5\923 (mainwnd)\msgres_4005_923.txt</File>
</Style>
<Style Id="927">
<File>8.5\927 (higmessagebox)\msgres_4005_927.txt</File>
</Style>
<Style Id="947">
<File>8.5\947 (logonFrame)\msgres_4005_947.txt</File>
</Style>
<Style Id="949">
<File>8.5\949 (filesharing)\msgres_4005_949.txt</File>
</Style>
<Style Id="950">
<File>8.5\950 (sharinghistory)\msgres_4005_950.txt</File>
</Style>
<Style Id="953">
<File>8.5\953 (dangerousftdlg)\msgres_4005_953.txt</File>
</Style>
<Style Id="44101">
<File>8.5\44101 (ContactPickerDlg)\msgres_4005_44101.txt</File>
</Style>
<Style Id="45701">
<File>8.5\45701 (groupdlg)\msgres_4005_45701.txt</File>
</Style>
<Style Id="45710">
<File>8.5\45710 (dialog)\msgres_4005_45710.txt</File>
</Style>
</Styles>
</Windows>
</Replace>
</Resources>
</ResGroup>
This is every window with a close button inside it, except the Windows Live Call dialler, most of these windows also have the min and max buttons too.
NOTE: It is important that you only edit the original exported Styles files and NOT the Consolidated Files editing the consolidated Style files overwrites your language onto other language Messengers when using your skin
Consolidated Definitions can be used however as currently they only add Tabulation
This is telling Plus to replace the styles of all those different windows, it's your choice to edit all these styles to include your new buttons of course, but I would recommended it for consistency throughout your skin.
If you aren't going to add WLM9.0 support you can end your Skin here by closing the remaining Tags after </ResGroup>
code:
</MessengerSkin>
</SkinInfo>
Save SkinInfo and Prepare to edit the Styles
HINT: You may notice I use the same folder layout structure as the Consolidated Windows, I merely replace the XXX Style.txt with the original msgres_4005_XXX.txt file this way I have the advantage of organized files and tabulated Definitions, whilst still providing compatible Styles for foreign messengers.
Defining Replacement Styles Files - WLM 9.0
If you're adding WLM 9.0 Beta support, you will need to create a new ResGroup after the code above similar to this:
code:
</ResGroup>
<!-- WLM 9.0 Only -->
<ResGroup>
<Restrictions>
<MsgVersions>
<Version Major="9" Minor="0"/>
</MsgVersions>
</Restrictions>
<Resources>
<Replace>
<Windows>
<Styles>
<Style Id="919">
<File>9.0\919 (browser)\msgres_4005_919.txt</File>
</Style>
<Style Id="920">
<File>9.0\920 (convframe)\msgres_4005_920.txt</File>
</Style>
<Style Id="921">
<File>9.0\921 (main)\msgres_4005_921.txt</File>
</Style>
<Style Id="923">
<File>9.0\923 (mainwnd)\msgres_4005_923.txt</File>
</Style>
<Style Id="927">
<File>9.0\927 (higmessagebox)\msgres_4005_927.txt</File>
</Style>
<Style Id="934">
<File>9.0\934 (emoticoncontent)\msgres_4005_934.txt</File>
</Style>
<Style Id="935">
<File>9.0\935 (mywinksdialog)\msgres_4005_935.txt</File>
</Style>
<Style Id="936">
<File>9.0\936 (myusertiles)\msgres_4005_936.txt</File>
</Style>
<Style Id="946">
<File>9.0\946 (mybackgrounds)\msgres_4005_946.txt</File>
</Style>
<Style Id="947">
<File>9.0\947 (logonFrame)\msgres_4005_947.txt</File>
</Style>
<Style Id="949">
<File>9.0\949 (filesharing)\msgres_4005_949.txt</File>
</Style>
<Style Id="950">
<File>9.0\950 (sharinghistory)\msgres_4005_950.txt</File>
</Style>
<Style Id="953">
<File>9.0\953 (dangerousftdlg)\msgres_4005_953.txt</File>
</Style>
<Style Id="956">
<File>9.0\956 (rlpromptdlg)\msgres_4005_956.txt</File>
</Style>
<Style Id="958">
<File>9.0\958 (mysignaturesounds)\msgres_4005_958.txt</File>
</Style>
<Style Id="959">
<File>9.0\959 (mysignaturesounds)\msgres_4005_959.txt</File>
</Style>
<Style Id="967">
<File>9.0\967 (globalsoundsdialog)\msgres_4005_967.txt</File>
</Style>
<Style Id="44900">
<File>9.0\44900 (dialog)\msgres_4005_44900.txt</File>
</Style>
<Style Id="44953">
<File>9.0\44953 (groupdlg)\msgres_4005_44953.txt</File>
</Style>
<Style Id="44953">
<File>9.0\44954 (ContactPickerDlg)\msgres_4005_44954.txt</File>
</Style>
</Styles>
</Windows>
</Replace>
</Resources>
</ResGroup>
</MessengerSkin>
</SkinInfo>
This is every window with a close button inside it, except the Windows Live Call dialler, most of these windows also have the min and max buttons too.
NOTE: It is important that you only edit the original exported Styles files and NOT the Consolidated Files editing the consolidated Style files overwrites your language onto other language Messengers when using your skin
Consolidated Definitions can be used however as currently they only add Tabulation
This is telling Plus to replace the styles of all those different windows, it's your choice to edit all these styles to include your new buttons of course, but I would recommended it for consistency throughout your skin.
Save SkinInfo and prepare to edit the Styles.
HINT: You may notice I use the same folder layout structure as the Consolidated Windows, I merely replace the XXX Style.txt with the original msgres_4005_XXX.txt file this way I have the advantage of organized files and tabulated Definitions, whilst still providing compatible Styles for foreign messengers.
Editing the Styles - WLM 8.5
Log On, Contact List and Chat Windows etc
Now it's time to edit the Styles Files to display your buttons, This is the important part
Open up either/all 920, 923 and 947 Styles (There are others too,
do not do this for 919)
Search/Scroll Down for "
FLWMinBtn" you should come to some lines saying....
code:
button[id=Atom(FLWMinBtn)]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(20071);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(20072);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(20070);
padding:rcrect(20084);
}
This is where we add our new button codes, replacing this chunk.
Next to each "button[id=Atom(FLWxxxBtn)]" you will need to add the ContentIndex of that particular image, this defines what state each picture should be shown (see the below code)
Items in
Bold Green are the image Id's, you'll need to replace these with the ones you defined from skin info (See the below code)
I'll give you the code here to save time explaining per line, you should be able to figure out what it is that's going on.
code:
button[id=Atom(FLWMinBtn)][ContentIndex=0]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59000);
padding:rcrect(20084);
}
button[id=Atom(FLWMinBtn)][ContentIndex=1]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59001);
padding:rcrect(20084);
}
button[id=Atom(FLWMinBtn)][ContentIndex=2]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59002);
padding:rcrect(20084);
}
button[id=Atom(FLWMinBtn)][ContentIndex=3]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59003);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=0]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59004);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=1]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59005);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=2]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59006);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=3]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59007);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=0]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59008);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=1]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59009);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=2]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59010);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=3]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59011);
padding:rcrect(20084);
}
Phew!
Copy this new code and Paste it over the original, replacing it with the new code.
There are a few more windows which have all 3 Min, Max, Close buttons in like this, I'll leave you to find them.
Browser Windows
Browser Windows (919) being an Exception to this rule, for which I'll give you the code now
Search for "
FLWMinBtn" again, There are many instances of it, go to the first instance only.
This time the code only has Min and Close, replace them as before with the same code for each button, the difference being we have no Max button in this set so the code group for FLWMaxBtn is not needed.
DO NOT REPLACE THE CODE THROUGHOUT THE STYLE
Only Replace the code for the Min and Close Buttons at the first instance with this:
code:
button[id=Atom(FLWMinBtn)][ContentIndex=0]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59003);
padding:rcrect(20084);
}
button[id=Atom(FLWMinBtn)][ContentIndex=1]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59004);
padding:rcrect(20084);
}
button[id=Atom(FLWMinBtn)][ContentIndex=2]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59005);
padding:rcrect(20084);
}
button[id=Atom(FLWMinBtn)][ContentIndex=3]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(59006);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=0]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59011);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=1]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59012);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=2]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59013);
padding:rcrect(20084);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=3]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(59014);
padding:rcrect(20084);
}
Then search for "
FLWMaxBtn" there should be only 1 instance replace the code for the Max button,
Leaving the other 2 button codes as they are
Replace the max button code with:
code:
button[id=Atom(FLWMaxBtn)][ContentIndex=0]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59007);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=1]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59008);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=2]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59009);
padding:rcrect(20084);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=3]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(59010);
padding:rcrect(20084);
}
Save then exit.
Other Windows
Other windows mostly only use Min and Close or just Close, so same thing applies to them, just replace the code for the existing buttons in their Style.
You will need to do this to all the styles files that you wish to replace the buttons on
Editing the Styles - WLM 9.0
Log On, Contact List and Chat Windows etc
Now it's time to edit the WLM 9.0 Styles Files to display your buttons, This is the important part
Open up either/all 920, 923 and 947 Styles (There are others too,
do not do this for 919)
Search/Scroll Down for "
FLWMinBtn" you should come to some lines saying....
code:
button[id=Atom(FLWMinBtn)]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(20779);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(20780);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(20778);
padding:rcrect(20807);
}
This is where we add our new button codes, replacing this chunk.
Next to each "button[id=Atom(FLWxxxBtn)]" you will need to add the ContentIndex of that particular image, this defines what state each picture should be shown (see the below code)
Items in
Bold Green are the image Id's, you'll need to replace these with the ones you defined from skin info (See the below code)
I'll give you the code here to save time explaining per line, you should be able to figure out what it is that's going on.
code:
button[id=Atom(FLWMinBtn)][ContentIndex=0]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59000);
padding:rcrect(20807);
}
button[id=Atom(FLWMinBtn)][ContentIndex=1]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59001);
padding:rcrect(20807);
}
button[id=Atom(FLWMinBtn)][ContentIndex=2]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59002);
padding:rcrect(20807);
}
button[id=Atom(FLWMinBtn)][ContentIndex=3]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59003);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=0]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59004);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=1]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59005);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=2]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59006);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=3]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59007);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=0]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59008);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=1]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59009);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=2]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59010);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=3]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59011);
padding:rcrect(20807);
}
Phew!
Copy this new code and Paste it over the original, replacing it with the new code.
There are a few more windows which have all 3 Min, Max, Close buttons in like this, I'll leave you to find them.
Browser Windows
Browser Windows (919) being an Exception to this rule, for which I'll give you the code now
Search for "
FLWMinBtn" again, There are many instances of it, go to the first instance only.
This time the code only has Min and Close, replace them as before with the same code for each button, the difference being we have no Max button in this set so the code group for FLWMaxBtn is not needed.
DO NOT REPLACE THE CODE THROUGHOUT THE STYLE
Only Replace the code for the Min and Close Buttons at the first instance with this:
code:
button[id=Atom(FLWMinBtn)][ContentIndex=0]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59000);
padding:rcrect(20807);
}
button[id=Atom(FLWMinBtn)][ContentIndex=1]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59001);
padding:rcrect(20807);
}
button[id=Atom(FLWMinBtn)][ContentIndex=2]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59002);
padding:rcrect(20807);
}
button[id=Atom(FLWMinBtn)][ContentIndex=3]
{
AccName:rcstr(20976);
AccDesc:rcstr(20976);
Content:rcimg(59003);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=0]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59008);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=1]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59009);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=2]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59010);
padding:rcrect(20807);
}
button[id=Atom(FLWCloseBtn)][ContentIndex=3]
{
AccName:rcstr(20978);
AccDesc:rcstr(20978);
Content:rcimg(59011);
padding:rcrect(20807);
}
Then search for "
FLWMaxBtn" there should be only 1 instance replace the code for the Max button,
Leaving the other 2 button codes as they are
Replace the max button code with:
code:
button[id=Atom(FLWMaxBtn)][ContentIndex=0]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59004);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=1]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59005);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=2]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59006);
padding:rcrect(20807);
}
button[id=Atom(FLWMaxBtn)][ContentIndex=3]
{
AccName:rcstr(20977);
AccDesc:rcstr(20977);
Content:rcimg(59007);
padding:rcrect(20807);
}
Save then exit.
Other Windows
Other windows mostly only use Min and Close or just Close, so same thing applies to them, just replace the code for the existing buttons in their Style.
You will need to do this to all the styles files that you wish to replace the buttons on
Save all files it should work
Now you can zip up the contents of your skin directory
Rename it from
SkinNameHere.zip to
SkinNameHere.plsk and submit it to the Skins Database or upload here on the forums!
And that's the end of this [How To] you should have learnt a lot in an easy to follow format (That's what I hope anyway)
If this has been of particular help to you please take the time to thank me for taking lots of time to type it out and format it.
And/Or please leave a reputation point for me please by clicking the star.
Thank You
Nile
Rate Me.
This Tutorial May Not Be Copied Without My Permission, Please Contact me for permission