[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 a g e | 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, you’ll be able to make a skin

with: most colors changed, font of your choice, image(s) of your choice.

P a g e | 3

2. Getting started FAQ

Q: What do I need to get started?

A: First, I’d 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 you’re planning of using it in your skin later. If you

would like to keep the original steam logo, then just pick the colors.

Q: It’s 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 you’re done, or if you like the original texture, skip to

either advanced faq or to section 6.

P a g e | 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. Let’s 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"

That’s 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, it’s pretty easy to define your own. Let’s look at the given parameters of one of the steam’s defined colors:

almostBlack="23 22 20 255"

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, it’s important not to have 2 variables with the same name,

regardless if they have different values.

P a g e | 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, 2

nd – green, 3

rd – 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, there’s no restrictions. It’s wise to keep transparency at 255 most

of the time.

Q: Okay, let’s 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" 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" 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 a g e | 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, it’s

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 //.

- it’s wise to define every color in steam.styles file, so that, if you don’t like

something, you could easily find it and tweak it to your liking.

Q: Okay, done. What’s the next step?

A: You start applying your colors.

Q: Okay ... That’s 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? That’s what you are going to be doing here.

That’s 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 don’t 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 a g e | 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 – there’s no other way to see the changes). 7. In case you’ve 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 a g e | 8

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

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

That’s 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 a g e | 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 won’t give examples of how it fails, I’ll 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, let’s pretend that you want to change the view friends button (it’s 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 it’s contents should’ve 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 it’s contents.

Let’s discuss what’s on the left first:

That’s 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 don’t 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, you’ll 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, it’ll 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, you’ll have to open the corresponding files yourself

as these are not the ones which you want to be changing, or think that

you’ll be changing.

There’s still some use for it, though. Let’s 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:

It’s 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 it’s:

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 there’s going to be a new tab, called

console:

8. That’s 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 don’t 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 it’s 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.

Let’s 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 it’s 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 I’m

talking about:

I’ll 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

I’ll replace piston.tga file with the render above (maintaining the

same height/width as the original steam logo).

2. Next I’ll be making a texture, to fit with the above render. The file is

called clienttexture2.tga. I’ll be making a replacement for it.

Anyway, since it’s done:

We can now finally start making the skin.

3. Let’s start by choosing the colors for text and overall look of the

client (steam.styles).

Here are the colors that I’ve 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 I’ll 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

That’s about it, let’s 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, I’d like to change the colors of pop up menu (you’ll understand

what I’m 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. Let’s see what we’ve got:

6. Now if you take a look at the skin, we’ve changed quite a lot of stuff. Unfortunately, to fully change everything, this will take A LOT more

time. So let’s fix a few things in this step instead of making further

adjustments.

First, I’ll 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 don’t need,

but I’ll 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 )" // 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 )"

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 you’d 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-family=basefont font-size=13 font-weight=400 textcolor=text font-style=uppercase padding-left=0

P a g e | 23

}

Final result after these changes:

7. If we click on grid view, we’ll see that there’s one thing left unchanged:

Let’s fix that zoom and slider. Open uinavigatorpanel.layout again. Look for this:

NavLabelZoom [!$OSX] { font-family=basefont font-size=14 font-weight=400 textcolor=text

font-style=uppercase padding-right=5 } NavLabelZoom [$OSX] { font-family=basefont font-size=13 font-weight=400 textcolor=text

font-style=uppercase 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 that’s not the point, now

that you know how to change the color)

8. Now let’s fix the all games button.

Open uinavigatorpanel.layout again and look for this: NavLabel2 [!$OSX] { font-family=basefont 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-family=basefont font-size=13 font-weight=400 textcolor="TextentrySelected" font-style="outerglow,uppercase" font-outerglow-color="TextGlowHover" font-outerglow-offset=1 font-outerglow-filtersize=3

P a g e | 25

} NavLabel2:hover { textcolor="white" font-style="outerglow,uppercase" font-outerglow-color="TextGlowHover" font-outerglow-offset=1 font-outerglow-filtersize=3 } NavLabel2:selected { textcolor="white" }

