(Guide) How To Make A Steam Skin PDF

[Guide] How to make a steam skin
Contents:
1. Introduction (page 2)
2. Getting started FAQ (page 3)
3. Advanced FAQ (page 4)
4. Steam developer mode (page 9)
4.1. Making a batch file (page 11)
5. Use of paint.net (page 13)
6. Making of Rider theme skin (page 16)
7. Using already made skin, to make your own AKA TL;DR (page 95)
8. Tips and tricks (page 97)
9. Known bugs/errors (page 100)
P age |2
1.
Introduction
This guide was made to teach you, how to make steam skins. It might
not teach you how to fully edit absolutely every aspect of the skin, but it
will help you get started and, at the end, youll be able to make a skin
with: most colors changed, font of your choice, image(s) of your choice.
P age |3
2.
Getting started FAQ
Q: What do I need to get started?

A: First, Id like to recommend either making a backup of the files
which you are going to change (most likely steam.styles) or creating
your own folder in steam/skins directory, named myskin, for
example.
After that, copy the resource and graphics folders into myskin.
Then open steam and in the settings tab, select interface, then your skin
(myskin). Restart steam.
After all that, you need to either choose colors, preferably 2-3, max, or
choose a picture which has those 2-3 dominant colors. Choose the
picture only if youre planning of using it in your skin later. If you
would like to keep the original steam logo, then just pick the colors.
Q: Its done, now what?
A: You will probably want to make a texture, fitting for your steam
skin. I am talking about clienttexture2.tga, found in steam graphics
folder. After youre done, or if you like the original texture, skip to
either advanced faq or to section 6.
P age |4
3.
Advanced FAQ
Q: So I chose the colors/picture and came here. Now what?

