Steam Skins: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
The most important thing about skinning in the new Steam is the change of the skinning method. Instead of using <code>TrackerScheme.res</code>, <code>steamscheme.res</code> is now used. The <code>steamscheme.res</code> file is located in the <code>resource</code> folder in the Steam root folder. It should be copied to <code>skins\''YourSkinName''\resource</code>. Like everything else, images are uncompressed 24-bit [[TGA]] files.
The most important thing about skinning in the new Steam is the change of the skinning method. Instead of using <code>TrackerScheme.res</code>, <code>steamscheme.res</code> is now used. The <code>steamscheme.res</code> file is located in the <code>resource</code> folder in the Steam root folder. It should be copied to <code>skins\''YourSkinName''\resource</code>. Like everything else, images are uncompressed 24-bit [[TGA]] files.
__TOC__
The following is documentation on the structure of <code>steamscheme.res</code>.
The following is documentation on the structure of <code>sourcescheme.res</code>.
* [[Steamscheme.res file structure]] &mdash; Help on creating your own scheme.
=Scheme=
* [[Steam Resource Mapping]] &mdash; list of res files and accompanying images of them.
==Colors==
In this section is where all of the colors used by the Controls and drawing are defined.
 
'''Syntax:''' <code>"colorname" "r g b a"</code>
 
'''Example:''' <code>"GrayBG" "73 78 73 255"</code>
 
