: Home : Skins : Skinning Tutorial : Links : Contact Me :
How to skin WLM 8.1

With this guide I aim to get you into skinning. The guide is to provide you with information on replacing images finding, images, and editing bits of code to produce rollover effects and removing borders and some more stuff should you need it. This guide isn’t the best in the world and I appreciate that. I myself have only been skinning for a little over a week now so I don’t know too much myself. But nearly all the knowledge I possess about skinning is here!
Ok lets start skinning……

Tools you need and examples:
ResHack
RLE2PNG
Photoshop , Paint Shop pro, (Any Image editing tool capable of producing images in .png format.)
Example PNG's

Ok let’s start off with some advice. Skinning can be a little tricky at times as well as very annoying. There has been a few occasions when creating a skin ware I have messed something up totally and it WLM doesn’t work before of it. Thankfully I make a backup copy of messenger before and after I tamper anything so you I can easily go back to the last thing I done I SUGGEST YOU DO THE SAME!
Let the tutorial begin.

(BTW some parts of this tutorial were taken from other posts so i take no credit for this.)

Replacing PNGS:
Step 1: Download the example files, ResHack
Step 2: Unpack and edit one of the Pngs. Say for example Png 682 (This is the Windows Live Messenger text at the top of the Contact list.)
Step 3: Ok editing finished load ResHack and go to File> Open and select msgsres.dll from your MSN Messenger install directory.
Step 4: Making a backup befor you rush into anything else.
Step 5: in ResHack go to Action> Replace Other.
Step 6: Select the png (682.png) that you edited.
Step 7: you will see 3 input box's show.
Resource Type:
Resource Name:
Resource Language:

First this i should explain is Resource Type will be 4000 all the time and Resource language will be 1033 all the time, but Resource name will change to whatever the name of the png is.

So Example (for 682.png)
Resource Type: 4000
Resource Name: 682
Resource Language: 1033

Example 2:
Say i had image 133 i would put the following
Resource Type: 4000
Resource Name: 133
Resource Language: 1033

Simple heh?

To Add a new image just call the image a new name like 99999999.png for example and go to Action> Add Another Resource and do the same as if you were replacing

Example:
Resource Type: 4000
Resource Name: 99999999.png
Resource Language: 1033

If you add a new Resource for example i added 46612.png to stop the colorize on image 20057. so basicly i changed all the text on ResHack that referenced image 20057 to 46612 and this stopped the colorization happening.

Ok thats how to replace pngs and adding them have fun with that.. REMEMBER ALWAYS GIVE THE PNG THE CORRECT NAME!!!

Finding Images:
Nice and simple say i want to find the minimize button Open ResHack and your .dll.. Hit CTRL + F type in MinBtn keep hitting F3 till you find something like this:

button[id=Atom(FLWMinBtn)]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(46617);
padding:rcrect(20253);
}

Ok this but Content:rcimg(46617); notice "46617" thats the image name.. so create a png with the name 46617.png and thats it...

Ok now some good stuff..

How to remove adverts

go to 4004 > 923 > line 153 and change to the following

<Element layoutpos=bottom layout=borderlayout()>
<Constrainer layoutpos=none ID=Atom(SSConstrainer) Layout=FillLayout()>
<SlideShowWithAd ID=Atom(AdBanner) Layout=BorderLayout() Padding=Rect(0,0,0,3) Active=inactive Visible=False>
<Element Layout=BorderLayout() LayoutPos=none>

and

on line 165 change

<Element Id=Atom(AdBrowserCont) Layout=VerticalFlowLayout(0,0,3,0) Visible=False Padding=Rect(8,2,0,2)>
<element id=atom(adbannercontainer) layout=filllayout() borderthickness=rect(1,1,1,1)>
<adbrowser id=atom(adbrowser) width=234 height=60 layoutpos=none DefaultADTimerMS=95000 DLControl=dlctlNoActiveX DocHostUIFlags=dhUIscrollno|dhUIopennewwin|dhUIno3dborder|dhUIactivateclienthito
nly/></element>


