|
|
| (61 intermediate revisions by 15 users not shown) |
| 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.
| | {{No longer relevant}}{{toc-right}} |
| __TOC__
| |
| The following is documentation on the structure of <code>sourcescheme.res</code>.
| |
| =Scheme=
| |
| ==Colors==
| |
| In this section is where all of the colors used by the Controls and drawing are defined.
| |
| ==BaseSettings==
| |
| {| | |
| ! 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===
| | Over the years Steam has been slowly replacing aspects of the Steam Client from VGUI to a web-based framework called [https://bitbucket.org/chromiumembedded/cef Chromium Embedded Framework] |
| |-
| |
| | 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==
| | On April 27th, 2023, with the Steam client now being rendered using CEF, Steam skins '''completely lost support''' and only work through community based patching methods. |
| 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 ||
| |
| |-
| |
| | 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==== | | ==History== |
| * mousedown
| | Removal of skin support for the Friends List on [https://steamcommunity.com/app/593110/eventcomments/1633040337767599626/ July 24th 2018] |
| * keyfocus
| |
| * disabled
| |
| * keyfocus_mouseover
| |
| * defaultbutton
| |
| * defaultbutton_mouseover
| |
|
| |
|
| ====CheckButton====
| | Removal of skin support for the Library on [https://steamcommunity.com/app/593110/eventcomments/1640926712932113346/ October 30th 2019] |
| * mousedown
| |
| * selected
| |
| * selected_mouseover
| |
| * selected_mousedown
| |
| * selected_keyfocus
| |
| * selected_keyfocus_mouseover
| |
| * keyfocus
| |
| * keyfocus_mouseover
| |
| * disabled
| |
| * selected_disabled
| |
|
| |
|
| ====ComboBox====
| | Removal of skin support for the main window frame and all additional windows in Steam Beta on [https://steamcommunity.com/groups/SteamClientBeta/eventcomments/3826413850812502632/ April 27th 2023] |
| * mouseover
| |
| * mousedown
| |
| * keyfocus
| |
| * disabled
| |
|
| |
|
| ====ComboBoxButton====
| | The above update was later pushed to all users since [https://steamcommunity.com/app/593110/eventcomments/5514142341086067567/ June 15, 2023], completely removing skin support for all common windows. |
| * mouseover
| |
| * disabled
| |
|
| |
|
| ====FrameButton==== | | == Can I Still Install themes? == |
| * mousedown
| | Yes, Steam themes still exist! And the community is still thriving! |
| * keyfocus
| |
| * outoffocus
| |
|
| |
|
| ====FrameTitle==== | | == How to install themes in {{CURRENTYEAR}}== |
| * outoffocus
| |
|
| |
|
| ====FrameBRGripPanel====
| | As the official skin support (for [[VGUI]]) has been removed, with the new CEF-based UI not providing any official way of changing skins, it was unofficially replaced by '''[https://steambrew.app Millennium for Steam]''' '''For Windows 10+'''<br> |
| * mouseover
| | Millennium is an open source patcher that allows skins/themes after April 27th 2023. [https://github.com/ShadowMonster99/millennium-steam-patcher view source] |
| * mousedown
| |
| * disabled
| |
|
| |
|
| ====HTMLInterior==== | | [[File:SteamTheme2024.png|thumb|left|Millennium for Steam with a dark version of the Steam Client loaded [https://millennium.web.app/theme?id=F8h9ZhwOdoNygNcAfjIZ from here] ]] |
| * scrollbar_visible
| | {{clr}} |
|
| |
|
| ====ListPanelInterior==== | | ==Setting Up== |
| * scrollbar_visible
| | Refer to this page [https://github.com/ShadowMonster99/millennium-steam-patcher/?tab=readme-ov-file#installation Installation Guide] |
|
| |
|
| ====MenuBarItem==== | | == Finding Themes == |
| * mouseover
| | The main sources for up-to-date themes are found on this website |
| * mousedown
| | * https://steambrew.app/themes |
| * selected | |
|
| |
|
| ====MenuItem==== | | == Discord Community == |
| * mouseover
| | * https://steambrew.app/discord |
| * 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.
| |
|
| |
| ===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]] |
