How To Skin The Zone And Game Lobbies
by Lion Heart
 

Section I: Setting Up
DISCLAIMER
Contacting Me
The Program
Backing Up Files Never Hurts
Quite All Zone Applications

 

Section II: Whats Next
What Files To Edit
How To Use Resource Hacker
Making A .zip For Your Friends

 

Section III: Tips
Image Opacity
Image Sizes
Transparency
Color Scheme
Trademark Your Work
Changing Font

 

Section 1. Disclaimer
Technically were are going against zone CoC by editing the skin of the zone. But so far I've advertised the zone skin in many zone lobbies, with many member plus' and others. Not once! Have I been told that I was doing anything wrong. You see the zone doesnt really seem to care for just editing the zone skin. But anyway, I'll include this little excert form the CoC to cover my back, notice the words in red.

6. Copyright and Trademark Notices.

6.1
All contents of this Web Site are: Copyright(c) 1999 Microsoft
Corporation and/or its suppliers, One Microsoft Way, Redmond,
Washington 98052-6399 U.S.A. All rights reserved.

6.2
MSNGZ is for the personal, non-commercial use of users.
Users may
not modify, copy, distribute, transmit, display, perform,
reproduce, publish, license, create derivative works from
,
transfer, or sell any information, software, products, or
services obtained from this Web Site without the express written
consent of MSNGZ.

6.3
Microsoft, Windows, MSN Gaming Zone, Windows NT, MSN, The
Microsoft Network, and other names of Microsoft products
referenced herein are tradenames, trademarks, or registered
trademarks of Microsoft Corporation. Other product and company
names mentioned herein may be the trademarks of their respective
owners.

 

Section 1. Contacting Me
You can contact me at the following:
ICQ: 161836840
AIM: ImAMetalHed (dont spell it Head! This guy is going to kill me if he gets someone else asking for me lol)
ZONE NAME: _X_Lion_Heart_x
E-MAIL: StudioSX@lycos.com

Web Site: http://studiosx.tripod.com (please check out the maps section)

Section 1. The Program
In order to hack the zone files and rip out the .bmp pictures you need resource hacker. Yea you could use a hex editor or some other program but belive me, the resource hacker is the best program for this, and the easiest!
You can downlaod it here: http://www.users.on.net/johnson/resourcehacker/

Section 1. Backing Up Files Never Hurts
Back up your zone files! You have no idea how mnay times i've had to go back to my backed up original files. Like the time I erased them all when I made the skin patch(hehe). Just copy and past the whole MSN Gaming Zone folder. It's a very small size folder.
But for those of you who need the original files you can download them from my site in a .zip file.
http://www.freemech.net/~jace/zoneskin/index.html

Section 1. Quite All Zone Applications
Quite all zone applications!
I cant enfensize this enough! If Your editing the files with the resource hacker while your zone friends is open for some reason the zone notices a change in the files and forces you to download new files and will update your files to the default ones. Even if www.zone.com is opena dn your logged in it notices the changes. Though you can open the files just do not save the changes. So please remember to quite all zone applications and web pages.

Section 2. What Files To Edit
These are the following files that should be edited for zone skin...only!
commonres.dll
lobbyres.dll
mech4.dll <-----If you were skining a different game lobby this would be different, such as mech3.dll or something to that
zonead.dll
zonecli.dll
zonelogo.dll
zone.exe

Section 2. How To Use Resource Hacker
First you open the file that you wish to edit. In this case I will be opening zone.exe(just a side note. you will be editing .exe and .dll files).
Along the left side of the program you see a list of files, the look is almost as though you have explorer open. Since were making a skin we will only be looking into the folders that are named Bitmap.
You open the Bitmap folder and about 50 folders asend from that. All with names 217, 218, 219, and up to 296.
Now open the first folder, 217, asend form that is a gear icon with the numbers 1033 next to it. Click on that, in the center-to-right part of the screen appears an image. The image that apears is the background image on a zone message.
Now to get that bitmap out of the file. Before we do this I advise to organize everythign first, so lets digress for a minute.

On your desktop or in your My Documents folder make a new folder and call it something like Zone Skin Bitmaps. In that folder we will have several other folders. Heres the list of what folders to make inside your main folder:

commonres.dll
lobbyres.dll
mech4.dll <-----If you were skining a different game lobby this would be different, such as mech3.dll or something to that
zonead.dll
zonecli.dll
zonelogo.dll
zone.exe

As you can see I named the folders according to the files we will be editing. Now back to saving those bitmaps and replacing them.
Ok right click on that 1033 file under the 217 folder. The pop-up menu should look like this:

Click the third one on that menu, Save [ Bitmap ] ### :####...(the #'s represent numbers that will appear there. they change for each image). A new window will appear asking where to save the bitmap to. Since this file is in zone.exe we save it to our zone.exe folder. We name it 217 so that we know what folder it goes under in zone.exe. But you can name it something like 217_zmsg_bg.
Now we do the same thing with the rest of the bitmaps in this file and then in the other 6 .dll's.
Ok, we've got all our files extracted. Now say we edited the 217_zmsg_bg.bmp and we wnat to replace it now with our version. Open up zone.exe again and go back to where you were to view and extract the bitmap. This time instead of choosing the second option in the menu were going to chose the 4th one after the menu seperator, Replace Resource... and this window should appear:

Our first step is to click that big button at the top left that says Open file with new bitmap... to open the bitmap we want to replace the defualt one with. That open file window appears and you know what to do. Then your back to the above screen again. Click the Replace button above the Close button. The your back to the resource hacker screen again that we are so firmilar with. Click on 1033 under 217 again and you'll see the defualt image has been replaced!
Woah! I did it! Is probaly what your thinking right now. Now do the same thing to the rest of the bitmaps you wish to change and your done!

Section 2. Making A .zip Update File For Your Friends
This is so simple I dont't know why im including it, but to avoide confusion i'll type i've included it. If you want to show off your zone skin to your friends or they've already seen screen shots of yours and they must have it, zip up the files you edited and send them away to your friend/s.

Section 3. Image Opacity
I looked at how they did it for the join and host buttons(they look like you can see through them)on the zone and what they do is kind of weird. First they take the image they want and change it to sort of a white and black image then they draw, using MS Paint I did this, diaginal lines of this color pink:
Red = 255
Green = 0
Blue = 255
The final product of the image should look like it is checkered pink. Weird But it Works.

Section 3. Image Sizes
DO NOT MAKE THE IMAGES ANY BIGGER THEN THE ONES YOU EXTRACTED! If you extracted a 32 x 101 pixel image Do Not Make It 101 x 32! Do Not Make It Any Bigger! It is a wast of your time trying ot do so!

Section 3. Transparency
To have transpatency in these images is very simple. Color the areas on your images you want transparent with this color:
Red = 255
Green = 0
Blue = 255
Notice its the same used for Image Opacity.

Section 3. Color Scheme
Color schemes, when you make your zone skin try to have all the colors coordinate with one another. In my skin with the Uziel in the background of the game lobby you saw it was in a snow map. The buttons around that were also light grey and white. Yeah I should have made the zone message windows relate to that but hey, its the first of its kind, its allowed to have some bugs. So remember if your doing somethign with a snow like theme, all the images should relate to cold, soft, snow. Desert theme, relate to red, hot, sand, and etc.

Section 3. Trademark Your Work
I don't really know what this si called, maybe im right, so im calling it trademarking. I did this to mine. Open zone.exe, select and open the folder, on the left side like we did before, called Dialog. Open the sub-folder named 279 and click the 1033. Along with opening that a new window should appear on the bottom right corner. This window is the about window that you see when you click Help > About in your zone friends. As you can see from the picture below I added some words to show that I made this version.

You can add words freely by adding this string of code anywhere between the "{" and "}".
CONTROL "Zone Skin", -1, STATIC, SS_LEFT | WS_CHILD | WS_VISIBLE | WS_GROUP, 80, 29, 189, 8
The
words in green DO NOT TOUCH! The words in red are what you change, or what appear in the window. The numbers in blue are the placement measurements of the text. The first number(in blue)is the horizontal placement, the second is vertical placement. And the last two are length and width measurments. Above is an example of what it looked like. And when your done editing the text make sure you click that button at the top that says Complie Script.
next is caption. as you can see in the first 5 lines of code before the first bracket it says CAPTION "ZoneFriends Lion Heart Edition". In the default version it will only say ZoneFriends. I added Lion Heart Edition so well yuo know its my version. You can do that as well.

Section 3. Changing Font
I didn't do this because one, not everyone has all those different fonts, so you'd have to include it in the download, and two some you just can't understand. But If you would like to change the font you cna do it, mind you though it takes long...errrr very long.
before the first bracket for the text in the about screen is the folowing code:
279 DIALOG 0, 0, 277, 100
STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION | WS_SYSMENU
CAPTION "ZoneFriends Lion Heart Edition"
LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_US
FONT 8, "MS Sans Serif"

That last line has a number and then a font name and even the word FONT infront of it. Want to guess what that number is? The number is the font size and the font name is what font will be used. I think thats all you need to know for that.