and go to 4004 > 920 line 40

Change:
<element id=atom(adbannercont) layout=filllayout()>
<textadbanner id=atom(adbanner) layoutpos=none pagegroupnode="" layout=verticalflowlayout(0,0,2,2) padding=rect(4,0,0,0)>

To:
<element id=atom(adbannercont) layout=filllayout() layoutpos=none><textadbanner id=atom(adbanner) layoutpos=none pagegroupnode="" layout=verticalflowlayout(0,0,2,2) padding=rect(4,0,0,0)>

How to remove the Glare
Go to 4005 > 923 and change the following to this..

MeArea[id=atom(idMeArea)]
{
background:argb(0,0,0,0);
}

and this one two

element[ID=Atom(ai233)]
{
background:argb(0,0,0,0);
}

How to remove Borders (Emoticons, Winks, Voice, Font etc area)

Change:
<Element id=atom(inputtoolbar) layoutpos=top layout=filllayout()>
<Element layout=filllayout() borderthickness=rect(1,1,1,0) ID=Atom(ai107)>


to

<Element id=atom(inputtoolbar) layoutpos=top layout=filllayout()>
<Element layout=filllayout() borderthickness=rect(0,0,0,0) ID=Atom(ai107)>

And

Element[ID=Atom(ai107)]
{
bordercolor:rcclr(20020);
}
Element[ID=Atom(ai108)]
{
bordercolor:rcclr(20021);
borderthickness:rcrect(20214);
}

To this

Element[ID=Atom(ai107)]
{
bordercolor:argb(0,0,0,0);
}
Element[ID=Atom(ai108)]
{
bordercolor:argb(0,0,0,0);
borderthickness:rect(0,0,0,0);
}


How to remove Borders (Invite Contact, Webcam, etc Area)

Change:

Element[ID=Atom(ai171)]
{
bordercolor:rcclr(20020);
borderthickness:rcrect(20022);
}
Element[ID=Atom(ai172)]
{
bordercolor:rcclr(20021);
borderthickness:rcrect(20214);
}

and

Element[ID=Atom(ai187)]
{
bordercolor:rcclr(20020);
borderthickness:rcrect(20022);
}
Element[ID=Atom(ai188)]
{
bordercolor:rcclr(20021);
borderthickness:rcrect(20214);
}

In 4004 > 920 deleate all of the lines saying the following

<element id=atom(inkmodesep) layout=filllayout()>
<element width=2 ID=Atom(ai129)/>
</element>

How to Center Icons:

4004 --> 920
Search for:
<Element padding=rect(0,0,0,0) layout=borderlayout() ID=Atom(ai108)>
<MToolbar TextSuppressOption=Individual layoutpos=client padding=rect(1,1,1,1)>

Replace for:
CODE<Element padding=rect(0,0,0,0) layout=flowlayout(0,2,2,0) ID=Atom(ai108)>
<MToolbar TextSuppressOption=Individual layoutpos=client padding=rect(1,1,1,1)>



4004 --> 919
Search For:
<Element padding=rect(0,0,0,0) layout=borderlayout() ID=Atom(ai172)>
<MToolbar TextSuppressOption=Individual padding=rect(0,1,0,1)>

Replace for:
<Element padding=rect(0,0,0,0) layout=flowlayout(0,2,2,0) ID=Atom(ai172)>
<MToolbar TextSuppressOption=Individual padding=rect(0,1,0,1)>

How do i remove Seperators

go to 4004 > 920 remove the following.


<element id=atom(inkmodesep) layout=filllayout()>
<element width=2 ID=Atom(ai129)/>
</element>


How to remove Borders (Emoticons, Winks, Voice, Font etc area)

Change:
<Element id=atom(inputtoolbar) layoutpos=top layout=filllayout()>
<Element layout=filllayout() borderthickness=rect(1,1,1,0) ID=Atom(ai107)>


