Peau
This is a primer on how to create skins for Steam. The information below is extracted from the Valve internal document on how to edit, so it may in some cases be 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//resource/styles/steam.styes. The existance of that file will make Steam put that skin as anoption in the settings->interface dialog (Steam will need to be restarted for it to show). From there you can start editing.
You can put new files or existing steam files you want to replace under your skins 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 thiswork (running with -dev makes the Steam client run slower). When enabled, no other dialog can be interacted with; instead you can selected controls on any active dialog and get details on the selection.
There are several sets of information available about a selection. In the top-right is a link to the layout file which associated with the currently selected control, that you can click toedit.
* »’Layout »’
The current layout script that is being applied to the control. This lists the script that applies to all controls in the current dialog or subpanel. You can edit 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 searchesfor in the styles files. Under ‘Parents’ is the list of parent control names that this child is under, which is also used to determine which styles should apply.
* »’Styles »’
Shows all the current styles that are merged together to form the final style that is applied to a control, and from what file the style was loaded. The time item in the list is the merged version that is beingapplied.
* »’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 files. 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’llneed to associate the file with an editor by right-clicking on the file in explorer (right click->properties->Opens with->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 Style Sheets (CSS), where you can override how a control looks based on thecurrent 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. Styles can be set in the .styles files (e.g. Steam.styles) or directly in the .layout 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 red), 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’ is 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 control. Drawn after the control has…