Skin editing tutorial

[PuNkGirL]

********DISCLAIMER: Prior to doing this, you must have a basic knowledge of editing variables in various programming languages (mostly a derivative of C). I will not be held accountable for you messing up steam because you set a variable too high because you don't know how to change variables or know the maximum and minimum settings for variables (like colors)********

Note: Folder names will be colored blue, file names will be colored red, and variable names will be colored green. You will also need a picture editing program like paint shop pro or adobe photoshop,

Ok first, go into the Steam folder in your windows explorer and go to the skins folder. There should be a folder in there titled Grey (there can also be more if you have other skins installed), make a new folder and title it NewSkin. Go into the Grey folder and select the three folders inside of it, they should be named Resource, servers, and steam respectively. Copy those folders and go into your new folder and paste them there.

You can edit any of the pictures in these folders to whatever you want them to be (most are icons for various things in steam), but these two files will be more important to you: valve_logo.tga and steam_logo.tga. The first file is your background menu and is where you can access all the buttons like games, servers, friends, etc. The second file gets loaded onto valve_logo.tga and is basically a signature picture (i just made it say www.vadavaka.com). When you get done editing any of the pictures, they HAVE to be saved as .TGA files. Make sure you overwrite the old files so you don't have to see it again.

Now this is where it gets complicated and the programming comes into play (its not heavy stuff, but you should know what you are doing). Go into the steam folder and create a new folder and name it cached. Inside this folder make a new notpad file and name it SteamRootDialog.res (note if you are modifying a custom skin, it may already have this folder and that file there). To make it easy, just copy and paste this block of code into the file (it is my modified file, but you'll modify it anyways and it won't matter):

"Steam/Cached/SteamRootDialog.res"
{
"SteamRootDialog"
{
"ControlName" "Frame"
"fieldName" "SteamRootDialog"
"xpos" "200"
"ypos" "348"
"wide" "500"
"tall" "355"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"settitlebarvisible" "1"
}
"ValveLogo"
{
"ControlName" "ImagePanel"
"fieldName" "ValveLogo"
"xpos" "1"
"ypos" "25"
"wide" "500"
"tall" "330"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"image" "resource/valve_logo"
"scaleImage" "0"
}
"Button1"
{
"ControlName" "Button"
"fieldName" "Button1"
"xpos" "10"
"ypos" "300"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "2"
"labelText" "#SteamRootGames"
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Open:Games"
"Default" "0"
}
"Button2"
{
"ControlName" "Button"
"fieldName" "Button2"
"xpos" "75"
"ypos" "300"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "3"
"labelText" "#SteamRootFriends"
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Open:Friends"
"Default" "0"
}
"Button3"
{
"ControlName" "Button"
"fieldName" "Button3"
"xpos" "140"
"ypos" "300"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "4"
"labelText" "#SteamRootServers"
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Open:Servers"
"Default" "0"
}
"Button4"
{
"ControlName" "Button"
"fieldName" "Button4"
"xpos" "10"
"ypos" "325"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "5"
"labelText" "#SteamRootMonitor"
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Open:Monitor"
"Default" "0"
}
"Button5"
{
"ControlName" "Button"
"fieldName" "Button5"
"xpos" "211"
"ypos" "325"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "1"
"labelText" "Close "
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Close"
"Default" "0"
}
"Button6"
{
"ControlName" "Button"
"fieldName" "Button6"
"xpos" "75"
"ypos" "325"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "6"
"labelText" "#SteamRootSettings"
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Open:Settings"
"Default" "0"
}
"Button7"
{
"ControlName" "Button"
"fieldName" "Button7"
"xpos" "140"
"ypos" "325"
"wide" "60"
"tall" "20"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "7"
"labelText" "#SteamRootNews"
"textAlignment" "west"
"dulltext" "0"
"brighttext" "0"
"Command" "Open:New"
"Default" "1"
}
"SteamLogo"
{
"ControlName" "ImagePanel"
"fieldName" "SteamLogo"
"xpos" "195"
"ypos" "8"
"wide" "250"
"tall" "16"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"image" "steam/steam_logo"
"scaleImage" "0"
}
}


Go to the various buttons and change their xpos and ypos to the positions on your valve_logo.tga file that you want the buttons to be (you can also play around with the other variables to see what they do). If you want to put dividers up between a button, here is the code and properties for one:
"Divider1"
{
"ControlName" "Divider"
"fieldName" "Divider1"
"xpos" "205"
"ypos" "300"
"wide" "2"
"tall" "45"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
}

You now only have one more file to edit, but this one is the most tricky, cause you may have to go in and out of steam trying to see if the colors you picked work. Go into the Resource folder and open TrackerScheme.res with notepad. This file contains all the colors that steam uses, the fonts, the borders, and various other things. Go through the variables and change the color's to match your overall design that you want.

When you have finished messing with all of steams specs, save all your work, rename the folder from Newskin to whatever you want that will help you remember what it is. Now load it up and see how it looks. Make any changes to the two .res files that need to be made, save and reload steam. Since there are no program that will help you see what the finished product looks like, you have to use trial and error. Note: If you use a downloaded font and you plan on distributing this skin, you must put the downloaded font in with the zip file and tell how to install a downloaded font.

Well that is my tutorial, I hope it was informative and all, since this is the process I used to make a new steam skin.

[Guest]

I might have to have a go of that later.

[[CAKE]anonymity]

now the only hard part is trying to decide what to make, and umm... actually doing it.

[Guest]

that's not too hard... boobies are usually involved somewhere....

[[CAKE]anonymity]

:wub:

[PuNkGirL]

sigh... men...

[Guest]

Unfortunately I was borne that way:)

[PuNkGirL]

yes the problem does seem to be genetic....

[GRITS]

sigh... men...

definitely a Y chromosome thing.....problem is...

you can't shoot them:D

[[CAKE]anonymity]

:offtopic: my 2 cents, we are pigs, but thats only because everyone knows women have the nicer bodies (and faces).

[PuNkGirL]

anyways, BESIDES boobies, does anyone have any ideas on what an official vadavaka steam skin should look like?

[Guest]

Umm.. our three top girls ;-)

[[CAKE]anonymity]

and, oh wait pg said besides that, well im all out of idea's.

Ok heres one, one of the steam programers is playing rico, and one of the 3 orginal ladies or rico, is playing against them, and kills them, his reply after he dies is "HACKS!"

[Guest]

that's too funny... I keep being called a hacker on DM for getting more then 20 points without dying... especially when it spans across less than 60 seconds:)

[[CAKE]anonymity]

the following was a prime example of propaganda spreading

[Guest]

shh, I have to generate fear so that they will all attempt to dodge, and thus fall for me:)

[[CAKE]anonymity]

and in dm thats a huge advantage