to

<Element id=atom(inputtoolbar) layoutpos=top layout=filllayout()>
<Element layout=filllayout() borderthickness=rect(0,0,0,0) ID=Atom(ai107)>

And

Element[ID=Atom(ai107)]
{
bordercolor:rcclr(20020);
}
Element[ID=Atom(ai108)]
{
bordercolor:rcclr(20021);
borderthickness:rcrect(20214);
}

To this

Element[ID=Atom(ai107)]
{
bordercolor:argb(0,0,0,0);
}
Element[ID=Atom(ai108)]
{
bordercolor:argb(0,0,0,0);
borderthickness:rect(0,0,0,0);
}


How to remove Borders (Invite Contact, Webcam, etc Area)

Change:

Element[ID=Atom(ai171)]
{
bordercolor:rcclr(20020);
borderthickness:rcrect(20022);
}
Element[ID=Atom(ai172)]
{
bordercolor:rcclr(20021);
borderthickness:rcrect(20214);
}

and

Element[ID=Atom(ai187)]
{
bordercolor:rcclr(20020);
borderthickness:rcrect(20022);
}
Element[ID=Atom(ai188)]
{
bordercolor:rcclr(20021);
borderthickness:rcrect(20214);
}

How to Produce a button rollover: (The Simple way)

Replace your normal Button code with the following. Also make sure you add the right references.

button[id=Atom(FLWMinBtn)]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(46617);
padding:rcrect(20253);
}
button[id=Atom(FLWMinBtn)][mousefocused]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(20071);
padding:rcrect(20253);
}
button[id=Atom(FLWMinBtn)][pressed]
{
AccName:rcstr(20076);
AccDesc:rcstr(20076);
Content:rcimg(46616);
padding:rcrect(20253);
}
button[id=Atom(FLWMaxBtn)]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(46618);
padding:rcrect(20253);
}
button[id=Atom(FLWMaxBtn)][mousefocused]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(20072);
padding:rcrect(20253);
}
button[id=Atom(FLWMaxBtn)][pressed]
{
AccName:rcstr(20077);
AccDesc:rcstr(20077);
Content:rcimg(46619);
padding:rcrect(20253);
}
button[id=Atom(FLWCloseBtn)]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(46620);
padding:rcrect(20253);
}
button[id=Atom(FLWCloseBtn)][mousefocused]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(20070);
padding:rcrect(20253);
}
button[id=Atom(FLWCloseBtn)][pressed]
{
AccName:rcstr(20069);
AccDesc:rcstr(20069);
Content:rcimg(46621);
padding:rcrect(20253);
}

