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

Note:xpos and ypos allow their value to have r prepended to them. With an r, the value will come from the opposite side (e.g. xpos will be set from the right, not left).

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, while render 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

Note:This procedure no longer works.

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 )"