A: Good, now you need to define those colors. In RGB. (If you chose a
picture, then that picture, of yours, surely has 2-3 dominant colors. Pick
them).
Q: How do I do that? How do I define those colors.
A: First, steam has, some of them, defined already. Lets take a look at
steam.styles file (open it with notepad):
steam.styles
{
colors
{
// colors section can include colors in "R G B A" form, or references to already defined
colors;
// it can also include just general settings controls can pull from for extra customization
black="0 0 0 255"
almostBlack="23 22 20 255"
white="255 255 0 255"
grey="158 153 149 255"
none="0 0 0 0"
yellow="255 255 0 255"
offwhite="166 164 159 255"
Thats a piece of code located at the very top of the steam.styles file.
You, of course, have noticed that by now.
As you can see, its pretty easy to define your own. Lets look at the
given parameters of one of the steams defined colors:
let me define what is what:

almostBlack variable with a name of your choice. Few examples of
not recommended variable names: red*^, color!5, sadasd* etc. Some
examples of good variable names: color5, mycolor, my256, dog17 etc.
Also, its important not to have 2 variables with the same name,
regardless if they have different values.
P age |5
=23 22 20 255 the definition of a variable. In this case, the RGB

and transparency values
Take a look at this and compare the two definitions:
=R G B T
The first number defines the value of red color, 2nd green, 3rd blue, t transparency.
All of the colors must have 4 numbers defining them and they must be
separated by a single space. No exceptions.
Furthermore, the first 3 numbers define the color itself, while the last
number defines the colors transparency. Each of the 4 numbers must not
exceed a maximum value of 255 and the lowest value of 0. Other than
that, theres no restrictions. Its wise to keep transparency at 255 most
of the time.
Q: Okay, lets say I understand that. Now what?
A: Make a comment (yes, a comment) and, right after, define your
colors. It would be wise to make this comment just below the defined
colors. The code should look like this, if done properly:
steam.styles
{
colors
{
// colors section can include colors in "R G B A" form, or references to already defined
colors;
// it can also include just general settings controls can pull from for extra customization
black="0 0 0 255"
white="255 255 0 255"
grey="158 153 149 255"
none="0 0 0 0"
yellow="255 255 0 255"
offwhite="166 164 159 255"
dullgreen="216 222 211 255"
maize="203 191 87 255"
red="255 51 51 255"
darkblue="0 85 128 255"
blue="0 133 199 255"
P age |6
darkred="128 0 0 255"
darkpurple="64 0 64 255"
//my colors (this is a comment)
pureyellow="255 255 0 255"
pureblue="0 0 255 255"
puregreen="0 255 0 255"
darkyellow="220 220 0 255"
darkeryellow="190 190 0 255"
darkestyellow="160 160 0 255"
darkerblue="0 0 150 255"
a few things to take a notice of:

- a comment always starts with two slashes, after that write anything you want,
for example: //my comment.
- a comment is going to be ignored when steam reads the steam.styles file, its
only purpose is to make bookmarks.
- you can make as many comments as you want.
- colors (any kind of variables, their definitions and/or text, anything and
everything) will be ignored after //.
- its wise to define every color in steam.styles file, so that, if you dont like
something, you could easily find it and tweak it to your liking.
Q: Okay, done. Whats the next step?

A: You start applying your colors.
Q: Okay ... Thats it?
A: Yes. Remember, I mentioned, how to define variables and gave you
an example? What do you think, would happen if you would change the
definitions of other variables, which, makers of original steam skin,
have already defined? Thats what you are going to be doing here.
Thats called making your own skin. You will apply your own colors
(write your own variable names on top of steam original ones past =).
Q: I dont understand a single thing you just said. Please, explain
better.
A: The following example, with images, will make you understand
everything easily:
Do the following:
1. Open steam.styles with notepad.
2. Hold ctrl and press F. This should now bring up the find menu.
P age |7
3. Paste the following into the bar:

Text="209 207 205 255"
4. After the = write your own colors name, which you have defined,
for example:
Text=mycolor1
5. Save the file.
6. If done properly and you have the skin selected, then restart steam to
see the changes (yes theres no other way to see the changes).
7. In case youve missed something (this is a crucial part so I will
explain more):
This is how the default steam skin looks (you know by heart right
now, but you need to see the changes):
After writing this (color red is already defined by default):

Text=red
P age |8
And saving the steam.styles file, we get this result:
Some colors appear to be changed already, from light gray to red.

Thats all it takes.
Q: Anything else? By the way, how would I know where and what
should I change?
A: Usually, I start working on the texture (clienttexture2.tga in
graphics folder) before I start defining the colors in steam.styles file.
As for the second question, you either need to use the steam
developers mode (see next section) or follow the steps of my guide at
section 6.
P age |9
4.
Steam developer mode
The only use of steam developer mode, is to find out which file holds
a variable which you want to change, and in most cases, which
variable it is. Unfortunately, it is not capable of telling you
everything, but it certainly helps you get started.
I wont give examples of how it fails, Ill just show you how to use
it.
So, assuming you are running steam in dev mode, press F6. This
window should, then, appear:
Pressing F6 again, will make it go away.

To make use of it, lets pretend that you want to change the view
friends button (its colors or whatever):
P a g e | 10
Now, what you do next, is simply click on that button. If the VGUI
editor (that window which appears when you press F6) was present
(visible) during this, then its contents shouldve changed and should
look like this (regardless of the skin which you are using):
P.S. Clicking back on VGUI editor window will not change its contents.
Lets discuss whats on the left first:
Thats the list of the variables. Only the first 2 matter, though. As in,
only if you change the first two, will the color/etc of the view friends
button change. So what you do, is ignore the rest and dont change
them.
On the right:
The files, which contain the variable. Meaning, if you type

view_friends in the find bar, while having those files open, youll
be able to find it in there. In other words, the variables view_friends
and view_friends:hover are located in steamrootdialog.layout file.
If you click on one of them in the VGUI editor, itll automatically
open the file (in our current case either the steamrootdialog.layout
or steam.styles). Unfortunately, it will not open the file, located in
P a g e | 11
your skin folder, instead, it will open the original (default one),
which comes with steam install.
In other words, youll have to open the corresponding files yourself
as these are not the ones which you want to be changing, or think that
youll be changing.
Theres still some use for it, though. Lets pretend that you forgot
which color you used here:
Press F6 and click on it. If done correctly:
Then look at the contents of VGUI editor:
Its safe to say that the color used there is defined as detailbg1.
Unfortunately, this is all the use of the dev mode. Helps, but not
nearly enough.
4.1. Making a batch file

This will make running steam in developers mode, very easy. Just do
the following:
1. Open notepad.
2. Find out where the file steam.exe is located (we will need the full
link). Copy the full link. In my case its:
D:\programos\steam\steam.exe
P a g e | 12
3. Now, simply write this:

start yourdirectory dev
In my case:
start D:\programos\steam\steam.exe dev
4. Save the file as txt.
5. Change the ending of the file to .bat. Name it steam_dev_mode or
whatever else.
6. To test it, first, turn off steam, then double click the .bat file.
7. If done correctly, everything about your steam user interface will
remain the same, except theres going to be a new tab, called
console:
8. Thats it. You can continue skinning/playing games, etc. Nothing

will change except that you can now use F6 to bring up the VGUI
editor. If you dont like it for some reason, then you can turn off
steam and run it from a regular shortcut. Everything will be back
to what it once was, without the console and without the
functionality of F6 button.
P a g e | 13
5.
Use of paint.net
Paint.net is a freeware image editing program. More info about it

(download links etc) can be found here: http://www.getpaint.net/.
This program allows you to pick colors very easily and write the RGB
values, needed in steam.styles.
Simply run it and look at the colors window (if its not visible, press F8,
to make it appear):
Nothing special, until you press more button:
P a g e | 14
Now, what you see on the upper left corner is black color (no ****, eh?)
and on the right, all the needed RGB numbers written for you.
Transparency is also written on the lowest right corner.
Lets pretend that you need 3 shades of purple color. Dark, medium,
bright. Name your variables/colors in steam.styles first:
Darkpurple=
Mediumpurple=
Brightpurple=
Next, get the values by using the program:
As we can see, R=87, G=0, B=127, T=255.

So the first color/variable can already be defined:
Darkpurple=87 0 127 255
I suggest choosing the remaining ones, not by clicking on that colourful
circle, but sliding this one (in our case, to the right):
P a g e | 15
So as you slide it to the sides, the RGB values change, and so does the
color.
This way, we can easily define our colors.
P a g e | 16
6.
-
Making of Rider theme skin
Text in light blue is the name of the file where the change should take place, in other words,
where the variable should be looked for/defined in etc
Text in orange is the variable which you must find in said file
Text in bold marks the changes which were/are made
1. At first its wise to decide on which colors you want to use on your
skin.
You will need RGB values of those colors. Use this website to get
them:
http://www.tayloredmktg.com/rgb/
Or just google instead. Or use paint.net.
I pick my colors as I choose a proper render. This is what Im
talking about:
Ill surely use pink and purple colors.

P.S. If you like the original steam logo and just care about
changing the colors/font, skip to step 3.
P a g e | 17
Ill replace piston.tga file with the render above (maintaining the
same height/width as the original steam logo).
2. Next Ill be making a texture, to fit with the above render. The file is
called clienttexture2.tga. Ill be making a replacement for it.
Anyway, since its done:
We can now finally start making the skin.

3. Lets start by choosing the colors for text and overall look of the
client (steam.styles).
Here are the colors that Ive chosen so far:
txtpink="196 84 140 255"
txtpinkbright="229 103 170 255"
txtpinkdark="168 72 120 255"
txtbackground="188 0 100 255"
dialogpink1="73 5 64 255"
dialogpink2="114 8 104 255"
ultrapink1="255 0 135 255"
ultrapink2="255 114 189 255"
txtpink colors will be the ones for text, while dialogpink for the
client. Txtpink will be regular txt colors, txtpinkbright color of
highlighted text, txtpinkdark color of disabled text,
txtbackground background color of selected text, dialogpink1/2
colors of the client.
About Ultrapink1/2 colors: I will change white color into one of
these. I chose ultrapink2, cuz it looked better. Thing is, writing
white=ultrapink2 will not work. Instead, we must put the same
numbers (RGB and transparency) there. White color is used for
highlighted text.
P a g e | 18
Now Ill apply them, like this (notice that white color will no longer
be white):
white="255 114 189 255"
Text=txtpink
Text2=txtpink
TextDisabled=txtpinkdark
TextHover=txtpinkbright
TextSelected=txtpinkbright
TextentrySelected=white // color of any selected text
TextSelectedBG=txtbackground
Label=text
Label2=text
LabelDisabled=textdisabled
LabelFocus=txtpinkbright
DialogBG=dialogpink1
PropertySheetBG=dialogpink2
Thats about it, lets see the results:
And:
P a g e | 19
4. To change the font, just find this line:

basefont="Arial"
and change it with your preferred font. For example, you want to use
Tahoma font, then you write this:
basefont=Tahoma
Restart steam to see the results (after saving steam.styles file).
P a g e | 20
5. Next, Id like to change the colors of pop up menu (youll understand

what Im talking about from the screenshot). To do that, I come up
with new colors and define them again:
menucolor="96 0 85 255"
menuborder="188 0 103 255"
menuselected="133 0 115 255"
After that, I apply them:

MenuBG1=menucolor //gradient colors
MenuBG2=menucolor
ButtonBorderDisabled=menuborder
ButtonBorderDisabled2=menuborder //cornering pixels
Focus=menuselected
Done. Lets see what weve got:
6. Now if you take a look at the skin, weve changed quite a lot of stuff.
Unfortunately, to fully change everything, this will take A LOT more
time. So lets fix a few things in this step instead of making further
adjustments.
First, Ill remove a part of that annoying bar, which, sort of, blocks
my render. The thing is, that we have to open a different file to do
that. Look for uinavigatorpanel.layout file in resource/layout
directory. Open it with notepad.
Search for grouper. The code looks like this:
P a g e | 21
grouper
{
bgcolor=none
render_bg
{
// background fill
0="fill( x0 + 1, y0 + 1, x0 + 276, y1 - 1, dialogbg )"
1="fill( x0 + 279, y0 + 1, x1 - 1, y1 - 1, dialogbg )"
// single pixel fills in the corners
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ClientBG )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ClientBG )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ClientBG )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ClientBG )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ClientBG )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ClientBG )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ClientBG )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ClientBG )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ClientBG )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ClientBG )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ClientBG )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ClientBG )"
Anyway, I could just delete the part of the code, which I dont need,
but Ill add comments instead, like this:
grouper
{
bgcolor=none
render_bg
{
// background fill
0="fill( x0 + 1, y0 + 1, x0 + 276, y1 - 1, dialogbg )"
//1="fill( x0 + 279, y0 + 1, x1 - 1, y1 - 1, dialogbg )"
//5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ClientBG )"
//6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ClientBG )"
//7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ClientBG )"
//8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ClientBG )"
//9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ClientBG )"
//10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ClientBG )"
//11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ClientBG )"
//12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ClientBG )"
//13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ClientBG )"
//14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ClientBG )"
//15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ClientBG )"
//16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ClientBG )"
And the result:
As you can see, the render is perfectly visible now.
P a g e | 22
Now I want the text above to be brighter as well as the search and
view. Open steam.styles again.
So, for text above, I do this:
"MenuBar MenuButton:frameFocus"
{
textcolor=text
}
I prefer it to be as bright as the rest of the text. If youd like your own
color, define and use it instead.
For the search text, open uinavigatorpanel.layout again. Look for
this, and change it:
LibrarySearch:empty
{
font-style=italic
textcolor=text
I prefer it to be as bright as other text, again.

Finally, for the view, open uinavigatorpanel.layout and look for this
piece of code:
NavLabelView [!$OSX]
{
font-family=basefont
font-size=14
font-weight=400
textcolor=text
font-style=uppercase
padding-left=0
}
NavLabelView [$OSX]
{
font-size=13
font-weight=400
textcolor=text
padding-left=0
P a g e | 23
Final result after these changes:
7. If we click on grid view, well see that theres one thing left
unchanged:
Lets fix that zoom and slider. Open uinavigatorpanel.layout again.

Look for this:
NavLabelZoom [!$OSX]
{
font-size=14
font-weight=400
textcolor=text
padding-right=5
}
NavLabelZoom [$OSX]
{
font-size=13
font-weight=400
textcolor=text
padding-right=5
}
As for the slider, look for this:
P a g e | 24
zoomslider
{
inset="0 -1 0 0"
textcolor=text
}
zoomslider:hover
{
inset="0 -1 0 0"
textcolor=text
}
Result:
(the text might not look bright enough, but thats not the point, now
that you know how to change the color)
8. Now lets fix the all games button.
Open uinavigatorpanel.layout again and look for this:
NavLabel2 [!$OSX]
{
font-size=14
font-weight=400
textcolor="TextentrySelected"
font-style="outerglow,uppercase"
font-outerglow-color="TextGlowHover"
font-outerglow-offset=1
font-outerglow-filtersize=3
}
NavLabel2 [$OSX]
{
font-size=13
font-weight=400
textcolor="TextentrySelected"
P a g e | 25
}
NavLabel2:hover
{
textcolor="white"
}
NavLabel2:selected
{
textcolor="white"
}
Ill be leaving the white color alone, Ill just delete the glow and
make the text less bright:
NavLabel2 [!$OSX]
{
font-size=14
font-weight=400
textcolor=text
font-style="uppercase"
}
NavLabel2 [$OSX]
{
font-size=13
font-weight=400
textcolor=text
}
NavLabel2:hover
{
textcolor="white"
}
NavLabel2:selected
{
textcolor="white"
}
The result:
P a g e | 26
When highlighted:
9. Now lets make the account text more visible, add a glow even.
Well need a new color for the glow, so Ill define it:
txtglow="198 0 53 255"
Now look for this:

URLLabelSimple
{
textcolor="labelfocus"
bgcolor="none"
font-size=14
font-weight=400
font-style=regular
}
URLLabelSimple [$OSX]
{
bgcolor="none"
font-size=13
font-weight=400
font-style=regular
}
URLLabelSimple:Hover
{
font-style=underline
textcolor="WHITE"
}
Ill change it into this:

URLLabelSimple
{
bgcolor="none"
P a g e | 27
font-outerglow-color=txtglow
font-size=16
font-weight=600
}
URLLabelSimple [$OSX]
{
bgcolor="none"
font-size=16
font-weight=600
}
URLLabelSimple:Hover
{
font-style="outerglow,uppercase,underline"
font-size=16
font-weight=600
}
Result:
Hover:
P a g e | 28
10.
This time lets change the button colors.
Ill define a few colors again:

btndark="130 0 75 255"
btnlight="188 0 110 255"
To do this, find and open gamespage_details_subheader.layout file

(resource/layout folder).
Since theres a lot of code, Ill just post the changes Ive made (in
bold):
DetailsButton
{
inset="-3 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render_bg
{
// background fill
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )"
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, text )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, text )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, text )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, text )" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
DetailsButton:hover
{
textcolor="TextHover"
bgcolor=none
render_bg
{
// background fill
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )"
P a g e | 29
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, TextHover )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, TextHover )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, TextHover )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, TextHover )" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, TextHover )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, TextHover )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, TextHover )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, TextHover )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, TextHover )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, TextHover )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, TextHover )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, TextHover )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, TextHover )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, TextHover )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, TextHover )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, TextHover )"
}
}
Now just do the same for the rest of the buttons:

DetailsLaunchButton
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play )"
}
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
DetailsLaunchButton:Hover
{
P a g e | 30
inset="23 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play_hover )"
}
render_bg
{
// background fill
// lines around
}
}
DetailsInstallButton
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render
{
1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_install)"
}
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
P a g e | 31
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"

10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
DetailsInstallButton:hover
{
inset="23 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_install_hover )"
}
render_bg
{
// background fill
// lines around
}
}
DetailsBuyButton
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render
{
1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_buy )"
}
render_bg
{
P a g e | 32
// background fill
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
DetailsBuyButton:hover
{
inset="23 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_buy_hover )"
}
render_bg
{
// background fill
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, texthover )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, texthover )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, texthover )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, texthover )" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, texthover )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, texthover )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, texthover )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, texthover )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, texthover )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, texthover )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, texthover )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, texthover )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, texthover )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, texthover )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, texthover )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, texthover )"
}
}
Result:
P a g e | 33
Hover:
Some notes regarding this:

- Weve changed the colors of just a few buttons, not all
- I didnt want gradient colors, so I simply chose to use one color,
you can define more colors and use them in the gradient
- Button borders have the same color as the text within, if you dont
like that, define your own colors and use them instead
11.
Time to change more buttons. This time, ones which are found
in the settings tab.
Ill define an extra color since these buttons do have more states:
btnactive="211 0 0 255"
This time, open steam.styles file again.

Look for this (the principle will remain the same and I will only
display the changes that Ive made due to too much code):
Button
{
font-size=13
font-weight=400
textcolor="Text"
bgcolor=none
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
P a g e | 34
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"

8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
"Page Button"
{
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
Button:hover
{
render_bg
{
// background fill
// background fill
// lines around
P a g e | 35

}
}
"Page Button:hover"
{
render_bg
{
// background fill
// lines around
}
}
Button:focus
{
render_bg
{
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )"
// lines around
}
}
P a g e | 36
"Page Button:focus"
{
render_bg
{
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, TextHover)" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, TextHover)" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, TextHover)" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, TextHover)" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, TextHover)"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, TextHover)"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, TextHover)"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, TextHover)"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, TextHover)"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, TextHover)"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, TextHover)"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, TextHover)"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, TextHover)"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, TextHover)"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, TextHover)"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, TextHover)"
}
}
Button:active // this is the left-mouse-currently-pressed state
{
render_bg
{
// background fill
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, DialogBG, propertysheetbg )"
// lines around
}
}
"Page Button:active"
{
render_bg
{
// background fill
P a g e | 37
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, DialogBG, propertysheetbg )"

// lines around
}
}
Button:selected
{
render_bg
{
// background fill
// lines around
}
}
"Page Button:selected"
{
render_bg
{
// background fill
// lines around
P a g e | 38

}
}
Lets look at the results and discuss:
- I mentioned that the buttons have more states, meaning, I needed

more colors, thats why I defined one more earlier
- If youre gonna use a different color for each state, itll get very
confusing
- If you understand a lot about steam skinning, by now, youll
notice that theres one button state which I havent touched. Its
the disabled state. This ones what Im talkin about:
The buttons displayed are in disabled state.

12.
Moving on, theres one button left unchanged in the settings tab.
This one:
P a g e | 39
Its referred to as ComboBox in the steam.styles file.

Ill just make the changes and display them:
ComboBox
{
inset="3 0 0 0"
textcolor="Text"
font-size="14"
selectedtextcolor="TextEntrySelected"
selectedbgcolor="TextSelectedBG"
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
ComboBox:hover
{
textcolor="Texthover"
selectedbgcolor="none"
selectedtextcolor="TextHover"
render_bg
{
// background fill
// lines around
P a g e | 40

}
}
ComboBox:focus
{
render_bg
{
// background fill
// lines around
}
}
ComboBox:focus:hover
{
render_bg
{
// background fill
// lines around
P a g e | 41

}
}
"Page ComboBox"
{
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
"Page ComboBox:focus"
{
render_bg
{
// background fill
// lines around
}
}
P a g e | 42
"Page ComboBox:hover"
{
render_bg
{
// background fill
// lines around
}
}
"Page ComboBox:focus:hover"
{
render_bg
{
// background fill
// lines around
}
}
Result:
P a g e | 43
13.
Time to change buttons like this one:
To do that, well have to open lots of different files.

Lets start with opening
gamespage_details_achievements_locked.layout
We change the code like this:
achievementlabelmore
{
inset="-3 0 0 0"
font-size=18
textcolor="Text"
render_bg
{
// background fill
0="gradient( x0 + 1, y0 + 2, x1 - 4, y1 - 1, dialogbg, propertysheetbg )"
// lines around
1="fill( x0 + 2, y0 + 1, x1 - 5, y0 + 2, text )" // top
P a g e | 44
3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, text )" // left

4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, text )" // right
5="fill( x0 + 1, y0 + 2, x0 + 2, y0 + 3, text )"
6="fill( x1 - 5, y0 + 2, x1 - 4, y0 + 3, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 5, y1 - 2, x1 - 4, y1 - 1, text )"
11="fill( x0, y0 + 2, x0 + 1, y0 + 3, text )"
12="fill( x1 - 4, y0 + 2, x1 - 3, y0 + 3, text )"
13="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
14="fill( x1 - 4, y1 - 2, x1 - 3, y1 - 1, text )"
15="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
16="fill( x1 - 5, y0 + 1, x1 - 4, y0 + 2, text )"
17="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
18="fill( x1 - 5, y1 - 1, x1 - 4, y1, text )"
}
}
achievementlabelmore:hover
{
inset="-3 0 0 0"
font-size=18
render_bg
{
// background fill
// lines around
1="fill( x0 + 2, y0 + 1, x1 - 5, y0 + 2, texthover )" // top
3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, texthover )" // left
4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, texthover )" // right
}
}
Pay attention to the underlined line, I didnt only change the color
there.
Next, open gamespage_details_friends_list.layout and do the same:
friendlabelmore
{
inset="-3 0 0 0"
font-size=18
P a g e | 45
textcolor="Text"
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 2, x0 + 2, y0 + 3, text )"
6="fill( x1 - 5, y0 + 2, x1 - 4, y0 + 3, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 5, y1 - 2, x1 - 4, y1 - 1, text )"
11="fill( x0, y0 + 2, x0 + 1, y0 + 3, text )"
12="fill( x1 - 4, y0 + 2, x1 - 3, y0 + 3, text )"
13="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
14="fill( x1 - 4, y1 - 2, x1 - 3, y1 - 1, text )"
15="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
16="fill( x1 - 5, y0 + 1, x1 - 4, y0 + 2, text )"
17="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
18="fill( x1 - 5, y1 - 1, x1 - 4, y1, text )"
}
}
friendlabelmore:hover
{
inset="-3 0 0 0"
font-size=18
render_bg
{
// background fill
// lines around
}
}
Now, open gamespage_details_screenshots_list.layout:
P a g e | 46
screenshotslabelmore
{
inset="-3 0 0 0"
font-size=18
textcolor="Text"
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 2, x0 + 2, y0 + 3, text )"
6="fill( x1 - 5, y0 + 2, x1 - 4, y0 + 3, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 5, y1 - 2, x1 - 4, y1 - 1, text )"
11="fill( x0, y0 + 2, x0 + 1, y0 + 3, text )"
12="fill( x1 - 4, y0 + 2, x1 - 3, y0 + 3, text )"
13="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
14="fill( x1 - 4, y1 - 2, x1 - 3, y1 - 1, text )"
15="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
16="fill( x1 - 5, y0 + 1, x1 - 4, y0 + 2, text )"
17="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
18="fill( x1 - 5, y1 - 1, x1 - 4, y1, text )"
}
}
screenshotslabelmore:hover
{
inset="-3 0 0 0"
font-size=18
render_bg
{
// background fill
// lines around
}
}
}
P a g e | 47
Result:
Hover:
14.
Lets finish changing the detailed view of our game library.
First, Ill define lots of colors:

detailtxt1="255 0 255 255"
detailtxt2="194 0 0 255"
detailtxt3="255 167 220 255"
detailtxt1trans="255 0 255 160"
detailbg1="127 0 110 130"
detailbg2="160 0 139 130"
As you can see detailtxt and detailtxttrans colors are the same, but
have different transparency.
Anyway, lets apply them (in steam.styles):
GameDetailsBlueTransparent=detailtxt1trans
GameDetailsGreenTransparent=detailtxt2trans
GameDetailsRedTransparent=detailtxt3trans
GameDetailsBlue=detailtxt1
GameDetailsGreen=detailtxt2
GameDetailsRed=detailtxt3
As for applying the remaining 2 colors, were gonna have to open

other files.
Lets start with gamespage_details_gametitleheader.layout:
P a g e | 48
CDetailsGameTitleHeaderPanel
{
bgcolor=detailbg1
}
Next, open gamespage_details_subheader.layout:

CDetailsGameSubHeaderPanel
{
bgcolor=detailbg2
}
Next, gamespage_details_friends.layout:
friendsdetails
{
bgcolor=detailbg1
}
Next, gamespage_details_achievements.layout:
achievementsdetails
{
bgcolor=detailbg2
}
Next, gamespage_details_news.layout:
newsdetails
{
bgcolor=detailbg1
}
Next, gamespage_details_screenshots.layout:
screenshotsdetails
{
bgcolor=detailbg2
}
Next, gamespage_details_nonsteam.layout:
nonsteamdetails
{
P a g e | 49
bgcolor=detailbg1
}
Finally, open gamespage_details_welcome.layout:

nonsteamdetails
{
bgcolor=detailbg2
}
Results:
P a g e | 50
15.
Time for the finishing touches, regarding the detailed view.
First, lets change the border colors of the achievement bar.

Open gamespage_details_achievements_most_recent.layout:
progressbackground
{
bgcolor=none
render_bg
{
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ultrapink1 )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ultrapink1 )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ultrapink1 )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ultrapink1 )" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ultrapink1 )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ultrapink1 )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ultrapink1 )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ultrapink1 )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonFace2 )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonFace2 )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonFace2 )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonFace2 )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonFace2 )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonFace2 )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonFace2 )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonFace2 )"
}
}
P a g e | 51
And here we go:
Lets add a few features, Im mainly talking about the news section.
Open gamespage_details_news_item.layout:
newsitem_body
{
textcolor="Label"
selectedtextcolor=txtpinkbright
render_bg {}
font-size=15
}
"newsitem_body url"
{
textcolor=txtpinkdark
font-size=15
font-style="underline"
}
"newsitem_body url:hover"
{
font-size=15
font-style=underline
textcolor=ultrapink2
}
"newsitem_body bold"
{
font-weight=1000
textcolor="Label"
}
more_link
{
font-size=15
font-weight=400
textcolor=menuborder
}
more_link:hover
{
}
Now the news section looks way better:
P a g e | 52
Hover Colors:
Selected text:
P a g e | 53
Now, lets change the game list on the left. Mainly the highlight
colors and mod/not installed game colors. Lets do it:
Ill define 2 more colors:
gameunin1="150 46 33 255"
gameunin2="220 46 33 255"
Look for this in steam.styles:

"GameItem_Uninstalled"
{
textcolor=gameunin1
selectedtextcolor=gameunin2
}
"GameItem_Uninstalled:hover"
{
textcolor=gameunin2
}
"GameItem_Installed"
{
textcolor="text"
selectedtextcolor="white"
}
"GameItem_Installed:hover"
{
textcolor="white"
selectedtextcolor="white"
}
"GameItem_Shortcut"
{
textcolor=gameunin1
}
"GameItem_Shortcut:hover"
{
textcolor=gameunin2
}
"GameItem_Mod"
{
textcolor=gameunin1
}
"GameItem_Mod:hover"
{
textcolor=gameunin2
}
"GameItem_Updating"
{
P a g e | 54
textcolor=gameunin1
}
"GameItem_Updating:hover"
{
textcolor=gameunin2
}
"GameItem_Updating:selected"
{
textcolor=gameunin2
}
"GameItem_Decrypting"
{
textcolor=gameunin1
}
"GameItem_Decrypting:hover"
{
textcolor=gameunin2
}
"GameItem_Decrypting:selected"
{
textcolor=gameunin2
}
"GameItem_Syncing"
{
textcolor=gameunin1
}
"GameItem_Syncing:hover"
{
textcolor=gameunin2
}
"GameItem_Syncing:selected"
{
textcolor=gameunin2
}
I used only 2 colors. The result:
P a g e | 55
Next, open steamrootdialog_gamespage_details.layout:

(I defined a new color, gamelistbg. You can, too, or use an already
defined one)
ListPanelSectionHeader
{
inset="2 0 0 0"
textcolor=label
render_bg
{
0="gradient_horizontal( x0 - 1, y0, x0 + 250, y1 - 1, gamelistbg, none )"
}
}
Now open steam.styles and look for this:

"Csteamrootdialog ListPanelSectionCollapser"
{
inset = "0 1 0 1"
bgcolor=none
render_bg
P a g e | 56
{
1="fill( x0 , y0, x1, y1 - 1, gamelistbg )"
}
}
"CGamesPage_Mini ListPanelSectionCollapser"
{
inset = "0 1 0 1"
bgcolor=none
render_bg
{
1="fill( x0 , y0, x1, y1 - 1, gamelistbg )"
}
}
Result:
Lets change the scrollbar next. Ill define new colors:
16.
scrolldark="150 39 91 255"
scrolllight="196 51 118 255"
Now in steam.styles look for this:

ScrollBarButton.up
{
bgcolor=none
inset="-1 2 0 0"
image="graphics/icon_up_default"
render_bg
{
// background fill
0="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, scrolldark )"
// lines around
1="fill( x0 + 3, y0 + 2, x1 - 5, y0 + 3, scrolldark )" // top
2="fill( x0 + 3, y1 + 2, x1 - 5, y1 + 3, scrolldark )" // bottom
}
}
ScrollBarButton.up:hover
{
bgcolor=none
inset="-1 2 0 0"
image="graphics/icon_up_hover"
render_bg
P a g e | 57
{
// background fill
0="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, scrolllight )"
// lines around
1="fill( x0 + 3, y0 + 2, x1 - 5, y0 + 3, scrolllight )" // top
2="fill( x0 + 3, y1 + 2, x1 - 5, y1 + 3, scrolllight )" // bottom
}
}
ScrollBarButton.up:active
{
inset="-1 2 0 0"
image="graphics/icon_up_hover"
render_bg
{
// background fill
0="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, scrolllight )"
// lines around
2="fill( x0 + 3, y1 + 2, x1 - 5, y1 + 3, scrolllight )" // bottom
}
}
ScrollBarButton.up:disabled
{
inset="-1 2 0 0"
image="graphics/icon_up_disabled"
render_bg
{
// background fill
0="fill( x0 + 2, y0 + 3, x1 - 4, y1 + 2, scrolldark )"
// lines around
2="fill( x0 + 3, y1 + 2, x1 - 5, y1 + 3, scrolldark )" // bottom
}
}
ScrollBarButton.down
{
bgcolor=none
inset="-2 0 0 0"
image="graphics/icon_down_default"
render_bg
{
// background fill
0="fill( x0 + 2, y0 - 1, x1 - 4, y1 - 3, scrolldark )"
// lines around
1="fill( x0 + 3, y0 - 2, x1 - 5, y0 - 1, scrolldark )" // top
2="fill( x0 + 3, y1 - 3, x1 - 5, y1 - 2, scrolldark )" // bottom
}
}
ScrollBarButton.down:hover
{
inset="-2 0 0 0"
image="graphics/icon_down_hover"
render_bg
{
// background fill
0="fill( x0 + 2, y0 - 1, x1 - 4, y1 - 3, scrolllight )"
// lines around
1="fill( x0 + 3, y0 - 2, x1 - 5, y0 - 1, scrolllight )" // top
P a g e | 58
2="fill( x0 + 3, y1 - 3, x1 - 5, y1 - 2, scrolllight )" // bottom

}
}
ScrollBarButton.down:active
{
inset="-2 0 0 0"
render_bg
{
// background fill
0="fill( x0 + 2, y0 - 1, x1 - 4, y1 - 3, scrolllight )"
// lines around
1="fill( x0 + 3, y0 - 2, x1 - 5, y0 - 1, scrolllight )" // top
}
}
ScrollBarButton.down:disabled
{
inset="-2 0 0 0"
render_bg
{
// background fill
0="fill( x0 + 2, y0 - 1, x1 - 4, y1 - 3, scrolldark )"
// lines around
1="fill( x0 + 3, y0 - 2, x1 - 5, y0 - 1, scrolldark )" // top
}
}
ScrollBarButton.left
{
bgcolor=none
inset="1 3 0 0"
image="graphics/icon_left_default"
render_bg
{
// center fill
0="fill( x0 + 2, y0 + 5, x1, y1 - 3, scrolldark )"
// lines around
}
}
ScrollBarButton.left:hover
{
image="graphics/icon_left_hover"
inset="1 3 0 0"
render_bg
{
// center fill
0="fill( x0 + 2, y0 + 5, x1, y1 - 3, scrolllight )"
// lines around
}
}
P a g e | 59
ScrollBarButton.right
{
bgcolor=none
image="graphics/icon_right_default"
inset="0 2 0 0"
render_bg
{
// center fill
0="fill( x0, y0 + 5, x1, y1 - 3, scrolldark )"
// lines around
}
}
ScrollBarButton.right:hover
{
image="graphics/icon_right_hover"
inset="0 2 0 0"
render_bg
{
// center fill
0="fill( x0, y0 + 5, x1, y1 - 3, scrolllight )"
// lines around
}
}
ScrollBarHandle //vertical scrollbar thumb
{
bgcolor=none
image="graphics/icon_scroll_handle"
render_bg
{
// center fill
0="fill( x0 + 2, y0 + 6, x1 - 4, y1 - 5, scrolldark )"
// lines around
}
}
"ScrollBarHandle:hover"
{
image="graphics/icon_scroll_handle_over"
render_bg
{
// center fill
0="fill( x0 + 2, y0 + 6, x1 - 4, y1 - 5, scrolllight )"
// lines around
}
}
"ScrollBarHandle:active"
{
image="graphics/icon_scroll_handle_over"
render_bg
{
// center fill
P a g e | 60
// lines around
}
}
"SliderHoriz" //horizontal scrollbar thumb