==BaseSettings==
Below are all keyvalue definitions that are utilized by controls.
{|style="width:100%;"
! Key name !! Description
|-
|colspan="2"|
===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
|-
|colspan="2"|
===CheckButton===
|-
| CheckButton.BgColor ||
|-
| CheckButton.Border1 || Left checkbutton border
|-
| CheckButton.Border2 || Right checkbutton border
|-
| CheckButton.Check || Color of the check itself
|-
|colspan="2"|
===DragDrop===
|-
| DragDrop.DragFrame ||
|-
| DragDrop.DropFrame ||
|-
|colspan="2"|
===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
|-
|colspan="2"|
===ListPanel===
|-
| ListPanel.TextColor ||
|-
| ListPanel.BgColor ||
|-
| ListPanel.SelectedTextColor ||
|-
| ListPanel.SelectedBgColor ||
|-
| ListPanel.SelectedOutOfFocusBgColor ||
|-
| ListPanel.DisabledTextColor ||
|-
| ListPanel.DisabledSelectedTextColor ||
|-
| ListPanel.EmptyListInfoTextColor ||
|-
| ListPanel.RowHeight ||
|-
| ListPanel.PerPixelScrolling ||
|-
|colspan="2"|
===Menu===
|-
| Menu.TextInset ||
|-
|colspan="2"|
===Panel===
|-
| Panel.FgColor ||
|-
| Panel.BgColor ||
|-
|colspan="2"|
===PropertySheet===
|-
| PropertySheet.TransitionEffectTime || Time to change from one tab to another
|-
| PropertySheet.TabGap ||
|-
|colspan="2"|
===RichText===
|-
| RichText.InsetX || Margin (x)
|-
| RichText.InsetY || Margin (y)
|-
| RichText.TextColor ||
|-
| RichText.BgColor ||
|-
| RichText.SelectedTextColor ||
|-
| RichText.SelectedBgColor ||
|-
|colspan="2"|
 
===ScrollBar===
|-
| ScrollBar.Wide ||
|-
|colspan="2"|
===SectionedListPanel===
|-
| SectionedListPanel.CollapserWidth ||
|-
|colspan="2"|
===TextEntry===
|-
| TextEntry.CursorColor ||
|-
|colspan="2"|
===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_2|Panel]]
* [[#Button|Button]]
* GripPanel
* [[#CheckButton_2|CheckButton]]
* CheckButtonList
* [[#ComboBox|ComboBox]]
* [[#ComboBoxButton|ComboBoxButton]]
* ContextLabel
* Divider
* Frame
* [[#FrameButton|FrameButton]]
* FrameSystemButton
* [[#FrameTitle|FrameTitle]]
* [[#FrameBRGripPanel|FrameBRGripPanel]]
* GraphPanel
* HTML
* [[#HTMLInterior|HTMLInterior]]
* [[#Button|icon_button_news]]
* [[#Button|icon_button_friends]]
* [[#Button|icon_button_servers]]
* [[#Button|icon_button_settings]]
* [[#Button|icon_button_support]]
* [[#Button|icon_button_MiniMeShrink]]
* Label
* LabelDull
* LabelBright
* ListPanel
* [[#ListPanelInterior|ListPanelInterior]]
* ListPanelColumnHeader
* ListViewPanel
* Menu
* MenuBar
* [[#MenuBarItem|MenuBarItem]]
* [[#MenuItem|MenuItem]]
* MenuSeparator
* PanelListPanel
* PanelHorizListPanel
* [[#PageTab|PageTab]]
* PropertyPage
* SteamGamesPage
* PropertySheet
* ProgressBar
* [[#RadioButton|RadioButton]]
* RichText
* [[#RichTextInterior|RichTextInterior]]
* [[#ScrollBarSlider|ScrollBarSlider]]
* [[#ScrollBarButton|ScrollBarButton]]
* SectionedListPanel
* [[#SectionedListPanelInterior|SectionedListPanelInterior]]
* [[#SectionedListPanelItem|SectionedListPanelItem]]
* SectionedListPanelHeader
* SectionedListPanelCollapser
* [[#Slider|Slider]]
* SplitterHandle
* [[#TextEntry_2|TextEntry]]
* [[#ToggleButton|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_2|Borders]] KeyValues
|-
| image || TGA image to be drawn on this control
|}
 
====Button====
* mousedown
* keyfocus
* 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
 
====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.
;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).
 
==Borders==
All borderes 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 <code>"Left Top Right Bottom"</code>.
;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 [[#Draw Procedures|below]].  The difference between render and render_bg is the order.  <code>render_bg</code> is drawn before the control contents, while <code>render</code> is drawn after.
 
===Draw Procedures===
To define a draw procedure, the keyname must be a filler, such as <code>"0"</code>.  For the value, the following function calls are allowed:
* image
* fill
* gradient
* corner
* dashedrect
The draw procedures allow you to set a location in the bordered Control using the x0, x1, y0, and y1 variables.
====image====
'''Syntax:''' <code>"image( Left, Top, Right, Bottom, [[TGA]] )"</code>
 
The TGA parameter should specify a TGA relative to the Steam folder or skins folder without the extension appended.
 
'''Example:''' <code>"image( x0 + 4, y0 + 4, x0 + 20, y0 + 20, resource/borders/ScrollButton_mousedown )"</code>
 
====fill====
'''Syntax:''' <code>"fill( Left, Top, Right, Bottom, Color )"</code>
 
'''Example:''' <code>"fill( x0 + 1, y0 + 1, x1 - 2, y1 - 1, ClayBG )"</code>
====gradient====
'''Syntax:''' <code>"gradient( Left, Top, Right, Bottom, TopColor, BottomColor )"</code>
 
'''Example:''' <code>"gradient( x0, y1 - 40, x1, y1, LightClayBG, ClaySheetBottom )"</code>
====corner====
'''Syntax:''' <code>"corner( Left, Top, Right, Bottom, Color )"</code>
 
{{note|The direction the corner is drawn depends on the direction the position values go from Left to Right and Top to Bottom.}}
 
'''Example:''' <code>"corner( x1 - 3, y1 - 3, x1, y1, DarkClayBG )"</code>
====dashedrect====
'''Syntax:''' <code>"dashedrect( Left, Top, Right, Bottom, Color )"</code>
 
'''Example:''' <code>"dashedrect( x0 + 3, y0 + 3, x1 - 4, y1 - 2, BorderSelection )"</code>
[[Category:Steam]]
[[Category:Steam]]
=Resource=
This section will focus on changing the specific dialog settings to have the ability for more customization.
==Source Cited==
This section will present visualizations of specific res files which are contained in the winui.[[GCF|gcf]] file.
===Steam\cached\aboutdialog.res===
[[Image:Res...Steam..cached..aboutdialog.jpg]]
===Steam\cached\BackupCompletionPage.res===
[[Image:Res...Steam..cached..BackupCompletionPage.jpg]]
===Steam\cached\BackupCopyFilesPage.res===
[[Image:Res...Steam..cached..BackupCopyFilesPage.jpg]]
===Steam\cached\BackupSelectDirectoryPage.res===
[[Image:Res...Steam..cached..BackupSelectDirectoryPage.jpg]]
===Steam\cached\BackupSelectGamesPage.res===
[[Image:Res...Steam..cached..BackupSelectGamesPage.jpg]]
===Steam\cached\BackupSelectOptionsPage.res===
[[Image:Res...Steam..cached..BackupSelectOptionsPage.jpg]]
===Steam\cached\BandwidthUsageDialog.res===
[[Image:Res...Steam..cached..BandwidthUsageDialog.jpg]]
===Steam\cached\gamespage.res===
[[Image:Res...Steam..cached..gamespage.jpg]]
[[Image:Res...Steam..cached..gamespage_2.jpg]]
===Steam\cached\registersubintro.res===
[[Image:Res...Steam..cached..registersubintro.jpg]]
===Steam\cached\SteamRootDialog.res===
[[Image:Res...Steam..cached..SteamRootDialog.jpg]]
===Steam\cached\steamrootdialog_small.res===
[[Image:Res...Steam..cached..steamrootdialog_small.jpg]]
===Steam\cached\storepage.res===
[[Image:Res...Steam..cached..storepage.jpg]]
===Public\SteamLoginDialog.res===
[[Image:Res...Public..SteamLoginDialog.jpg]]
===Public\SubForgotPasswordAccountName.res===
[[Image:Res...Public..SubForgotPasswordAccountName.jpg]]
===Public\SubForgotPasswordCDKey.res===
[[Image:Res...Public..SubForgotPasswordCDKey.jpg]]
===Public\SubForgotPasswordEmailAddress.res===
[[Image:Res...Public..SubForgotPasswordEmailAddress.jpg]]
===Public\SubForgotPasswordOther.res===
[[Image:Res...Public..SubForgotPasswordOther.jpg]]
===Public\SubForgotPasswordResetType.res===
[[Image:Res...Public..SubForgotPasswordResetType.jpg]]
===Public\SubForgotPasswordUserName.res===
[[Image:Res...Public..SubForgotPasswordUserName.jpg]]
===Public\SubPanelWelcomeCreateNewAccountAccountName.res===
[[Image:Res...Public..SubPanelWelcomeCreateNewAccountAccountName.jpg]]
===Public\SubPanelWelcomeCreateNewAccountEmail.res===
[[Image:Res...Public..SubPanelWelcomeCreateNewAccountEmail.jpg]]
===Public\SubPanelWelcomeCreateNewAccountMultiple.res===
[[Image:Res...Public..SubPanelWelcomeCreateNewAccountMultiple.jpg]]

Revision as of 21:59, 6 February 2006

The most important thing about skinning in the new Steam is the change of the skinning method. Instead of using TrackerScheme.res, steamscheme.res is now used. The steamscheme.res file is located in the resource folder in the Steam root folder. It should be copied to skins\YourSkinName\resource. Like everything else, images are uncompressed 24-bit TGA files. The following is documentation on the structure of steamscheme.res.

Retrieved from "https://developer.valvesoftware.com/w/index.php?title=Steam_Skins&oldid=23363"