I’ll be leaving the white color alone, I’ll just delete the glow and make the text less bright:

NavLabel2 [!$OSX] { font-family=basefont font-size=14 font-weight=400 textcolor=text font-style="uppercase" } NavLabel2 [$OSX] { font-family=basefont font-size=13 font-weight=400 textcolor=text font-style="uppercase" } NavLabel2:hover { textcolor="white" font-style="uppercase" } NavLabel2:selected { textcolor="white" }

The result:

P a g e | 26

When highlighted:

9. Now let’s make the account text more visible, add a glow even.

We’ll need a new color for the glow, so I’ll define it: txtglow="198 0 53 255"

Now look for this:

URLLabelSimple { textcolor="labelfocus" bgcolor="none" font-family=basefont font-size=14 font-weight=400 font-style=regular } URLLabelSimple [$OSX] { textcolor="labelfocus" bgcolor="none" font-family=basefont font-size=13 font-weight=400 font-style=regular } URLLabelSimple:Hover { font-style=underline textcolor="WHITE" }

I’ll change it into this:

URLLabelSimple { textcolor="labelfocus" bgcolor="none"

P a g e | 27

font-style="outerglow,uppercase" font-outerglow-color=txtglow font-outerglow-offset=1 font-outerglow-filtersize=2 font-family=basefont font-size=16 font-weight=600 } URLLabelSimple [$OSX] { textcolor="labelfocus" bgcolor="none" font-family=basefont font-style="outerglow,uppercase" font-outerglow-color=txtglow font-outerglow-offset=1 font-outerglow-filtersize=2 font-family=basefont font-size=16 font-weight=600 } URLLabelSimple:Hover { font-style="outerglow,uppercase,underline" font-outerglow-color=txtglow font-outerglow-offset=3 font-outerglow-filtersize=3 font-family=basefont font-size=16 font-weight=600 }

Result:

Hover:

P a g e | 28

10. This time let’s change the button colors.

I’ll 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 there’s a lot of code, I’ll just post the changes I’ve made (in

bold):

DetailsButton { inset="-3 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text"

font-style=uppercase 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-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )" } } DetailsLaunchButton:Hover {

P a g e | 30

inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 )" } } DetailsInstallButton { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_install)" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )"

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-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_install_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 )" } } DetailsBuyButton { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_buy )" } render_bg {

P a g e | 32

// 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 )" } } DetailsBuyButton:hover { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 3, x1, y1, graphics/icon_buy_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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:

- We’ve changed the colors of just a few buttons, not all

- I didn’t 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 don’t

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.

I’ll 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 I’ve made due to too much code):

Button { font-family=basefont font-size=13 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 // single pixel fills in the corners 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 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 // single pixel fills in the corners 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 { textcolor="TextHover" render_bg { // background fill // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 // single pixel fills in the corners 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 )"

P a g e | 35

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 )" } } "Page Button:hover" { textcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 // single pixel fills in the corners 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:focus { textcolor="TextHover" render_bg { 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 )" } }

P a g e | 36

"Page Button:focus" { textcolor="TextHover" render_bg { 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 { textcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, DialogBG, propertysheetbg )" // 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 // single pixel fills in the corners 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 )" } } "Page Button:active" { textcolor="TextHover" render_bg { // background fill

P a g e | 37

0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, DialogBG, propertysheetbg )" // 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 // single pixel fills in the corners 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:selected { textcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 )" } } "Page Button:selected" { textcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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

P a g e | 38

// single pixel fills in the corners 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 )" } }

Let’s look at the results and discuss:

- I mentioned that the buttons have more states, meaning, I needed more colors, that’s why I defined one more earlier

- If you’re gonna use a different color for each state, it’ll get very

confusing - If you understand a lot about steam skinning, by now, you’ll

notice that there’s one button state which I haven’t touched. It’s

the disabled state. This one’s what I’m talkin’ about:

The buttons displayed are in disabled state.

12. Moving on, there’s one button left unchanged in the settings tab. This one:

P a g e | 39

It’s referred to as ComboBox in the steam.styles file.

I’ll just make the changes and display them:

ComboBox { inset="3 0 0 0" textcolor="Text" font-family=basefont font-size="14" selectedtextcolor="TextEntrySelected" selectedbgcolor="TextSelectedBG" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 // single pixel fills in the corners 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 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 // single pixel fills in the corners 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 )"

P a g e | 40

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 )" } } ComboBox:focus { textcolor="Texthover" selectedbgcolor="none" selectedtextcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 )" } } ComboBox:focus:hover { textcolor="Texthover" selectedbgcolor="none" selectedtextcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 )"

