Steamscheme.res file structure
Scheme
Colors
In this section is where all of the colors used by the Controls and drawing are defined.
Syntax: "colorname" "r g b a"
Example: "GrayBG" "73 78 73 255"
BaseSettings
Below are all keyvalue definitions that are utilized by controls.
Key name | Description |
---|---|
Borders | |
Border.Bright | Lit side of a control |
Border.Dark | Dark/unlit side of a control |
Border.Selection | Additional border color for displaying the default/selected button |
CheckButton | |
CheckButton.BgColor | |
CheckButton.Border1 | Left checkbutton border |
CheckButton.Border2 | Right checkbutton border |
CheckButton.Check | Color of the check itself |
DragDrop | |
DragDrop.DragFrame | |
DragDrop.DropFrame | |
Frame | |
Frame.ClientInsetX | Where to start the title bar (x) |
Frame.ClientInsetY | Where to start the title bar (y) |
Frame.BgColor | |
Frame.OutOfFocusBgColor | |
Frame.FocusTransitionEffectTime | Time for a window to fade on focus |
Frame.TransitionEffectTime | Time for a window to fade on open/close. |
Frame.AutoSnapRange | |
Frame.UsesAlphaBlending | |
FrameTitleBar.Font | |
FrameTitleBar.SmallFont | |
FrameSystemButton.Icon | Top left corner icon |
FrameSystemButton.DisabledIcon | Top left corner disabled icon |
ListPanel | |
ListPanel.TextColor | |
ListPanel.BgColor | |
ListPanel.SelectedTextColor | |
ListPanel.SelectedBgColor | |
ListPanel.SelectedOutOfFocusBgColor | |
ListPanel.DisabledTextColor | |
ListPanel.DisabledSelectedTextColor | |
ListPanel.EmptyListInfoTextColor | |
ListPanel.RowHeight | |
ListPanel.PerPixelScrolling | |
Menu | |
Menu.TextInset | |
Panel | |
Panel.FgColor | |
Panel.BgColor | |
PropertySheet | |
PropertySheet.TransitionEffectTime | Time to change from one tab to another |
PropertySheet.TabGap | |
RichText | |
RichText.InsetX | Margin (x) |
RichText.InsetY | Margin (y) |
RichText.TextColor | |
RichText.BgColor | |
RichText.SelectedTextColor | |
RichText.SelectedBgColor | |
ScrollBar | |
ScrollBar.Wide | |
SectionedListPanel | |
SectionedListPanel.CollapserWidth | |
TextEntry | |
TextEntry.CursorColor | |
GamesList | |
GamesList.InstalledAppColor | |
GamesList.NotInstalledAppColor | |
GamesList.ReadyStatusColor | |
GamesList.UpdatingStatusColor | |
GamesList.NotInstalledStatusColor |
Controls
A control documented specifies a set of Override Keys in their section listing all of the functioning KeyValues entries for a specific control. What Override Keys do is replace the Base Keys when a specific condition is met. Once the condition is destroyed, the control converts back to the Base Keys.
BaseControls
- Panel
- Button
- GripPanel
- CheckButton
- CheckButtonList
- ComboBox
- ComboBoxButton
- ContextLabel
- Divider
- Frame
- FrameButton
- FrameSystemButton
- FrameTitle
- FrameBRGripPanel
- GraphPanel
- HTML
- HTMLInterior
- icon_button_news
- icon_button_friends
- icon_button_servers
- icon_button_settings
- icon_button_support
- icon_button_MiniMeShrink
- Label
- LabelDull
- LabelBright
- ListPanel
- ListPanelInterior
- ListPanelColumnHeader
- ListPanelDragger
- ListViewPanel
- Menu
- MenuBar
- MenuBarItem
- MenuItem
- MenuSeparator
- PanelListPanel
- PanelHorizListPanel
- PageTab
- PropertyPage
- SteamGamesPage
- PropertySheet
- ProgressBar
- RadioButton
- RichText
- RichTextInterior
- ScrollBarSlider
- ScrollBarButton
- SectionedListPanel
- SectionedListPanelInterior
- SectionedListPanelItem
- SectionedListPanelHeader
- SectionedListPanelCollapser
- Slider
- SplitterHandle
- TextEntry
- ToggleButton
- TooltipWindow
- TreeView
- TreeNode
- TreeViewSubPanel
- TreeNodeText
- URLLabel
- WizardPanel
- WizardSubPanel
Panel
Here is a set of Base Keys which help define what controls look like. These keys are inherited by all controls but are only used by some.
Key name | Description |
---|---|
textcolor | |
selectedtextcolor | |
shadowtextcolor | |
bgcolor | |
selectedbgcolor | |
appearance | Border must be defined as a subkey in the Borders KeyValues |
image | TGA image to be drawn on this control |
Button
- mousedown
- keyfocus
- mouseover
- disabled
- keyfocus_mouseover
- defaultbutton
- defaultbutton_mouseover
CheckButton
- mousedown
- selected
- selected_mouseover
- selected_mousedown
- selected_keyfocus
- selected_keyfocus_mouseover
- keyfocus
- keyfocus_mouseover
- disabled
- selected_disabled
ComboBox
- mouseover
- mousedown
- keyfocus
- disabled
ComboBoxButton
- mouseover
- disabled
FrameButton
- mousedown
- keyfocus
- outoffocus
FrameTitle
- outoffocus
FrameBRGripPanel
- mouseover
- mousedown
- disabled
HTMLInterior
- scrollbar_visible
ListPanelInterior
- scrollbar_visible
MenuBarItem
- mouseover
- mousedown
- selected
MenuItem
- mouseover
- disabled
PageTab
- mousedown
- active
- keyfocus
- keyfocus_mouseover
PropertySheet
- topleft
- topright
RadioButton
- mousedown
- selected
- selected_mouseover
- selected_mousedown
- selected_keyfocus
- selected_keyfocus_mouseover
- keyfocus
- keyfocus_mouseover
- disabled
RichTextInterior
- scrollbar_visible
ScrollBarSlider
- slider
- slider_horiz
ScrollBarButton
- mouseover
- mousedown
SectionedListPanelInterior
- scrollbar_visible
SectionedListPanelItem
- selected
Slider
- disabled
TextEntry
- disabled
ToggleButton
- mousedown
- mouseover
- keyfocus
- selected
- selected_mouseover
- selected_mousedown
- selected_keyfocus
- selected_keyfocus_mouseover
- disabled
WizardSubPanelControls
This Controls section defines property overrides for BaseControls on controls contained inside a wizard.
PropertyPageControls
This Controls section defines property overrides for BaseControls on controls contained inside a PropertyPage.
LayoutTemplates
This describes the default layouts for controls that create and control their own children works just like a normal settings .res file, except only positioning attributes are recognized. Below is a sectioned list of specific control children.
Here's a list of settings that can be added:
- xpos
- ypos
- wide
- tall
- AutoResize
- PinCorner
Frame
- frame_menu
- frame_title
- frame_captiongrip
- frame_minimize
- frame_close
- frame_brGrip
PropertyDialog
- sheet
- ApplyButton
- CancelButton
- OKButton
WizardPanel
- subpanel
- PrevButton
- NextButton
- CancelButton
- FinishButton
Fonts
This section describes the syntax of a font declaration.
"A" { "1" { "name" "B" "tall" "C" "weight" "D" "underline" "E" "antialias" "F" "symbol" "G" } }
- A
- This is what controls refer to as their font. If you set a Control's font setting to this, it will use the information in this KeyValues set to determine how text will appear.
- B
- This is the actual name of the font contained in a ttf file. Custom fonts go in the resource folder for the skin.
- C
- This is the height of the font in pixels. The width will keep the same ratio.
- D
- The weight is how bold the font will appear.
- E
- Draw a line under all text including spaces.
- F
- If set, text edges will be anti-aliased.
- G
- Set this if the font specified is a symbol font (e.g. Marlett).
Appearances
All borders referenced by the Controls definitions and Controls settings should be defined in this file. A border can be defined as an alias of another border by having the keyname being the border and the value being the other border.
It is necessary to define borders using the following syntax:
A { "inset" "B" "backgroundtype" "C" "corner_rounding" "D" render { E } render_bg { E } }
- A
- This is the name of the border being defined.
- B
- This is the margins of the control in format
"Left Top Right Bottom"
. - C
- The background type can be 0 for filled background, 1 for textured background, and 2 for solid background with smooth corners.
- D
- This is the aliased corner rounding size in pixels.
- E
- See below. The difference between render and render_bg is the order.
render_bg
is drawn before the control contents, whilerender
is drawn after.
Oldschool Borders
This type of border definition was supported in the original VGUI2 module.
"inset" "A" Right { B } Left { B } Bottom { B } Top { B }
- A
- This is the inset of contents on this control in the format
"x0 y0 x1 y1"
- B
- In this area goes the following KeyValues set:
"1" { "color" "C" "offset" "D" }
- C
- This is the reference to a color defined in the Colors section.
- D
- This is the offset from the edge that the parent KeyValues corresponds to. The format is
x y
Draw Procedures
To define a draw procedure, the keyname can be anything, such as "0"
. For the value, the following function calls are allowed:
- image
- fill
- gradient
- corner (No longer functions)
- dashedrect
The draw procedures allow you to set a location in the bordered Control using the x0, x1, y0, and y1 variables.
image
Syntax: "image( Left, Top, Right, Bottom, TGA )"
The TGA parameter should specify a TGA relative to the Steam folder or skins folder without the extension appended.
Example: "image( x0 + 4, y0 + 4, x0 + 20, y0 + 20, resource/borders/ScrollButton_mousedown )"
fill
Syntax: "fill( Left, Top, Right, Bottom, Color )"
Example: "fill( x0 + 1, y0 + 1, x1 - 2, y1 - 1, ClayBG )"
gradient
Syntax: "gradient( Left, Top, Right, Bottom, TopColor, BottomColor )"
Example: "gradient( x0, y1 - 40, x1, y1, LightClayBG, ClaySheetBottom )"
corner
Syntax: "corner( Left, Top, Right, Bottom, Color )"
dashedrect
Syntax: "dashedrect( Left, Top, Right, Bottom, Color )"
Example: "dashedrect( x0 + 3, y0 + 3, x1 - 4, y1 - 2, BorderSelection )"