This is a primer on how to create skins for Steam.

The information below is extr acted from the Valve internal document on how to edit, so it may in some cases b e wrong or reference tools that don't exist. To make a skin, you need to take a copy of resource/styles/steam.styles file and copy it to skins/<your skin name here>/resource/styles/steam.styes. The existan ce of that file will make Steam put that skin as an option in the settings->inte rface dialog (Steam will need to be restarted for it to show). From there you ca n start editing. You can put new files or existing steam files you want to replace under your ski ns folder. Good luck! == Tools == Hitting 'F6' key when running the Steam client toggles the VGUI editing dialog. You need to run Steam with the '-dev' command line parameter to have this work ( running with -dev makes the Steam client run slower). When enabled, no other dia log can be interacted with; instead you can selected controls on any active dial og and get details on the selection. There are several sets of information available about a selection. In the top-ri ght is a link to the layout file which associated with the currently selected co ntrol, that you can click to edit. * '''Layout''' The current layout script that is being applied to the control. This lists the s cript that applies to all controls in the current dialog or subpanel. You can ed it the layout script with the link in the top-right of the dialog. * '''Details''' Has information about the currently selected control. Under 'Styles' it has the list of style keys that this control searches for in the styles files. Under 'Pa rents' is the list of parent control names that this child is under, which is al so used to determine which styles should apply. * '''Styles''' Shows all the current styles that are merged together to form the final style th at is applied to a control, and from what file the style was loaded. The time it em in the list is the merged version that is being applied. * '''Localization''' This is a shortcut set of links to all the localized text. It's not affected by the currently selected control. * '''Errors''' This tab only shows if there is an error parsing the current layout or styles fi les. It will display details on what you've done wrong with a file. Clicking on any file link will open it in an editor. If a file is opening, you'l l need to associate the file with an editor by right-clicking on the file in exp lorer (right click-&gt;properties-&gt;Opens with-&gt;change). == Styles ==

VGUI Controls (also called elements, or panels) have how they draw be described by styles. It works in a similar but more limited version of the web Cascading S tyle Sheets (CSS), where you can override how a control looks based on the curre nt state it's in, or by what parent controls it's part of. The Styles tab in the VGUI edit tool shows you all the styles that are being applied to a control. St yles can be set in the .styles files (e.g. Steam.styles) or directly in the .lay out file for a dialog. The following keys can be set in a a style: * '''textcolor''' ** The color to use to draw any text elements, in RGBA (e.g. "255 0 0 255" for r ed), or the name of a pre-defined color (colors can be defined at the top of the styles file under the "colors" key). * '''bgcolor''' ** Background color fill. Can be set to 'none' to draw nothing. If 'render_bg' i s set, this key is ignored. * '''shadowtextcolor''' ** A extra color to draw the background of text - used typically to do a receded effect on disabled button. Also overloaded to set the cursor color in TextEntry controls. * '''selectedtextcolor''' ** The color to draw selected text in a TextEntry (text box) control. * '''selectedbgcolor''' ** The color to draw the background of selected text in a TextEntry control. * '''render''' ** A set of render commands to draw custom imagery/gradients/colors on the contr ol. Drawn after the control has drawn any sub-elements. More details below. * '''render_bg''' ** Just like 'render', but is drawn in the background before any sub-elements ar e drawn. * '''padding''', '''padding-left''', '''padding-right''', '''padding-top''', ''' padding-bottom''' ** Extends the size of Label or Button based control by the specified sizes. Thi s doesn't apply to all controls right now, let a dev know if it doesn't control something you need. * '''inset''' ** Takes 4 numbers, e.g. "0 0 0 0". Specifies how sub-controls should be positio ned within the control, and exactly what area "bgcolor" should draw in. Number a re left, top, right, bottom * '''image''' ** Sets the image to draw instead of any text. Works with Label or Button base c ontrols. If set, replaces any text on the button. * '''font-family''' ** The name of the font ("Tahoma", "Verdana", etc.). Only one font name can be s pecified. If the font isn't present on the users system, it will always fall bac k to Tahoma. * '''font-weight''' ** A number from 0 to 1000 the describes how bold the font draws. 0 is thinner t han normal, 400 is standard, 700 is bold, 1000 is extra bold. The exact steps ca n differ per font. * '''font-size''' ** The height, in pixels, of the font. * '''font-style''' ** A list of flags to apply to the font. This is a list of flags, seperated by s emicolons. Possible flags are "italic", "underline", "strikeout", "symbol", "ant ialias", "dropshadow", "outline", "rotary", "additive", "uppercase", "lowercase" (some of these only apply in the in-game overlay) * '''corner_rounding'''

** The number of pixels by which corners should be rounded. This setting is pass ed through to the OS, and only applies to dialogs (Frame) or Menu controls. The order the styles are listed in the file are the order they get applied to a control. To control how a . The following style flags (called 'pseudo classes' in CSS) can be used to change the appearance of a control based on it's state. It's specified with a colon (' :') after the control name, e.g. "Button:active { textcolor=white } ". * '''hover''' ** Applied when the mouse cursor is over the control * '''active''' ** The left mouse button is pressed on the control * '''focus''' ** The control has keyboard focus, as moved around by the TAB key * '''selected''' ** The control has it's primary option enabled, the check-box checked or the rad io button selected * '''disabled''' ** The control has been set disabled by the code, and can't be interacted with * '''scrollbar''' ** The controls has an optional scrollbar, and it's currently visible * '''framefocus''' ** Used only on the controls Frame and FrameButton, set if the dialog currently has focus You can specify multiple style flags if necessary to get very specific behaviour s, for example: <pre>CheckButton:selected:disabled { textcolor=black } </pre> will set the text color of a CheckButton to be black if the checkbox is currentl y checked, but the control is set to disabled. == Layout files == Layout file that are brand new have the extension '.layout' and live in the "res ource/layout/" directory in the Steam client. There are still a large set of old VGUI layout files with the extension '.res', which have a more verbose form; bu t these can still co-exist together. Layout commands live under the key "layout" in the file, and are a set of commands to position the controls. Any control th at is referenced by a layout command will ignore any original sizing or placemen t information and be completely overridden by the layout command. The commands a re: * '''Place''' ** Layouts a list of controls vertically or horizontally * '''Region''' ** Describes a region in which to do layout, that can be referenced by Place com mands There is a lot of parameter to a Place and Region commands, most of which are co mmand between the two. All the parameters are optional. * '''controls''' ** A list of controls that should be layed out (Place command only). The names o f control here are their instance name as defined in a layout/.res file, not the

class names used in styles. * '''region''' ** In a place command this is the region in which the controls should be layed o ut. In a region command this is the parent region of the region you are declarin g, the region will be positioned relative to it's parent. * '''name''' ** The name of the region being created, so it can be referred to from Place com mands (Region command only) * '''start''' ** The name of the control or region that we should start laying out from * '''dir''' ** The direction we should lay out the commands, "down" or "right". "right" is t he default. * '''align''' ** Where we should align the set of controls to, may be "right", "bottom", or "t op-center". The default is to align to the top-left. * '''margin''' ** how much room we should allow between our controls and where we are aligning to. * '''margin-left''', '''margin-right''', '''margin-top''', '''margin-bottom''' ** specific overrides for margin on different directions * '''spacing''' ** how much gap to put between the controls we're laying out * '''overflow''' ** What to do if the contents don't fit in the region, this is for regions only. The default is to clip the region and try to resize the contents a bit to fit i n it. The options you can set are 'allow-horizontal', 'allow-vertical', 'allow-b oth', 'scroll-horizontal', 'scroll-vertical', or 'scroll-both'. The allow varian ts will prevent the contents of the region from being resized or moved and will allow them to overflow. The scroll variants will also allow overflow, but in add ition will automatically place scroll bars at the edges of the region which allo w scrolling the contents. The allow variants are useful for use in child regions of a parent region that has the scroll variant set. The parent will then scroll all the child regions as well. (Region only command) * '''x''', '''y''' ** an absolute position to start from * '''width''' ** sets a fixed width, in pixels, the controls will be. Can be set to "max", whi ch is the full width of the container minus the margin. * '''height''' ** sets a fixed height, in pixels, the controls will be. Can be set to "max", wh ich is the full height of the container minus the margin. Layout commands are specified as a list, evaluated in order of evaluation. You d on't typically need to use the Region command except for more complex layouts. <pre> "layout" { region { name="bottom_row" width="max" align=bottom height=30 } // defines a 30 pixel high region along the bottom of the area we're lay out out place { controls="OKButton, CancelButton" region="bottom_row" margin=6 margin-right=12 } // places the OK and Cancel buttons in that bott om area } </pre> == Render commands == The "render" and "render_bg" keys in styles specify a list of instructions to dr aw images or rectangles. The are done in-order. The commands all take at least 4

parameters, the coordinates within the current control to draw at. x0, x1, y0, y1 describe the left, right, top, and bottom coordinates in pixels, and then you can add or subtract numbers from that. There are several different commands tha t can be issued: * '''fill''' ** Fills an area with a single color. Takes an extra color parameter, which need s to defined earlier in the "Colors" section of the styles file. * '''image''' ** Draws an image at the area, with no scaling. Takes the file name of the image as it's last parameter. * '''image_scale''' ** Draws an image at the area, scaling it to fit the specified area. Takes the f ile name of the image as it's last parameter. * '''image_proportional''' ** Draws an image at the area, scaling proportionally to fit the specified area. Takes the file name of the image as it's last parameter. * '''gradient''' ** Fills an area with color gradient, top to bottom. Takes two colors, the color to draw at the top and the color to draw at the bottom. * '''dashedrect''' ** Draws a dashed rectangle with the specified color. It's relatively easy for a dev to add more rendering commands, so if there is a common set of drawing commands needed just ask. Don't quote any of the parameter s, because since the whole command is in quotes the parser will break. Some examples of usage, from a styles file: <pre> Button { textcolor=buttontext bgcolor=grey render_bg { // gradient fill the whole background - when usi ng RGBA color strings dir 0="gradient( x0, y0, x1, y1, white, black )" // lines around 0="fill( x0, y0 + 1, x0 + 1, y1 - 1, bordercolor )" 0="fill( x1, y0 + 1, x1 - 1, y1 - 1, bordercolor )" 0="fill( x0 + 1, y0, x1 - 1, y0 + 1, bordercolor )" 0="fill( x0 + 1, y1 - 1, x1 - 1, y1, bordercolor )" // single pixel fills in the corners 0="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, DarkCor ner )" 0="fill( x1 - 1, y0 + 1, x1 - 2, y0 + 2, DarkCor ner )" 0="fill( x0 + 1, y1 - 1, x0 + 2, y1 - 2, DarkCor ner )" 0="fill( x1 - 1, y1 - 1, x1 - 2, y1 - 2, DarkCor ner )" // and a crappy broken looking image 0="image( x0, y0, x1, y1, graphics/icon_expand_o

ver )" } } </pre> The numbers on each line are just an artifact of our common parsing library; it doesn't matter what you put there, and it can all be the same. == Panel Zoo == Hitting 'F7' opens the VGUI panel zoo dialog. This dialog shows a set of differe nt common controls in various states, and is a good place to test changes you've made to controls in general. You can use the F6 tool in this mode to get inform ation about the various controls.

== Editing older resource files == A lot of dialogs already have a layout file defined with the extension ".res". I t's OK to start add in extra styles, color, or layout sections to an existing fi le. You can also tweak the positions of controls in older files by just changing the "x", "y", "wide", "tall" keys on the control itself, but they don't auto-re load and aren't as expressive as the layout scripts.

== Adding new controls == To add a new control you just need to pick a unique name for the control, add fi ll in some basic fields. Below is an example of adding a URL to the vgui debuggi ng dialog. <pre>"resource/layout/layoutdebugdialog.layout" { controls { wiki_link { controlname="URLLabel" labeltext="VGUI editor wiki p age" urltext="https://intranet.valvesoftware.com/wiki/index.php/VGUI_Editing" } } layout { ... place { control="wiki_link" align=bottom width="max" margin=16 m argin-bottom=12 margin-right=16 } } } </pre> The '''controlname''' key determines the class of control to create. Typically y ou'll want "Label", "URLLabel", or "ImagePanel". You can also place "Button", "C heckButton", "RadioButton" controls for mocking up dialogs, that a programmer ca n later come along and hook up to functionality.