A Few References (Some are Repeated):
Contact list dp = 597
Me Area Background = 638
Me Area Border = 639
Contact Card Buddy icon = 1112
Large DP Picture = 1530
Large DP Picture = 1531
Large DP Picture = 1532
Large DP Picture = 1533
Empty Checkbox normal=20031
Empty Checkbox over=20032
Empty Checkbox down=20033
Empty Checkbox disabled=20034
Ticked Checkbox normal=20035
Ticked Checkbox over=20036
Ticked Checkbox down=20037
Ticked Checkbox disabled=20038
Selected Checkbox normal=20039
Selected Checkbox over=20040
Selected Checkbox down=20041
Selected Checkbox disabled=20042
Vapor for other windows = 20055
Main window borders = 20056
Main window colouring = 20057
Chat window border and small glow = 20062
Alternate Live Logo = 20065
Live Logo used in toasts and other windows = 20066
Close = 20070
Minimise = 20071
Maximise = 20072
Show Menu = 20073
Hide Menu = 20074
Line space between title bar buttons = 20075
Gripper = 20076
Dangerous File Transfer Icon = 20077
Vapor = 20091
Contact listheader Backing = 20092
control button default=20093
control button selected=20094
control button over=20095
control button down=20096
vert scrollbar normal = 20139
vert scrollbar over = 20140
vert scrollbar pressed = 20141
vert scrollbar pressed over? = 20142
horiz scrollbar normal = 20143
horiz scrollbar over = 20144
horiz scrollbar pressed = 20145
horiz scrollbar pressed over? = 20146
scroll thumb normal = 20147
scroll thumb over = 20148
scroll thumb down = 20149
scroll thumb down over? = 20150
scroll button normal (can be replaced with image) = 20151
scroll button over = 20152
scroll button down = 20153
scroll to top arrow normal = 20155
scroll to top arrow over = 20156
scroll up arrow normal = 20161
scroll up arrow over = 20162
scroll left arrow normal = 20167
scroll left arrow over = 20168
scroll down arrow normal = 20173
scroll down arrow over = 20173
scroll right arrow normal = 20179
scroll right arrow over = 20180
scroll to bottom arrow normal = 20185
scroll to bottom arrow over = 20186
gleam icon = 46606
Spaces icon = 46610
Contact list buddy = 46611
Vapor = 20091
Close = 20070
Minimize = 20071
Maximize = 20072
Menu = 20073
Hide = 20074
splitterhandle = 30417
youmute = 457
memute = 459
Gripper = 20076
Webcam Button icon = 268
Branded Window Icon = 20066
Custom Border = 979
Song Icon = 595
Search Button 654
Tabs Scroll Up = 633
Tabs Scroll Down = 634
Messenger Window Icon = 90
Messenger Window Caption Logo = 682
Single Player = 335
Two Plater = 336
HTTP Image = 580
BKndImage 569
Check Box = 395
Wink Image = 286
Info bar close button = 1455
Status Bar Image = 1030
AbTbContactAddRestrictedUser = 1131
AbTbContactAdd = 1131
Expand Collapse Icon = 1382
Expand Collapse Icon = 1382
AlertListItemTemplate = 1373
Statuspill = 46611
ClearButton = 1133
ClearButton 1134
verthome = 20155
lineup = 20161
lineleft = 20167
linedown = 20173
lineright = 20179
Minimize Button = 20249
Maximize Button = 20252
Hide Frame Button 20074


User Interface Reference (4004/4005):
919 - MSN Today, Tab Content, Pending Requests
920 - Conversation Window
921 - Toast Window
922 - Group Conversation Container
923 - Contact List
926 - Standard Message Box
930 - Activities Menu, My Games
931 - Contact Card
932 - Activities Menu, My Activities
934 - Emoticons Dialog
935 - Winks Dialog
937 - Download MSN Messenger Content, "Single Click Dialog"
940 - Content Drop Down Menus
941 - Dynamic Display Picture Container
942 - Automatic Background Share Dialog
943 - Connection Test Dialog
944 - Flash Upgrade Dialog
945 - Ink, Video, Send File and Call drop down menus
946 - Backgrounds Dialog
947 - Login Window
949 - File Sharing window
950 - File Sharing History
952 - A bunch of Templates which appear to be related to toasts
953 - Dangerous File Transfer Dialog
1001 - Address Book Toolbar (The one with the word wheel, Add Contact and Manage Contacts button)
1004 - Detailled Contact List
1009 - Normal Contact List
44101 - Contact Picker Dialog
44102 - Well Address Templates
44103 - More word wheel related elements.
44104 - Address Book Templates (Buddy,BuddyPickerExpanded,Group,Error)
45700 - Mobile Selector
45701 - Edit Group Dialog
45703 - "People Picker"
45704 - More AB Templates
45705 - Mobile Address Selector
45710 - Add/Edit Contact Dialog



Ok well I hope you learnt something from this ruff guide I will try and update it when I can. Anyways enjoy the world of skinning…As i said im kind of new to skinning myself so go easy on me with the comments.
 

You are Visitor Number: 4872 

Site Designed by Adam Vester