{
image="graphics/icon_scroll_handle_horiz"
render {
// center fill
1="fill( x0 + 2, y0 + 6, x1 - 1, y1 - 3, scrolldark )"
// lines around
}
}
"SliderHoriz:hover"
{
image="graphics/icon_scroll_handle_over_horiz"
render {
// center fill
// lines around
}
}
"SliderHoriz:active"
{
image="graphics/icon_scroll_handle_over_horiz"
render {
// center fill
// lines around
}
}
ScrollBarSlider // gutter
{
bgcolor="none"
render_bg
{
//lines around
1="fill( x0 + 3, y0 + 5, x1 - 5, y0 + 6, buttonborderdisabled )" // top
//background fill
2="gradient( x0 + 2, y0 + 6, x1 - 4, y0 + 200, buttonborderdisabled,
none)"
}
}
P a g e | 61
Ive changed buttonborderdisabled color already, so I left it.

Result:
17.
Now, lets change the button colors in grid view.
Open gamespage_grid_chrome.layout:
ChromeBorderItem
{
render
{
// bgfill
0="gradient( x0 + 12 , y1 - 47, x1 - 18, y1 - 20, btnlight, btndark )"
// lines around
1="fill( x0 + 13, y0 + 2, x1 - 19, y0 + 3, ultrapink2 )" // top
2="fill( x0 + 13, y1 - 20, x1 - 19, y1 - 19, ultrapink2 )" // bottom
3="fill( x1 - 18 , y1 - 46, x1 - 17, y1 - 21, ultrapink2 )" //right
4="fill( x0 + 11, y1 - 46, x0 + 12, y1 - 21, ultrapink2 )" //left
6="fill( x1 - 19, y0 + 3, x1 - 18, y0 + 4, ultrapink2 )"
7="fill( x0 + 12, y1 - 21, x0 + 13, y1 - 20, ultrapink2 )"
8="fill( x1 - 19, y1 - 21, x1 - 18, y1 - 20, ultrapink2 )"
9="fill( x0 + 11, y0 + 3, x0 + 12, y0 + 4, ButtonFace2)"
10="fill( x1 - 18 , y0 + 3, x1 - 17, y0 + 4, ButtonFace2 )"
11="fill( x0 + 11, y1 - 21, x0 + 12, y1 - 20, ButtonFace2 )"
12="fill( x1 - 19, y1 - 20, x1 - 18, y1 - 19, ButtonFace2 )"
13="fill( x0 + 12, y0 + 2, x0 + 13, y0 + 3, ButtonFace2 )"
14="fill( x1 - 19, y0 + 2, x1 - 18, y0 + 3, ButtonFace2 )"
15="fill( x0 + 12, y1 - 20, x0 + 13, y1 - 19, ButtonFace2 )"
16="fill( x1 - 18, y1 - 21, x1 - 17, y1 - 20, ButtonFace2 )"
P a g e | 62
}
}
Result:
18.
Now, lets fix this problem in games list view:
Open steam.styles and look for this:

ListPanelSectionHeader
{
inset="2 0 0 0"
textcolor=label
render_bg
{
0="gradient_horizontal( x0 - 1, y0, x0 + 250, y1 - 1, gamelistbg, none )"
}
}
Done:
19.
We can also change the background color of all the game views.
Lets start with detailed view. I defined new color for this:
P a g e | 63
darkerdialog="45 3 40 255"
Open steamrootdialog_gamespage_details.layout:
CGamesPage_Details
{
bgcolor="none"
inset="0 0 0 1"
render
{
// lines around, to fix a bug
0="fill( x0 + 3, y0, x1 - 2, y0+1, ButtonBorderDisabled )" // top
//gradient to obscure content at top of scrolling region
1="gradient( x0+2, y0 + 1, x1-1, y0 + 16, dialogbg, none )"
//gradient to obscure content at bottom of scrolling region
2="gradient( x0+2, y1 - 16, x1-1, y1-1, none, dialogbg )"
5="fill( x0 + 2, y0 + 1, x0 + 3, y0 + 2, ButtonBorderDisabled )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )"
7="fill( x0 + 2, y1 - 2, x0 + 3, y1 - 1, ButtonBorderDisabled )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )"
}
render_bg
{
0="gradient( x0+2, y0+2, x1-1, y1 - 1, darkerdialog, darkerdialog )"
1="gradient( x0 +2, y0+2, x1-1, y0 + 20, darkerdialog, darkerdialog )"
}
}
Result:
P a g e | 64
Next, open gamespage_grid.layout:

WrapPanel
{
inset="1 0 0 2"
bgcolor="none"
render
{
1="gradient( x0+1, y0, x1-1, y0 + 16, dialogbg, none )"
2="gradient( x0+1, y1 - 16, x1-1, y1-2, none, dialogbg )"
6="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled )" //UL
7="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled )" //UR
}
render_bg {
// background gradient
0="gradient( x0+1, y0, x1-1, y1-2, darkerdialog, darkerdialog )"
1="gradient( x0+1, y0, x1-1, y0 + 31, darkerdialog, darkerdialog )"
// lines around
2="fill( x0, y0 + 1, x0 + 1, y1 - 3, ButtonBorderDisabled)" //left
3="fill( x1 - 1, y0 + 1, x1, y1 - 3, ButtonBorderDisabled )" //right
4="fill( x0 + 2, y0 - 1, x1 - 2, y0, ButtonBorderDisabled )" //top
5="fill( x0 + 2, y1 - 2, x1 - 2, y1 - 1, ButtonBorderDisabled )" //btm
}
}
Result:
P a g e | 65
Finally, open steam.styles:

"CGamesListPanel"
{
bgcolor="none"
font-size=15
font-weight=400
textcolor="Text"
selectedtextcolor="textselected"
selectedbgcolor="Focus"
shadowtextcolor="TextDisabled"
inset="0 -1 1 1"
render_bg {
0="gradient( x0+1, y0+1, x1-1, y0 + 432, darkerdialog, darkerdialog )"
1="fill( x0+1, y0+ 432, x1-1, y1 - 1, darkerdialog )"
2="gradient( x0+1, y0+1, x1-1, y0 + 31, darkerdialog, darkerdialog )"
// lines around
3="fill( x0, y0, x0 + 1, y1 - 2, ButtonBorderDisabled )" //left
4="fill( x1 - 1, y0, x1, y1 - 2, ButtonBorderDisabled)" //right
5="fill( x0 + 2, y0 - 1, x1 - 2, y0, ButtonBorderDisabled )" //top
6="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )" //btm
11="fill( x0, y0 + 1, x0 + 1, y0 + 2, ButtonBorderDisabled2 )"
12="fill( x1 - 1, y0 + 1, x1, y0 + 2, ButtonBorderDisabled2 )"
13="fill( x0, y1 - 2, x0 + 1, y1 - 1, ButtonBorderDisabled2 )"
14="fill( x1 - 1, y1 - 2, x1, y1 - 1, ButtonBorderDisabled2 )"
15="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled2 )"
16="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled2 )"
17="fill( x0 + 1, y1 - 1, x0 + 2, y1, ButtonBorderDisabled2 )"
18="fill( x1 - 2, y1 - 1, x1 - 1, y1, ButtonBorderDisabled2 )"
P a g e | 66
}
}
Result:
P.S. The color I chose for the background, is rather dark, so the
changes might not be very visible in the screenshots.
20.
Lets change the DLC/CDkey viewing panel (screenshot below).
Open steam.styles:
"Page ListPanel"
{
font-size=14
font-weight=400
textcolor="Text2"
selectedtextcolor="TextSelected"
inset="0 -1 1 1"
bgcolor=none
render_bg
{
// background fill
0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 80, darkerdialog, darkerdialog )"
1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, darkerdialog )"
// lines around
3="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderDisabled )" // top
4="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )" // bottom
5="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderDisabled )" // left
6="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderDisabled )" // right
P a g e | 67

}
}
This is the result and what I was talking about:
(chose dark color again)

21.
Were done with the library views. Now, lets work on
friendslist.
First, Id like to remove this background:
Open steam.styles:
CFriendsListSectionHeader
{
bgcolor=none
font-size=14
font-size=13 [$OSX]
font-weight=400
textcolor="texthover"
inset="0 2 0 0"
render_bg
{
0="gradient_horizontal( x0-21, y0+1, x0+230, y1+1, none, none )"
}
}
Done:
P a g e | 68
Now, this step is going to be tricky. Were gonna add a custom

image and background color to our friendslist.
First, find a piece of code that looks like this (steam.styles):
"CFriendsDialog SectionedListPanelInterior"
{
bgcolor=none
font-size=14
font-weight=400
textcolor="Text"
shadowtextcolor="TextDisabled" // the color of disabled line items
render
{
0="fill( x0+2, y0, x1, y0 + 2, dialogbg )"
1="gradient( x0+2, y0+2, x1, y0 + 12, dialogbg, none )"
2="gradient( x0+1, y1 - 18, x1, y1-3, none, almostblack )"
3="fill( x0+1, y1 - 4, x1, y1-1, almostblack )"
}
render_bg
{
0="gradient( x0, y0, x1, y0 + 149, dialogbg, AlmostBlack )"
1="fill( x0, y0 + 149, x1, y1 + 1, AlmostBlack )"
}
}
And delete it whole. Select everything and press delete.

Next, find SectionedListPanelCollapser:selected:hover or Slider.
Between them add this (Ill include the other code to show you how
to do this correctly):
SectionedListPanelCollapser:selected:hover
{
image="graphics/icon_expand_over"
}
P a g e | 69
SectionedListPanelInterior
{
bgcolor=friendpanelfill
render
{
0="image( x0, y0, x1, y1, graphics/rider )"
}
}
Slider
{
font-size=10
font-weight=400
textcolor="label"
}
friendpanelfill background color of friendslist;

image rider.tga is located in graphics folder and will appear in the
friends list.
Result:
P a g e | 70
22.
Now, lets make a few adjustments to friend/group chat.

ListPanel
{
bgcolor=none
font-size=14
font-weight=400
textcolor="text2"
shadowtextcolor="TextDisabled" // the color of disabled line items
inset="0 -1 1 1"
render
{
}
render_bg
{
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, chatpurple, chatpurple)"
1="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 31, chatpurple, chatpurple )"
// lines around
19="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderDisabled )" //top
}
}
Mind you, the above chat border is missing, but I added it with the
underlined code line.
Result:
P a g e | 71
Next, lets change the offline/online/ingame colors.

Ill be defining 3 colors again and assigning them like this
(steam.styles):
// Friends List colors
Friends.InGameColor
Friends.OnlineColor
Friends.OfflineColor
friendingame
friendonline
friendoffline
Now, whats left is to change the friends highlight color (when you
hover the cursor over one of your steam friends). Define the color
and assign it like this:
Focus3=friendshighlight
23.
// background color of highlighted friends
Time to change the downloads menu.
First, assign a defined color like this:

Highlight5=ultrapink1
// blue
Then, find this in steam.styles:

ProgressBar
{
textcolor="Highlight5"
bgcolor="none"
render
{
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, menuborder )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, menuborder )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, menuborder )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, menuborder )" // right
P a g e | 72
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, menuborder )"

6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, menuborder )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, menuborder )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, menuborder )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, menuborder )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, menuborder )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, menuborder )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, menuborder )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, menuborder )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, menuborder )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, menuborder )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, menuborder )"
}
}
"Page ProgressBar"
{
textcolor="Highlight5"
bgcolor="none"
render
{
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, menuborder )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, menuborder )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, menuborder )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, menuborder )" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, menuborder )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, menuborder )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, menuborder )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, menuborder )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, menuborder )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, menuborder )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, menuborder )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, menuborder )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, menuborder )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, menuborder )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, menuborder )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, menuborder )"
}
}
Result:
It looks like the downloads menu has its own share of buttons, so
lets change them.
P a g e | 73
Open downloadsummarypanel.layout:
PauseButton
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause )"
}
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
PauseButton:Hover
{
inset="23 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause_hover )"
}
render_bg
{
// background fill
// lines around
P a g e | 74

}
}
ResumeButton
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_install )"
}
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
ResumeButton:Hover
{
inset="23 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
P a g e | 75

}
render_bg
{
// background fill
// lines around
1="fill( x0 + 2, y0, x1 - 2, y0 + 1, Texthover )" // top
2="fill( x0 + 2, y1 - 1, x1 - 2, y1, Texthover )" // bottom
3="fill( x0, y0 + 2, x0 + 1, y1 - 2, Texthover )" // left
4="fill( x1 - 1, y0 + 2, x1, y1 - 2, Texthover )" // right
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, Texthover )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, Texthover )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, Texthover )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, Texthover )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, Texthover )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, Texthover )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, Texthover )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, Texthover )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, Texthover )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, Texthover )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, Texthover )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, Texthover )"
}
}
}
Now open appdownloadpanel.layout:

DetailsLaunchButton
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render
{
}
render_bg
{
// background fill
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
P a g e | 76
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"

16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
}
DetailsLaunchButton:Hover
{
inset="23 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
0="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play_hover )"
}
render_bg
{
// background fill
}
}
DetailsLaunchButton:Disabled
{
inset="23 0 0 0"
font-size=16
font-weight=400
textcolor="LabelDisabled"
bgcolor=none
render
{
}
render_bg
{
// background fill
0="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfacedisabled )"
// lines around
P a g e | 77

}
}
SmPauseButton
{
inset="30 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render_bg
{
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark)"
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause )"
}
}
SmPauseButton:Hover
{
inset="30 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause_hover )"
}
P a g e | 78
render_bg
{
// background fill
// lines around
}
}
SmResumeButton
{
inset="30 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render_bg
{
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
}
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_install )"
}
}
SmResumeButton:Hover
{
inset="30 0 0 0"
P a g e | 79
font-size=16
font-weight=400
bgcolor=none
render
{
}
render_bg
{
// background fill
// lines around
}
}
SmRemoveButton
{
inset="30 0 0 0"
font-size=16
font-weight=400
textcolor="Text"
bgcolor=none
render_bg
{
// lines around
5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, text )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, text )"
7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, text )"
9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"
10="fill( x1 - 1, y0 + 1, x1, y0 + 2, text )"
11="fill( x0, y1 - 2, x0 + 1, y1 - 1, text )"
12="fill( x1 - 1, y1 - 2, x1, y1 - 1, text )"
13="fill( x0 + 1, y0, x0 + 2, y0 + 1, text )"
14="fill( x1 - 2, y0, x1 - 1, y0 + 1, text )"
15="fill( x0 + 1, y1 - 1, x0 + 2, y1, text )"
16="fill( x1 - 2, y1 - 1, x1 - 1, y1, text )"
P a g e | 80
}
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_close )"
}
}
SmRemoveButton:Hover
{
inset="30 0 0 0"
font-size=16
font-weight=400
bgcolor=none
render
{
1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_close_hover )"
}
render_bg
{
// background fill
// lines around
}
}
Result so far:
P a g e | 81
I havent changed anything about the disabled state of one button.