P a g e | 41

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 )" } } "Page ComboBox" { render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 // single pixel fills in the corners 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" { textcolor="Texthover" selectedtextcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 )" } }

P a g e | 42

"Page ComboBox:hover" { textcolor="Texthover" selectedtextcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 // single pixel fills in the corners 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 )" } } "Page ComboBox:focus:hover" { textcolor="Texthover" selectedtextcolor="TextHover" render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnactive, propertysheetbg )" // 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 // single pixel fills in the corners 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 | 43

13. Time to change buttons like this one:

To do that, we’ll have to open lots of different files. Let’s 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" font-family=basefont 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 2="fill( x0 + 2, y1 - 1, x1 - 5, y1, text )" // bottom

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 // single pixel fills in the corners 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 textcolor="TextHover" font-family=basefont render_bg { // background fill 0="gradient( x0 + 1, y0 + 2, x1 - 4, y1 - 1, btnactive, propertysheetbg )" // lines around 1="fill( x0 + 2, y0 + 1, x1 - 5, y0 + 2, texthover )" // top 2="fill( x0 + 2, y1 - 1, x1 - 5, y1, texthover )" // bottom 3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, texthover )" // left 4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, texthover )" // right // single pixel fills in the corners 5="fill( x0 + 1, y0 + 2, x0 + 2, y0 + 3, texthover )" 6="fill( x1 - 5, y0 + 2, x1 - 4, y0 + 3, texthover )" 7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, texthover )" 8="fill( x1 - 5, y1 - 2, x1 - 4, y1 - 1, texthover )" 11="fill( x0, y0 + 2, x0 + 1, y0 + 3, texthover )" 12="fill( x1 - 4, y0 + 2, x1 - 3, y0 + 3, texthover )" 13="fill( x0, y1 - 2, x0 + 1, y1 - 1, texthover )" 14="fill( x1 - 4, y1 - 2, x1 - 3, y1 - 1, texthover )" 15="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, texthover )" 16="fill( x1 - 5, y0 + 1, x1 - 4, y0 + 2, texthover )" 17="fill( x0 + 1, y1 - 1, x0 + 2, y1, texthover )" 18="fill( x1 - 5, y1 - 1, x1 - 4, y1, texthover )" } } Pay attention to the underlined line, I didn’t 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" font-family=basefont 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 2="fill( x0 + 2, y1 - 1, x1 - 5, y1, text )" // bottom 3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, text )" // left 4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, text )" // right // single pixel fills in the corners 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 textcolor="TextHover" font-family=basefont render_bg { // background fill 0="gradient( x0 + 1, y0 + 2, x1 - 4, y1 - 1, btnactive, propertysheetbg )" // lines around 1="fill( x0 + 2, y0 + 1, x1 - 5, y0 + 2, texthover )" // top 2="fill( x0 + 2, y1 - 1, x1 - 5, y1, texthover )" // bottom 3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, texthover )" // left 4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, texthover )" // right // single pixel fills in the corners 5="fill( x0 + 1, y0 + 2, x0 + 2, y0 + 3, texthover )" 6="fill( x1 - 5, y0 + 2, x1 - 4, y0 + 3, texthover )" 7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, texthover )" 8="fill( x1 - 5, y1 - 2, x1 - 4, y1 - 1, texthover )" 11="fill( x0, y0 + 2, x0 + 1, y0 + 3, texthover )" 12="fill( x1 - 4, y0 + 2, x1 - 3, y0 + 3, texthover )" 13="fill( x0, y1 - 2, x0 + 1, y1 - 1, texthover )" 14="fill( x1 - 4, y1 - 2, x1 - 3, y1 - 1, texthover )" 15="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, texthover )" 16="fill( x1 - 5, y0 + 1, x1 - 4, y0 + 2, texthover )" 17="fill( x0 + 1, y1 - 1, x0 + 2, y1, texthover )" 18="fill( x1 - 5, y1 - 1, x1 - 4, y1, texthover )" } }

Now, open gamespage_details_screenshots_list.layout:

P a g e | 46

screenshotslabelmore { inset="-3 0 0 0" font-size=18 textcolor="Text" font-family=basefont 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 2="fill( x0 + 2, y1 - 1, x1 - 5, y1, text )" // bottom 3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, text )" // left 4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, text )" // right // single pixel fills in the corners 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 textcolor="TextHover" font-family=basefont render_bg { // background fill 0="gradient( x0 + 1, y0 + 2, x1 - 4, y1 - 1, btnactive, propertysheetbg )" // lines around 1="fill( x0 + 2, y0 + 1, x1 - 5, y0 + 2, texthover )" // top 2="fill( x0 + 2, y1 - 1, x1 - 5, y1, texthover )" // bottom 3="fill( x0 + 0, y0 + 3, x0 + 1, y1 - 2, texthover )" // left 4="fill( x1 - 4, y0 + 3, x1 - 3, y1 - 2, texthover )" // right // single pixel fills in the corners 5="fill( x0 + 1, y0 + 2, x0 + 2, y0 + 3, texthover )" 6="fill( x1 - 5, y0 + 2, x1 - 4, y0 + 3, texthover )" 7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, texthover )" 8="fill( x1 - 5, y1 - 2, x1 - 4, y1 - 1, texthover )" 11="fill( x0, y0 + 2, x0 + 1, y0 + 3, texthover )" 12="fill( x1 - 4, y0 + 2, x1 - 3, y0 + 3, texthover )" 13="fill( x0, y1 - 2, x0 + 1, y1 - 1, texthover )" 14="fill( x1 - 4, y1 - 2, x1 - 3, y1 - 1, texthover )" 15="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, texthover )" 16="fill( x1 - 5, y0 + 1, x1 - 4, y0 + 2, texthover )" 17="fill( x0 + 1, y1 - 1, x0 + 2, y1, texthover )" 18="fill( x1 - 5, y1 - 1, x1 - 4, y1, texthover )" } } }

P a g e | 47

Result:

Hover:

14. Let’s finish changing the detailed view of our game library.

First, I’ll define lots of colors:

detailtxt1="255 0 255 255" detailtxt2="194 0 0 255" detailtxt3="255 167 220 255" detailtxt1trans="255 0 255 160" detailtxt2trans="194 0 0 160" detailtxt3trans="255 167 220 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, let’s apply them (in steam.styles):

GameDetailsBlueTransparent=detailtxt1trans GameDetailsGreenTransparent=detailtxt2trans GameDetailsRedTransparent=detailtxt3trans GameDetailsBlue=detailtxt1 GameDetailsGreen=detailtxt2 GameDetailsRed=detailtxt3

As for applying the remaining 2 colors, we’re gonna have to open

other files.

Let’s 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, let’s 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 // single pixel fills in the corners 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:

Let’s add a few features, I’m mainly talking about the news section.

Open gamespage_details_news_item.layout:

newsitem_body { textcolor="Label" selectedtextcolor=txtpinkbright render_bg {} font-size=15 font-family=basefont } "newsitem_body url" { textcolor=txtpinkdark font-size=15 font-style="underline" selectedtextcolor=txtpinkbright } "newsitem_body url:hover" { font-size=15 font-style=underline textcolor=ultrapink2 selectedtextcolor=txtpinkbright } "newsitem_body bold" { font-weight=1000 textcolor="Label" selectedtextcolor=txtpinkbright } more_link { font-size=15 font-style="underline" font-weight=400 font-family=basefont textcolor=menuborder selectedtextcolor=txtpinkbright } more_link:hover { font-style="underline" textcolor=ultrapink1 }

Now the news section looks way better:

P a g e | 52

Hover Colors:

Selected text:

P a g e | 53

Now, let’s change the game list on the left. Mainly the highlight

colors and mod/not installed game colors. Let’s do it:

I’ll 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 selectedtextcolor=gameunin2 } "GameItem_Installed" { textcolor="text" selectedtextcolor="white" } "GameItem_Installed:hover" { textcolor="white" selectedtextcolor="white" } "GameItem_Shortcut" { textcolor=gameunin1 selectedtextcolor=gameunin2 } "GameItem_Shortcut:hover" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Mod" { textcolor=gameunin1 selectedtextcolor=gameunin2 } "GameItem_Mod:hover" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Updating" {

P a g e | 54

textcolor=gameunin1 selectedtextcolor=gameunin2 } "GameItem_Updating:hover" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Updating:selected" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Decrypting" { textcolor=gameunin1 selectedtextcolor=gameunin2 } "GameItem_Decrypting:hover" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Decrypting:selected" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Syncing" { textcolor=gameunin1 selectedtextcolor=gameunin2 } "GameItem_Syncing:hover" { textcolor=gameunin2 selectedtextcolor=gameunin2 } "GameItem_Syncing:selected" { textcolor=gameunin2 selectedtextcolor=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 font-style="uppercase" 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:

16. Let’s change the scrollbar next. I’ll define new colors:

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 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: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 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.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" 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 2="fill( x0 + 3, y1 - 3, x1 - 5, y1 - 2, scrolllight )" // bottom } } ScrollBarButton.down:disabled { inset="-2 0 0 0" image="graphics/icon_down_hover" 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.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 1="fill( x0 + 3, y0 + 4, x1 - 1, y0 + 5, scrolldark )" // top 2="fill( x0 + 3, y1 - 3, x1 - 1, y1 - 2, scrolldark )" // bottom } } 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 1="fill( x0 + 3, y0 + 4, x1 - 1, y0 + 5, scrolllight )" // top 2="fill( x0 + 3, y1 - 3, x1 - 1, y1 - 2, scrolllight )" // bottom } }

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 1="fill( x0 + 1, y0 + 4, x1 - 2, y0 + 5, scrolldark )" // top 2="fill( x0 + 1, y1 - 3, x1 - 2, y1 - 2, scrolldark )" // bottom } } 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 1="fill( x0 + 1, y0 + 4, x1 - 2, y0 + 5, scrolllight )" // top 2="fill( x0 + 1, y1 - 3, x1 - 2, y1 - 2, scrolllight )" // bottom } } 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 1="fill( x0 + 3, y0 + 5, x1 - 5, y0 + 6, scrolldark )" // top 2="fill( x0 + 3, y1 - 5, x1 - 5, y1 - 4, scrolldark )" // bottom } } "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 1="fill( x0 + 3, y0 + 5, x1 - 5, y0 + 6, scrolllight )" // top 2="fill( x0 + 3, y1 - 5, x1 - 5, y1 - 4, scrolllight )" // bottom } } "ScrollBarHandle:active" { image="graphics/icon_scroll_handle_over" render_bg { // center fill 0="fill( x0 + 2, y0 + 6, x1 - 4, y1 - 5, scrolllight )"

P a g e | 60

// lines around 1="fill( x0 + 3, y0 + 5, x1 - 5, y0 + 6, scrolllight )" // top 2="fill( x0 + 3, y1 - 5, x1 - 5, y1 - 4, scrolllight )" // bottom } } "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 1="fill( x0 + 3, y0 + 5, x1 - 2, y0 + 6, scrolldark )" // top 2="fill( x0 + 3, y1 - 3, x1 - 2, y1 - 2, scrolldark )" // bottom } } "SliderHoriz:hover" { image="graphics/icon_scroll_handle_over_horiz" render { // center fill 0="fill( x0 + 2, y0 + 6, x1 - 1, y1 - 3, scrolllight )" // lines around 1="fill( x0 + 3, y0 + 5, x1 - 2, y0 + 6, scrolllight )" // top 2="fill( x0 + 3, y1 - 3, x1 - 2, y1 - 2, scrolllight )" // bottom } } "SliderHoriz:active" { image="graphics/icon_scroll_handle_over_horiz" render { // center fill 0="fill( x0 + 2, y0 + 6, x1 - 1, y1 - 3, scrolllight )" // lines around 1="fill( x0 + 3, y0 + 5, x1 - 2, y0 + 6, scrolllight )" // top 2="fill( x0 + 3, y1 - 3, x1 - 2, y1 - 2, scrolllight )" // bottom } } 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

I’ve changed buttonborderdisabled color already, so I left it.

Result:

17. Now, let’s 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 5="fill( x0 + 12, y0 + 3, x0 + 13, y0 + 4, ultrapink2 )" 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, let’s fix this problem in games list view:

Open steam.styles and look for this:

ListPanelSectionHeader { inset="2 0 0 0" textcolor=label font-style="uppercase" 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. Let’s 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 )" // single pixel fills in the corners 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 { //gradient to obscure content at top of scrolling region 1="gradient( x0+1, y0, x1-1, y0 + 16, dialogbg, none )" //gradient to obscure content at bottom of scrolling region 2="gradient( x0+1, y1 - 16, x1-1, y1-2, none, dialogbg )" // single pixel fills in the corners 6="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled )" //UL 7="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled )" //UR 8="fill( x0 + 1, y1 - 3, x0 + 2, y1 - 2, ButtonBorderDisabled )" 9="fill( x1 - 2, y1 - 3, x1 - 1, y1 - 2, ButtonBorderDisabled )" } 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" { font-family=basefont bgcolor="none" font-size=15 font-weight=400 textcolor="Text" selectedtextcolor="textselected" selectedbgcolor="Focus" shadowtextcolor="TextDisabled" inset="0 -1 1 1" render_bg { // background gradient 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 // single pixel fills in the corners 7="fill( x0 + 2, y0 + 1, x0 + 3, y0 + 2, ButtonBorderDisabled )" 8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" 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. Let’s change the DLC/CDkey viewing panel (screenshot below).

Open steam.styles:

"Page ListPanel" { font-family=basefont font-size=14 font-weight=400 textcolor="Text2" selectedtextcolor="TextSelected" selectedbgcolor="Focus" 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 )" 2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, darkerdialog, 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 // single pixel fills in the corners

P a g e | 67

7="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )" 8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" } }

This is the result and what I was talking about:

(chose dark color again)

21. We’re done with the library views. Now, let’s work on

friendslist.

First, I’d like to remove this background:

Open steam.styles:

CFriendsListSectionHeader { bgcolor=none font-family=basefont 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. We’re 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-family=basefont font-size=14 font-weight=400 textcolor="Text" selectedtextcolor="TextSelected" selectedbgcolor="Focus" shadowtextcolor="TextDisabled" // the color of disabled line items render { //gradient to obscure content at top of scrolling region 0="fill( x0+2, y0, x1, y0 + 2, dialogbg )" 1="gradient( x0+2, y0+2, x1, y0 + 12, dialogbg, none )" //gradient to obscure content at bottom of scrolling region 2="gradient( x0+1, y1 - 18, x1, y1-3, none, almostblack )" 3="fill( x0+1, y1 - 4, x1, y1-1, almostblack )" } render_bg { // background gradient 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 (I’ll 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-family=basefont font-size=10 font-weight=400 textcolor="label" font-style=uppercase }

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, let’s make a few adjustments to friend/group chat.

Open steam.styles and look for this:

ListPanel { bgcolor=none font-family=basefont font-size=14 font-weight=400 textcolor="text2" selectedtextcolor="TextSelected" selectedbgcolor="Focus" shadowtextcolor="TextDisabled" // the color of disabled line items inset="0 -1 1 1" render { } render_bg { // background gradient 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 2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )" // bottom 3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderDisabled )" // left 4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderDisabled )" // right // single pixel fills in the corners 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 )" } }

Mind you, the above chat border is missing, but I added it with the underlined code line.

Result:

P a g e | 71

Next, let’s change the offline/online/ingame colors.

I’ll be defining 3 colors again and assigning them like this (steam.styles):

// Friends List colors Friends.InGameColor friendingame Friends.OnlineColor friendonline Friends.OfflineColor friendoffline

Now, what’s 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 // background color of highlighted friends

23. 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 // single pixel fills in the corners

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 // single pixel fills in the corners 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 it’s own share of buttons, so

let’s change them.

P a g e | 73

Open downloadsummarypanel.layout:

PauseButton { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )" } } PauseButton:Hover { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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

P a g e | 74

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 )" } } ResumeButton { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_install )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )" } } ResumeButton:Hover { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render {

P a g e | 75

1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_install_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style="uppercase" bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )"

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-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 0="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" 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 )" } } DetailsLaunchButton:Disabled { inset="23 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="LabelDisabled" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_play )" } render_bg { // background fill 0="fill( x0 + 1, y0 + 1, x1 - 1, y1 - 1, buttonfacedisabled )" // lines around 1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ButtonBorderDisabled )" // top 2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ButtonBorderDisabled )" // bottom

P a g e | 77

3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ButtonBorderDisabled )" // left 4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ButtonBorderDisabled )" // right 5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )" 6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" 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 )" } } SmPauseButton { inset="30 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render_bg { 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark)" // lines around 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 )" } render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause )" } } SmPauseButton:Hover { inset="30 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_pause_hover )" }

P a g e | 78

render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 )" } } SmResumeButton { inset="30 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render_bg { 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )" } 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-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_install_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 )" } } SmRemoveButton { inset="30 0 0 0" font-family=basefont font-size=16 font-weight=400 textcolor="Text" font-style=uppercase bgcolor=none render_bg { 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btndark, btndark )" // lines around 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 )"

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-family=basefont font-size=16 font-weight=400 textcolor="TextHover" font-style=uppercase bgcolor=none render { 1="image( x0 + 6, y0 + 4, x1, y1, graphics/icon_close_hover )" } render_bg { // background fill 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, btnlight, btnlight )" // 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 so far:

P a g e | 81

I haven’t changed anything about the disabled state of one button.

Anyways, now I’d 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, let’s make that text more readable. Open

downloadsummarypanel.layout again: bigtextlabel { font-family=basefont font-size=18 font-style="uppercase" textcolor=ultrapink2 }

Next, let’s change the download graph (the remaining black background). I’ll 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 // single pixel fills in the corners 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" font-style="uppercase" 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 that’s left is to change slim progressbar. One of it’s colors

anyway. Open appdownloadpanel.layout again:

SlimProgressBar { render_bg { 0="fill( x0, y0, x1, y1, btnlight )" }

Unfortunately, this doesn’t change the same progressbar below, so let’s change it as well. Open uistatuspanel.layout:

SlimProgressBar { render_bg { 0="fill( x0, y0, x1, y1, btnlight )" }

Final result:

24. Now let’s 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, let’s change the screenshots menu.

Open screenshotmanager.layout:

P a g e | 85

ThumbnailSelected { bgcolor=txtpinkbright render { // lines around 1="fill( x0 + 9, y0 + 2, x0 + 10, y1 + 1, ultrapink1 )" //left 2="fill( x1 + 9, y0 + 2, x1 + 10, y1 + 1, ultrapink1 )" //right 3="fill( x0 + 9, y0 + 2, x1 + 10, y0 + 3, ultrapink1 )" //top 4="fill( x0 + 9, y1 + 1, x1 + 10, y1 + 2, ultrapink1 )" //btm } } publishcaption { textcolor=ultrapink2 font-size=17 inset=2 font-style="italic" } publishcaptionprompt { textcolor=ultrapink1 } WrapPanel { inset="10 2 10 2" bgcolor="none" render_bg { // background gradient 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 // single pixel fills in the corners 6="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled )" //UL 7="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled )" //UR 8="fill( x0 + 1, y1 - 3, x0 + 2, y1 - 2, ButtonBorderDisabled )" 9="fill( x1 - 2, y1 - 3, x1 - 1, y1 - 2, ButtonBorderDisabled )" } } ScreenshotLoadingThrobber { minimum-width=100 minimum-height=75 bgcolor=btnlight }

Result:

P a g e | 86

26. This time, let’s change the notification.

Open steam.styles and look for this:

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.

I’ll make such changes:

Notifications.PanelPosition "BottomLeft" Notifications.SlideDirection "Horizontal" Notifications.DisplayTime "9.0"

Now, it’s time to change the notification itself. I’ll add a frame and

make it transparent. First, let’s 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-family=basefont 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 // single pixel fills in the corners 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. What’s left to change, are ingame menu colors and a few minor fixes. Let’s 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)" 2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, darkerdialog, 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 // single pixel fills in the corners 7="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )" 8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" 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 )" } } CheckButtonList:scrollbar { inset="1 1 1 1" textcolor="text2" bgcolor=none render { //gradient to obscure content at top of scrolling region 0="gradient( x0+1, y0, x1+1, y0 + 6, dialogbg, none )" //gradient to obscure content at bottom of scrolling region 1="gradient( x0, y1 - 9, x1+1, y1-1, none, dialogbg )" } render_bg {

P a g e | 90

// 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 )" 2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, darkerdialog, 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 // single pixel fills in the corners 7="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )" 8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" 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 )" } } "Page 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)" 2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, darkerdialog, 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 // single pixel fills in the corners 7="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )" 8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" 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 )" } } "Page CheckButtonList:scrollbar" {

P a g e | 91

inset="1 1 1 1" textcolor="text2" bgcolor=none render { //gradient to obscure content at top of scrolling region 0="gradient( x0+1, y0, x1+1, y0 + 6, dialogbg, none )" //gradient to obscure content at bottom of scrolling region 1="gradient( x0, y1 - 9, x1+1, y1-1, none, dialogbg )" } 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 )" 2="gradient( x0 + 1, y0 + 1, x1 - 1, y0 + 30, darkerdialog, 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 // single pixel fills in the corners 7="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ButtonBorderDisabled )" 8="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ButtonBorderDisabled )" 9="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ButtonBorderDisabled )" 10="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ButtonBorderDisabled )" 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 )" }

The results of these changes:

P a g e | 92

29. Finally, let’s change one more glow on those menu buttons (screenshot below).

Open uinavigatorpanel.layout: CUINavButton:hover { textcolor="Text" font-style="outerglow,uppercase" font-outerglow-color=txtglow font-outerglow-offset=2 font-outerglow-filtersize=35 } CUINavButton:selected { textcolor="white" bgcolor=none font-style="outerglow,uppercase" font-outerglow-color=txtglow font-outerglow-offset=3 font-outerglow-filtersize=55 }

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 // background color of any selected menu or list item Focus2=menuselected2

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 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 }

ViewListButton:selected { bgcolor="none" render_bg={} image="graphics/icon_button_list_down" render_bg { // background 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, focus2, focus )"

P a g e | 94

// 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 }

Instead of focus/focus2, write your own color names (variables).

30. Now, there’s 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, it’s by randomly

modifying the already made ones.

This section is going to be like a TL;DR version of the guide.

Let’s make this quick then, if you open steam.styles located in Rider

theme skin directory, you’ll 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 detailtxt2trans="204 114 186 160"//detailsview text color detailtxt3trans="255 167 220 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 I’ve 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”

You’ll change the color of most of the text if you assign it like this:

Txtpink= Mycolor123

And so on.

Now you might be wondering ... What’s the catch?

It’s 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:

- It’s 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 something’s wrong and your color doesn’t appear the way it should

(unlikely, but you’ll 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, it’ll 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, you’ll 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