Anyways, now Id like to remove those black backgrounds
completely. Open the same file (appdownloadpanel.layout):
panelBgColorActive
{
bgcolor=
none
Next, open downloadsummarypanel.layout:

CDownloadSummaryPanel
{
bgcolor=none
inset="0 0 0 0"
}
Result so far:
Now, lets make that text more readable. Open

downloadsummarypanel.layout again:
bigtextlabel
{
font-size=18
}
Next, lets change the download graph (the remaining black

background). Ill define a new color for that:
downloadbg="91 0 39 255"
Open appdownloadpanel.layout:
P a g e | 82
infoGraphic
{
bgcolor
"none"
textcolor
white
inset="0 3 3 3"
render_bg
{
// background fill
0="fill( x0, y0 + 2, x1 - 1, y1 - 1, downloadbg )"
// lines around
1="fill( x0, y0 + 1, x1 - 2, y0 + 2, none )" // top
2="fill( x0 + 1, y1 - 1, x1 - 1, y1, none )" // bottom
3="fill( x0 - 1, y0 + 2, x0, y1 - 2, none )" // left
4="fill( x1 - 1, y0 + 1, x1, y1 - 1, none )" // right
5="fill( x0 - 1, y0 + 1, x0, y0 + 2, none )"
6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, none )"
7="fill( x0, y1 - 2, x0 + 1, y1 - 1, none )"
8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, none )"
}
}
test
{
textcolor
ultrapink1
font-family
"Arial"
font-size="14"
padding-left
"10"
padding-right "20"
render_bg
{
0="fill ( x0, y0 + 1, x1 , y1, downloadbg2 )"
// lines around
1="fill( x1, y0, x1 + 2, y1, none )"
2="fill( x0, y1, x1, y1 + 2, none )"
// corner
3="fill( x1, y1 , x1 + 1, y1 + 1, none )"
}
}
Result so far:
P a g e | 83
All thats left is to change slim progressbar. One of its colors

anyway. Open appdownloadpanel.layout again:
SlimProgressBar
{
render_bg
{
0="fill( x0, y0, x1, y1, btnlight )"
}
Unfortunately, this doesnt change the same progressbar below, so

lets change it as well. Open uistatuspanel.layout:
SlimProgressBar
{
render_bg
{
0="fill( x0, y0, x1, y1, btnlight )"
}
Final result:
24.
Now lets change the frame colors, of menu windows. To do
that, open steam.styles and look for this:
Frame
{
bgcolor="DialogBG"
render
{
0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, dialogbg, ultrapink1 )" //bottom
1="gradient( x1 - 1, y0, x1, y1, darkpurple1, ultrapink1 )" //right
2="gradient_horizontal( x0, y0, x1, y0 + 1, darkpurple2, darkpurple1 )" //top
3="gradient( x0, y0, x0 + 1, y1, darkpurple2, dialogbg )" //left
}
}
P a g e | 84
Frame:FrameFocus
{
bgcolor="DialogBG"
render
{
0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, dialogbg, ultrapink1 )" //bottom
1="gradient( x1 - 1, y0, x1, y1, darkpurple1, ultrapink1 )" //right
2="gradient_horizontal( x0, y0, x1, y0 + 1, darkpurple2, darkpurple1 )" //top
3="gradient( x0, y0, x0 + 1, y1, darkpurple2, dialogbg )" //left
}
}
Result:
25.
Next, lets change the screenshots menu.
Open screenshotmanager.layout:
P a g e | 85
ThumbnailSelected
{
bgcolor=txtpinkbright
render {
// lines around
//left
//right
//top
//btm
}
}
publishcaption
{
font-size=17
inset=2
font-style="italic"
}
publishcaptionprompt
{
}
WrapPanel
{
inset="10 2 10 2"
bgcolor="none"
render_bg {
0="gradient( x0+1, y0+1, x1-1, y1-2, chatpurple, chatpurple )"
1="gradient( x0+1, y0+1, x1-1, y0 + 31, chatpurple, chatpurple )"
// lines around
2="fill( x0, y0 + 1, x0 + 1, y1 - 3, ButtonBorderDisabled )" //left
3="fill( x1 - 1, y0 + 1, x1, y1 - 3, ButtonBorderDisabled )" //right
4="fill( x0 + 2, y0, x1 - 2, y0+1, ButtonBorderDisabled )" //top
5="fill( x0 + 2, y1 - 2, x1 - 2, y1 - 1, ButtonBorderDisabled )" //btm
6="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled )" //UL
7="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled )" //UR
}
}
ScreenshotLoadingThrobber
{
minimum-width=100
minimum-height=75
bgcolor=btnlight
}
Result:
P a g e | 86
26.
This time, lets change the notification.

Notifications.PanelPosition "BottomRight" // Can be "BottomRight", "BottomLeft", "TopRight", "TopLeft"
Notifications.PanelPosition "TopRight" [$OSX] // the dock is on the bottom for OSX, so instead pop top right like other
apps do
Notifications.SlideDirection "Vertical" // Can be "Vertical", "Horizontal", "None" and controls slide effect
Notifications.FadeInTime
"0.45" // Controls the time it takes to slide/fade into view
Notifications.FadeOutTime "0.45" // Controls the time it takes to slide/fade out of view
Notifications.DisplayTime "6.0" // Controls the length of time at steady state after fade in and before fade out
Notifications.StackSize
"3" // Controls how many panels we will stack before background queuing
You can change it freely, the options are written in the comments.
Ill make such changes:
Notifications.PanelPosition "BottomLeft"
Notifications.SlideDirection "Horizontal"
Notifications.DisplayTime "9.0"
Now, its time to change the notification itself. Ill add a frame and
make it transparent. First, lets define 2 transparent colors:
noticepurple1="91 0 79 200"
noticepurple2="61 0 53 180"
Next, in steam.styles:
P a g e | 87
Notification
{
font-size=15
font-weight=400
bgcolor=none
render_bg
{
0="gradient( x0+1, y0, x1-1, y0+80, noticepurple1, noticepurple2 )"
0="gradient_horizontal( x0 + 1, y1 - 1, x1 -1, y1, ultrapink1, ultrapink1 )" // bottom
1="gradient( x1 - 1, y0 + 1, x1, y1 - 1, ultrapink2, ultrapink1 )" // right
2="gradient_horizontal( x0 + 1, y0, x1 - 1, y0 + 1, ultrapink2, ultrapink2 )" // top
3="gradient( x0, y0 + 1, x0 + 1, y1 - 1, ultrapink2, ultrapink1 )" // left
4="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, clientbg )"
5="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, clientbg )"
6="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, clientbg )"
7="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, clientbg )"
}
render {}
corner_rounding=1
}
Result:
Unfortunately, it will only be transparent ingame:
27.
Whats left to change, are ingame menu colors and a few minor
fixes. Lets change the ingame menu first.
Define 2 more colors for said menu:
ingamepurple1="76 0 66 255"
ingamepurple2="53 0 45 255"
Next, open gameoverlay.styles:
P a g e | 88
Notifications.PanelPosition
"BottomLeft"
detailsbox
{
render_bg
{
0="gradient( x0, y0, x1, y1, ingamepurple1, ingamepurple2 )"
}
}
Result:
28.
Now, for the finishing touches, change all these colors, with
your preferred ones:
ButtonFace=dialogpink2
ButtonFace2=dialogpink2 // for use in main client list panel column header, some
button states
ButtonFace3=dialogpink2 // button cornering pixels
ButtonFaceDisabled="none"
ButtonFaceHover=dialoghighlight /// hover!
ButtonFaceActive=dialoghighlight // not sure what this state is...
ButtonFaceFocus=dialoghighlight // keyboard focus
ButtonFaceActiveFocus=dialoghighlight // this is the default choice
ButtonBorder=ultrapink3
ButtonBorderPage=ultrapink3
P a g e | 89
ButtonBorderDisabled=menuborder
ButtonBorderDisabled2=menuborder //cornering pixels
ButtonBorderActive=ultrapink1
ButtonBorderFocus=ultrapink1
After that, find this in steam.styles and change it as well:

CheckButtonList
{
inset="1 1 1 1"
textcolor="text2"
bgcolor=none
render_bg
{
// background fill
0="gradient( x0 + 1, y0 + 1, x1 - 1, y0 +80, darkerdialog, darkerdialog )"
1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, darkerdialog)"
// lines around
}
}
CheckButtonList:scrollbar
{
inset="1 1 1 1"
textcolor="text2"
bgcolor=none
render
{
0="gradient( x0+1, y0, x1+1, y0 + 6, dialogbg, none )"

1="gradient( x0, y1 - 9, x1+1, y1-1, none, dialogbg )"
}
render_bg
{
P a g e | 90
// background fill
// lines around
}
}
"Page CheckButtonList"
{
inset="1 1 1 1"
textcolor="text2"
bgcolor=none
render_bg
{
// background fill
1="fill( x0 + 1, y0 + 80, x1 - 1, y1 - 1, darkerdialog)"
// lines around
}
}
"Page CheckButtonList:scrollbar"
{
P a g e | 91
inset="1 1 1 1"
textcolor="text2"
bgcolor=none
render
{
0="gradient( x0+1, y0, x1+1, y0 + 6, dialogbg, none )"

1="gradient( x0, y1 - 9, x1+1, y1-1, none, dialogbg )"
}
render_bg
{
// background fill
// lines around
}
The results of these changes:
P a g e | 92
29.
Finally, lets change one more glow on those menu buttons
(screenshot below).
Open uinavigatorpanel.layout:
CUINavButton:hover
{
textcolor="Text"
}
CUINavButton:selected
{
textcolor="white"
bgcolor=none
}
Result:
P a g e | 93
Another misc fix, to change the background color of these buttons:
Either assign your preferred colors like this (in steam.styles):

Focus=menuselected
Focus2=menuselected2
// background color of any selected menu or list item
Or look for this piece of code in uinavigatorpanel.layout:

ViewDetailButton:selected
{
bgcolor="none"
render_bg={}
image="graphics/icon_button_detail_down"
render_bg
{
// background
0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, focus2, focus )"
// lines around
1="fill( x0 + 1, y0, x1 - 1, y0 + 1, focus2 )" // top
2="fill( x0 + 1, y1 - 1, x1 - 1, y1, focus )" // bottom
3="gradient( x0, y0 + 1, x0 + 1, y1 - 1, focus2, focus )" // left
4="gradient( x1 - 1, y0 + 1, x1, y1 - 1, focus2, focus )" // right
}
ViewGridButton:selected
{
bgcolor="none"
render_bg={}
image="graphics/icon_button_grid_down"
render_bg
{
// background
// lines around
}
ViewListButton:selected
{
bgcolor="none"
render_bg={}
image="graphics/icon_button_list_down"
render_bg
{
// background
P a g e | 94
// lines around
}
Instead of focus/focus2, write your own color names (variables).

30.
Now, theres technically nothing left to change. Except for the
various icons, but this concludes all the coding.
P a g e | 95
7. Using already made skin, to make

your own AKA TL;DR
This is exactly how I learned making my own skin, its by randomly
modifying the already made ones.
This section is going to be like a TL;DR version of the guide.
Lets make this quick then, if you open steam.styles located in Rider
theme skin directory, youll come across this:
//spalvos
txtpink="211 91 151 255" //text color
txtpinkbright="239 103 171 255" //text color
txtpinkdark="183 78 131 255" //text color
txtbackground="188 0 100 255" //selected text background color
dialogpink1="73 5 64 255" //menu color 1
dialogpink2="114 8 104 255" //menu color 2
dialoghighlight="145 11 134 255" // ???
ultrapink1="255 117 227 255" // notification and various borders
ultrapink2="255 114 189 255" // notification and various borders
ultrapink3="219 0 116 255"// notification and various borders
menucolor="96 0 85 255" //popup menu color
menuborder="137 63 122 255" //popup menu color
menuselected="133 0 115 255" //popup menu color
menuselected2="150 0 130 255" //popup menu color
txtglow="183 130 173 255" //glow color
btndark="100 0 45 255" //button color
btnlight="158 0 80 255" //button color
btnactive="183 113 169 255" //button color
detailtxt1="255 0 255 255" //detailsview text color
detailtxt2="204 114 186 255" //detailsview text color
detailtxt3="255 167 220 255"//detailsview text color
detailtxt1trans="255 0 255 160"//detailsview text color
detailbg1="135 0 108 120" //detailsview background
detailbg2="153 56 133 120" // detailsview background
gameunin1="198 117 188 255" //detailsview game color
gameunin2="234 138 221 255" //detailsview game color
gamelistbg="145 0 121 255" //detailsview game color
scrolldark="150 39 91 255" //scrollbar color
scrolllight="196 51 118 255" //scrollbar color
darkerdialog="45 3 40 255" // ???
friendpanelfill="45 0 39 200"// friendlist background
chatpurple="38 0 31 255" // chat background
friendonline="255 0 225 255" // self explanatory
friendoffline="175 0 158 255" // self explanatory
friendingame="255 155 220 255"// self explanatory
friendshighlight="145 0 125 120" // self explanatory
downloadbg="91 44 85 255" // downloads menu color
downloadbg2="20 20 20 100" // downloads menu color
darkpurple1="154 0 128 255" // ???
darkpurple2="119 0 85 255" // ???
noticepurple1="91 0 79 200" // notification color
noticepurple2="61 0 53 180" // notification color
P a g e | 96
ingamepurple1="76 0 66 255" // self explanatory

ingamepurple2="53 0 45 255" // self explanatory
groupertrans="127 0 110 150" // self explanatory
Those are all the colors which Ive used. With the way I assigned them
in every file, all you have to do is make same amount of your own
colors, and assign them on top of these. For example, you have defined
a new color:
Mycolor123=25 26 54 255
Youll change the color of most of the text if you assign it like this:
Txtpink= Mycolor123
And so on.
Now you might be wondering ... Whats the catch?
Its that you no longer need to search for some files in layout folder or
whatever. All you basicly need to do is change the content of a single
file steam.styles.
Unfortunately:
- Its going to be tricky, but faster than following the whole guide
- Not likely going to work with any other user made skins, except
with this one (Rider theme)
If somethings wrong and your color doesnt appear the way it should
(unlikely, but youll never know), then copy the RGBT values, instead
of the color/variable name. Like this:
Txtpink=25 26 54 255
The result will stay same.
P a g e | 97
8.
Tips and tricks
Just one simple trick. If you put a picture into the friendlist, itll
probably look lame, like this:
(no, this is not photoshop or whatever).
P a g e | 98
To make it, so that your friends/groups would be visible, you have to

reduce transparency of this image. You can do that with paint.net:
1. Open the image in paint.net and press properties:
2. Reduce the opacity from 255 to 30-50 and press ok:
3. Result:
P a g e | 99
P a g e | 100
9.
Known bugs/errors
When changing piston.tga with your preferred image, youll surely

come across this error:
The trick here is to reduce the contrast of said image. There is no

designed amount by how much you should reduce it, though.
You can do this with paint.net:
1. Open the said image in paint.net.
2. Go to Adjustments->Brightness/Contrast
3. I reduced it by 39 this time:
4. Result:
P a g e | 101

(Guide) How To Make A Steam Skin PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(Guide) How To Make A Steam Skin PDF

Uploaded by

Copyright:

Available Formats

[Guide] How to make a steam skin

Getting started FAQ

Q: What do I need to get started?

Q: So I chose the colors/picture and came here. Now what?

let me define what is what:

=23 22 20 255 the definition of a variable. In this case, the RGB

a few things to take a notice of:

Q: Okay, done. Whats the next step?

3. Paste the following into the bar:

After writing this (color red is already defined by default):

And saving the steam.styles file, we get this result:

Some colors appear to be changed already, from light gray to red.

Steam developer mode

Pressing F6 again, will make it go away.

Lets discuss whats on the left first:

The files, which contain the variable. Meaning, if you type

Press F6 and click on it. If done correctly:

Then look at the contents of VGUI editor:

4.1. Making a batch file

3. Now, simply write this:

8. Thats it. You can continue skinning/playing games, etc. Nothing

Paint.net is a freeware image editing program. More info about it

Nothing special, until you press more button:

As we can see, R=87, G=0, B=127, T=255.

This way, we can easily define our colors.

Making of Rider theme skin

Ill surely use pink and purple colors.

We can now finally start making the skin.

Thats about it, lets see the results:

4. To change the font, just find this line:

Restart steam to see the results (after saving steam.styles file).

5. Next, Id like to change the colors of pop up menu (youll understand

After that, I apply them:

Done. Lets see what weve got:

And the result:

As you can see, the render is perfectly visible now.

I prefer it to be as bright as other text, again.

Final result after these changes:

Lets fix that zoom and slider. Open uinavigatorpanel.layout again.

As for the slider, look for this:

Now look for this:

Ill change it into this:

This time lets change the button colors.

Ill define a few colors again:

To do this, find and open gamespage_details_subheader.layout file

Now just do the same for the rest of the buttons:

9="fill( x0, y0 + 1, x0 + 1, y0 + 2, text )"

Some notes regarding this:

This time, open steam.styles file again.

7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, text )"

14="fill( x1 - 2, y0, x1 - 1, y0 + 1, texthover )"

0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, DialogBG, propertysheetbg )"

// single pixel fills in the corners

Lets look at the results and discuss:

- I mentioned that the buttons have more states, meaning, I needed

The buttons displayed are in disabled state.

Its referred to as ComboBox in the steam.styles file.

11="fill( x0, y1 - 2, x0 + 1, y1 - 1, texthover )"

14="fill( x1 - 2, y0, x1 - 1, y0 + 1, texthover )"

Time to change buttons like this one:

To do that, well have to open lots of different files.

3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, text )" // left

Now, open gamespage_details_screenshots_list.layout: