[Guide] How to make a steam skin Contents:

1. Introduction (page 2) 2. Getting started FAQ (page 3) 3. Advanced FAQ (page 4) 4. Steam developer mode (page 9) 4.1. Making a batch file (page 11) 5. Use of paint.net (page 13) 6. Making of Rider theme skin (page 16) 7. Using already made skin, to make your own AKA TL;DR (page 95) 8. Tips and tricks (page 97) 9. Known bugs/errors (page 100)

P age |2

1.

Introduction

This guide was made to teach you, how to make steam skins. It might not teach you how to fully edit absolutely every aspect of the skin, but it will help you get started and, at the end, youll be able to make a skin with: most colors changed, font of your choice, image(s) of your choice.

P age |3

2.

Getting started FAQ

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

P age |4

3.

Advanced FAQ

Q: So I chose the colors/picture and came here. Now what? A: Good, now you need to define those colors. In RGB. (If you chose a picture, then that picture, of yours, surely has 2-3 dominant colors. Pick them). Q: How do I do that? How do I define those colors. A: First, steam has, some of them, defined already. Lets take a look at steam.styles file (open it with notepad):
steam.styles { colors { // colors section can include colors in "R G B A" form, or references to already defined colors; // it can also include just general settings controls can pull from for extra customization black="0 0 0 255" almostBlack="23 22 20 255" white="255 255 0 255" grey="158 153 149 255" none="0 0 0 0" yellow="255 255 0 255" offwhite="166 164 159 255"

Thats a piece of code located at the very top of the steam.styles file. You, of course, have noticed that by now. As you can see, its pretty easy to define your own. Lets look at the given parameters of one of the steams defined colors:
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, its important not to have 2 variables with the same name, regardless if they have different values.

P age |5

=23 22 20 255 the definition of a variable. In this case, the RGB and transparency values Take a look at this and compare the two definitions: =R G B T
The first number defines the value of red color, 2nd green, 3rd blue, t transparency.

All of the colors must have 4 numbers defining them and they must be separated by a single space. No exceptions. Furthermore, the first 3 numbers define the color itself, while the last number defines the colors transparency. Each of the 4 numbers must not exceed a maximum value of 255 and the lowest value of 0. Other than that, theres no restrictions. Its wise to keep transparency at 255 most of the time. Q: Okay, lets say I understand that. Now what? A: Make a comment (yes, a comment) and, right after, define your colors. It would be wise to make this comment just below the defined colors. The code should look like this, if done properly:
steam.styles { colors { // colors section can include colors in "R G B A" form, or references to already defined colors; // it can also include just general settings controls can pull from for extra customization black="0 0 0 255" 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 age |6

darkred="128 0 0 255" darkpurple="64 0 64 255" //my colors (this is a comment) pureyellow="255 255 0 255" pureblue="0 0 255 255" puregreen="0 255 0 255" darkyellow="220 220 0 255" darkeryellow="190 190 0 255" darkestyellow="160 160 0 255" darkerblue="0 0 150 255"

a few things to take a notice of:

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

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

P age |7

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

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

P age |8

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

Some colors appear to be changed already, from light gray to red. Thats all it takes. Q: Anything else? By the way, how would I know where and what should I change? A: Usually, I start working on the texture (clienttexture2.tga in graphics folder) before I start defining the colors in steam.styles file. As for the second question, you either need to use the steam developers mode (see next section) or follow the steps of my guide at section 6.

P age |9

4.

Steam developer mode

The only use of steam developer mode, is to find out which file holds a variable which you want to change, and in most cases, which variable it is. Unfortunately, it is not capable of telling you everything, but it certainly helps you get started. I wont give examples of how it fails, Ill just show you how to use it. So, assuming you are running steam in dev mode, press F6. This window should, then, appear:

Pressing F6 again, will make it go away. To make use of it, lets pretend that you want to change the view friends button (its colors or whatever):

P a g e | 10

Now, what you do next, is simply click on that button. If the VGUI editor (that window which appears when you press F6) was present (visible) during this, then its contents shouldve changed and should look like this (regardless of the skin which you are using):
P.S. Clicking back on VGUI editor window will not change its contents.

Lets discuss whats on the left first:

Thats the list of the variables. Only the first 2 matter, though. As in, only if you change the first two, will the color/etc of the view friends button change. So what you do, is ignore the rest and dont change them. On the right:

The files, which contain the variable. Meaning, if you type view_friends in the find bar, while having those files open, youll be able to find it in there. In other words, the variables view_friends and view_friends:hover are located in steamrootdialog.layout file. If you click on one of them in the VGUI editor, itll automatically open the file (in our current case either the steamrootdialog.layout or steam.styles). Unfortunately, it will not open the file, located in

P a g e | 11

your skin folder, instead, it will open the original (default one), which comes with steam install. In other words, youll have to open the corresponding files yourself as these are not the ones which you want to be changing, or think that youll be changing. Theres still some use for it, though. Lets pretend that you forgot which color you used here:

Press F6 and click on it. If done correctly:

Then look at the contents of VGUI editor:

Its safe to say that the color used there is defined as detailbg1. Unfortunately, this is all the use of the dev mode. Helps, but not nearly enough.

4.1. Making a batch file

This will make running steam in developers mode, very easy. Just do the following: 1. Open notepad. 2. Find out where the file steam.exe is located (we will need the full link). Copy the full link. In my case its: D:\programos\steam\steam.exe

P a g e | 12

3. Now, simply write this: start yourdirectory dev In my case: start D:\programos\steam\steam.exe dev 4. Save the file as txt. 5. Change the ending of the file to .bat. Name it steam_dev_mode or whatever else. 6. To test it, first, turn off steam, then double click the .bat file. 7. If done correctly, everything about your steam user interface will remain the same, except theres going to be a new tab, called console:

8. Thats it. You can continue skinning/playing games, etc. Nothing will change except that you can now use F6 to bring up the VGUI editor. If you dont like it for some reason, then you can turn off steam and run it from a regular shortcut. Everything will be back to what it once was, without the console and without the functionality of F6 button.

P a g e | 13

5.

Use of paint.net

Paint.net is a freeware image editing program. More info about it (download links etc) can be found here: http://www.getpaint.net/. This program allows you to pick colors very easily and write the RGB values, needed in steam.styles. Simply run it and look at the colors window (if its not visible, press F8, to make it appear):

Nothing special, until you press more button:

P a g e | 14

Now, what you see on the upper left corner is black color (no ****, eh?) and on the right, all the needed RGB numbers written for you. Transparency is also written on the lowest right corner. Lets pretend that you need 3 shades of purple color. Dark, medium, bright. Name your variables/colors in steam.styles first: Darkpurple= Mediumpurple= Brightpurple= Next, get the values by using the program:

As we can see, R=87, G=0, B=127, T=255. So the first color/variable can already be defined: Darkpurple=87 0 127 255 I suggest choosing the remaining ones, not by clicking on that colourful circle, but sliding this one (in our case, to the right):

P a g e | 15

So as you slide it to the sides, the RGB values change, and so does the color.

This way, we can easily define our colors.

P a g e | 16

6.
-

Making of Rider theme skin

Text in light blue is the name of the file where the change should take place, in other words, where the variable should be looked for/defined in etc Text in orange is the variable which you must find in said file Text in bold marks the changes which were/are made

1. At first its wise to decide on which colors you want to use on your skin. You will need RGB values of those colors. Use this website to get them: http://www.tayloredmktg.com/rgb/ Or just google instead. Or use paint.net. I pick my colors as I choose a proper render. This is what Im talking about:

Ill surely use pink and purple colors. P.S. If you like the original steam logo and just care about changing the colors/font, skip to step 3.

P a g e | 17

Ill replace piston.tga file with the render above (maintaining the same height/width as the original steam logo). 2. Next Ill be making a texture, to fit with the above render. The file is called clienttexture2.tga. Ill be making a replacement for it. Anyway, since its done:

We can now finally start making the skin. 3. Lets start by choosing the colors for text and overall look of the client (steam.styles). Here are the colors that Ive chosen so far:
txtpink="196 84 140 255" txtpinkbright="229 103 170 255" txtpinkdark="168 72 120 255" txtbackground="188 0 100 255" dialogpink1="73 5 64 255" dialogpink2="114 8 104 255" ultrapink1="255 0 135 255" ultrapink2="255 114 189 255"

txtpink colors will be the ones for text, while dialogpink for the client. Txtpink will be regular txt colors, txtpinkbright color of highlighted text, txtpinkdark color of disabled text, txtbackground background color of selected text, dialogpink1/2 colors of the client. About Ultrapink1/2 colors: I will change white color into one of these. I chose ultrapink2, cuz it looked better. Thing is, writing white=ultrapink2 will not work. Instead, we must put the same numbers (RGB and transparency) there. White color is used for highlighted text.

P a g e | 18

Now Ill apply them, like this (notice that white color will no longer be white):
white="255 114 189 255" Text=txtpink Text2=txtpink TextDisabled=txtpinkdark TextHover=txtpinkbright TextSelected=txtpinkbright TextentrySelected=white // color of any selected text TextSelectedBG=txtbackground Label=text Label2=text LabelDisabled=textdisabled LabelFocus=txtpinkbright DialogBG=dialogpink1 PropertySheetBG=dialogpink2

Thats about it, lets see the results:

And:

P a g e | 19

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

basefont="Arial"

and change it with your preferred font. For example, you want to use Tahoma font, then you write this:
basefont=Tahoma

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

P a g e | 20

5. Next, Id like to change the colors of pop up menu (youll understand what Im talking about from the screenshot). To do that, I come up with new colors and define them again:
menucolor="96 0 85 255" menuborder="188 0 103 255" menuselected="133 0 115 255"

After that, I apply them:

MenuBG1=menucolor //gradient colors MenuBG2=menucolor ButtonBorderDisabled=menuborder ButtonBorderDisabled2=menuborder //cornering pixels Focus=menuselected

Done. Lets see what weve got:

6. Now if you take a look at the skin, weve changed quite a lot of stuff. Unfortunately, to fully change everything, this will take A LOT more time. So lets fix a few things in this step instead of making further adjustments. First, Ill remove a part of that annoying bar, which, sort of, blocks my render. The thing is, that we have to open a different file to do that. Look for uinavigatorpanel.layout file in resource/layout directory. Open it with notepad. Search for grouper. The code looks like this:

P a g e | 21

grouper { bgcolor=none render_bg { // background fill 0="fill( x0 + 1, y0 + 1, x0 + 276, y1 - 1, dialogbg )" 1="fill( x0 + 279, y0 + 1, x1 - 1, y1 - 1, dialogbg )" // single pixel fills in the corners 5="fill( x0 + 1, y0 + 1, x0 + 2, y0 + 2, ClientBG )" 6="fill( x1 - 2, y0 + 1, x1 - 1, y0 + 2, ClientBG )" 7="fill( x0 + 1, y1 - 2, x0 + 2, y1 - 1, ClientBG )" 8="fill( x1 - 2, y1 - 2, x1 - 1, y1 - 1, ClientBG )" 9="fill( x0, y0 + 1, x0 + 1, y0 + 2, ClientBG )" 10="fill( x1 - 1, y0 + 1, x1, y0 + 2, ClientBG )" 11="fill( x0, y1 - 2, x0 + 1, y1 - 1, ClientBG )" 12="fill( x1 - 1, y1 - 2, x1, y1 - 1, ClientBG )" 13="fill( x0 + 1, y0, x0 + 2, y0 + 1, ClientBG )" 14="fill( x1 - 2, y0, x1 - 1, y0 + 1, ClientBG )" 15="fill( x0 + 1, y1 - 1, x0 + 2, y1, ClientBG )" 16="fill( x1 - 2, y1 - 1, x1 - 1, y1, ClientBG )"

Anyway, I could just delete the part of the code, which I dont need, but Ill add comments instead, like this:
grouper { bgcolor=none render_bg { // background fill 0="fill( x0 + 1, y0 + 1, x0 + 276, y1 - 1, dialogbg )" //1="fill( x0 + 279, y0 + 1, x1 - 1, y1 - 1, dialogbg )" // 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 youd like your own color, define and use it instead. For the search text, open uinavigatorpanel.layout again. Look for this, and change it:
LibrarySearch:empty { font-style=italic textcolor=text

I prefer it to be as bright as other text, again. Finally, for the view, open uinavigatorpanel.layout and look for this piece of code:
NavLabelView [!$OSX] { font-family=basefont font-size=14 font-weight=400 textcolor=text font-style=uppercase padding-left=0 } NavLabelView [$OSX] { font-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, well see that theres one thing left unchanged:

Lets 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 thats not the point, now that you know how to change the color) 8. Now lets fix the all games button. Open uinavigatorpanel.layout again and look for this:
NavLabel2 [!$OSX] { font-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" }

Ill be leaving the white color alone, Ill 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 lets make the account text more visible, add a glow even. Well need a new color for the glow, so Ill define it:
txtglow="198 0 53 255"

Now look for this:

URLLabelSimple { textcolor="labelfocus" bgcolor="none" font-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" }

Ill 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 lets change the button colors.

Ill define a few colors again:

btndark="130 0 75 255" btnlight="188 0 110 255"

To do this, find and open gamespage_details_subheader.layout file (resource/layout folder). Since theres a lot of code, Ill just post the changes Ive made (in bold):
DetailsButton { inset="-3 0 0 0" font-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: - Weve changed the colors of just a few buttons, not all - I didnt want gradient colors, so I simply chose to use one color, you can define more colors and use them in the gradient - Button borders have the same color as the text within, if you dont like that, define your own colors and use them instead 11. Time to change more buttons. This time, ones which are found in the settings tab. Ill define an extra color since these buttons do have more states:
btnactive="211 0 0 255"

This time, open steam.styles file again. Look for this (the principle will remain the same and I will only display the changes that Ive made due to too much code):
Button { font-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 )" } }

Lets look at the results and discuss:

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

The buttons displayed are in disabled state. 12. Moving on, theres one button left unchanged in the settings tab. This one:

P a g e | 39

Its referred to as ComboBox in the steam.styles file. Ill just make the changes and display them:
ComboBox { inset="3 0 0 0" textcolor="Text" font-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, well have to open lots of different files. Lets start with opening gamespage_details_achievements_locked.layout We change the code like this:
achievementlabelmore { inset="-3 0 0 0" font-size=18 textcolor="Text" 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 didnt only change the color there. Next, open gamespage_details_friends_list.layout and do the same:
friendlabelmore { inset="-3 0 0 0" font-size=18

P a g e | 45

textcolor="Text" 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.

Lets finish changing the detailed view of our game library.

First, Ill define lots of colors:

detailtxt1="255 0 255 255" detailtxt2="194 0 0 255" detailtxt3="255 167 220 255" detailtxt1trans="255 0 255 160" 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, lets apply them (in steam.styles):
GameDetailsBlueTransparent=detailtxt1trans GameDetailsGreenTransparent=detailtxt2trans GameDetailsRedTransparent=detailtxt3trans GameDetailsBlue=detailtxt1 GameDetailsGreen=detailtxt2 GameDetailsRed=detailtxt3

As for applying the remaining 2 colors, were gonna have to open other files. Lets start with gamespage_details_gametitleheader.layout:

P a g e | 48

CDetailsGameTitleHeaderPanel { bgcolor=detailbg1 }

Next, open gamespage_details_subheader.layout:

CDetailsGameSubHeaderPanel { bgcolor=detailbg2 }

Next, gamespage_details_friends.layout:
friendsdetails { bgcolor=detailbg1 }

Next, gamespage_details_achievements.layout:
achievementsdetails { bgcolor=detailbg2 }

Next, gamespage_details_news.layout:
newsdetails { bgcolor=detailbg1 }

Next, gamespage_details_screenshots.layout:
screenshotsdetails { bgcolor=detailbg2 }

Next, gamespage_details_nonsteam.layout:
nonsteamdetails {

P a g e | 49

bgcolor=detailbg1 }

Finally, open gamespage_details_welcome.layout:

nonsteamdetails { bgcolor=detailbg2 }

Results:

P a g e | 50

15.

Time for the finishing touches, regarding the detailed view.

First, lets change the border colors of the achievement bar. Open gamespage_details_achievements_most_recent.layout:
progressbackground { bgcolor=none render_bg { // lines around 1="fill( x0 + 2, y0, x1 - 2, y0 + 1, ultrapink1 )" // top 2="fill( x0 + 2, y1 - 1, x1 - 2, y1, ultrapink1 )" // bottom 3="fill( x0, y0 + 2, x0 + 1, y1 - 2, ultrapink1 )" // left 4="fill( x1 - 1, y0 + 2, x1, y1 - 2, ultrapink1 )" // right // 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:

Lets add a few features, Im mainly talking about the news section. Open gamespage_details_news_item.layout:
newsitem_body { textcolor="Label" selectedtextcolor=txtpinkbright render_bg {} font-size=15 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, lets change the game list on the left. Mainly the highlight colors and mod/not installed game colors. Lets do it: Ill define 2 more colors:
gameunin1="150 46 33 255" gameunin2="220 46 33 255"

Look for this in steam.styles:

"GameItem_Uninstalled" { textcolor=gameunin1 selectedtextcolor=gameunin2 } "GameItem_Uninstalled:hover" { textcolor=gameunin2 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.

Lets change the scrollbar next. Ill 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

Ive changed buttonborderdisabled color already, so I left it. Result:

17.

Now, lets change the button colors in grid view.

Open gamespage_grid_chrome.layout:
ChromeBorderItem { render { // bgfill 0="gradient( x0 + 12 , y1 - 47, x1 - 18, y1 - 20, btnlight, btndark )" // lines around 1="fill( x0 + 13, y0 + 2, x1 - 19, y0 + 3, ultrapink2 )" // top 2="fill( x0 + 13, y1 - 20, x1 - 19, y1 - 19, ultrapink2 )" // bottom 3="fill( x1 - 18 , y1 - 46, x1 - 17, y1 - 21, ultrapink2 )" //right 4="fill( x0 + 11, y1 - 46, x0 + 12, y1 - 21, ultrapink2 )" //left 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, lets 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. Lets start with detailed view. I defined new color for this:

P a g e | 63

darkerdialog="45 3 40 255"

Open steamrootdialog_gamespage_details.layout:
CGamesPage_Details { bgcolor="none" inset="0 0 0 1" render { // lines around, to fix a bug 0="fill( x0 + 3, y0, x1 - 2, y0+1, ButtonBorderDisabled )" // top //gradient to obscure content at top of scrolling region 1="gradient( x0+2, y0 + 1, x1-1, y0 + 16, dialogbg, none )" //gradient to obscure content at bottom of scrolling region 2="gradient( x0+2, y1 - 16, x1-1, y1-1, none, dialogbg )" // 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. Lets 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. Were done with the library views. Now, lets work on friendslist. First, Id like to remove this background:

Open steam.styles:
CFriendsListSectionHeader { bgcolor=none font-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. Were gonna add a custom image and background color to our friendslist. First, find a piece of code that looks like this (steam.styles):
"CFriendsDialog SectionedListPanelInterior" { bgcolor=none font-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 (Ill include the other code to show you how to do this correctly):
SectionedListPanelCollapser:selected:hover { image="graphics/icon_expand_over" }

P a g e | 69

SectionedListPanelInterior { bgcolor=friendpanelfill render { 0="image( x0, y0, x1, y1, graphics/rider )" } } Slider { font-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, lets 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, lets change the offline/online/ingame colors. Ill be defining 3 colors again and assigning them like this (steam.styles):
// Friends List colors Friends.InGameColor Friends.OnlineColor Friends.OfflineColor friendingame friendonline friendoffline

Now, whats left is to change the friends highlight color (when you hover the cursor over one of your steam friends). Define the color and assign it like this:
Focus3=friendshighlight // 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 its own share of buttons, so lets 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 havent changed anything about the disabled state of one button. Anyways, now Id like to remove those black backgrounds completely. Open the same file (appdownloadpanel.layout):
panelBgColorActive { bgcolor= }

none

Next, open downloadsummarypanel.layout:

CDownloadSummaryPanel { bgcolor=none inset="0 0 0 0" }

Result so far:

Now, lets make that text more readable. Open downloadsummarypanel.layout again:
bigtextlabel { font-family=basefont font-size=18 font-style="uppercase" textcolor=ultrapink2 }

Next, lets change the download graph (the remaining black background). Ill define a new color for that:
downloadbg="91 0 39 255"

Open appdownloadpanel.layout:

P a g e | 82

infoGraphic { bgcolor "none" textcolor white inset="0 3 3 3" render_bg { // background fill 0="fill( x0, y0 + 2, x1 - 1, y1 - 1, downloadbg )" // lines around 1="fill( x0, y0 + 1, x1 - 2, y0 + 2, none )" // top 2="fill( x0 + 1, y1 - 1, x1 - 1, y1, none )" // bottom 3="fill( x0 - 1, y0 + 2, x0, y1 - 2, none )" // left 4="fill( x1 - 1, y0 + 1, x1, y1 - 1, none )" // right // 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 thats left is to change slim progressbar. One of its colors anyway. Open appdownloadpanel.layout again:
SlimProgressBar { render_bg { 0="fill( x0, y0, x1, y1, btnlight )" }

Unfortunately, this doesnt change the same progressbar below, so lets change it as well. Open uistatuspanel.layout:
SlimProgressBar { render_bg { 0="fill( x0, y0, x1, y1, btnlight )" }

Final result:

24. Now lets change the frame colors, of menu windows. To do that, open steam.styles and look for this:
Frame { bgcolor="DialogBG" render { 0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, dialogbg, ultrapink1 )" //bottom 1="gradient( x1 - 1, y0, x1, y1, darkpurple1, ultrapink1 )" //right 2="gradient_horizontal( x0, y0, x1, y0 + 1, darkpurple2, darkpurple1 )" //top 3="gradient( x0, y0, x0 + 1, y1, darkpurple2, dialogbg )" //left } }

P a g e | 84

Frame:FrameFocus { bgcolor="DialogBG" render { 0="gradient_horizontal( x0, y1 - 1, x1 + 1, y1, dialogbg, ultrapink1 )" //bottom 1="gradient( x1 - 1, y0, x1, y1, darkpurple1, ultrapink1 )" //right 2="gradient_horizontal( x0, y0, x1, y0 + 1, darkpurple2, darkpurple1 )" //top 3="gradient( x0, y0, x0 + 1, y1, darkpurple2, dialogbg )" //left } }

Result:

25.

Next, lets change the screenshots menu.

Open screenshotmanager.layout:

P a g e | 85

ThumbnailSelected { bgcolor=txtpinkbright render { // lines around 1="fill( x0 + 9, y0 + 2, x0 + 10, y1 + 1, ultrapink1 )" 2="fill( x1 + 9, y0 + 2, x1 + 10, y1 + 1, ultrapink1 )" 3="fill( x0 + 9, y0 + 2, x1 + 10, y0 + 3, ultrapink1 )" 4="fill( x0 + 9, y1 + 1, x1 + 10, y1 + 2, ultrapink1 )" } } 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 }

//left //right //top //btm

Result:

P a g e | 86

26.

This time, lets 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. Ill make such changes:
Notifications.PanelPosition "BottomLeft" Notifications.SlideDirection "Horizontal" Notifications.DisplayTime "9.0"

Now, its time to change the notification itself. Ill add a frame and make it transparent. First, lets define 2 transparent colors:
noticepurple1="91 0 79 200" noticepurple2="61 0 53 180"

Next, in steam.styles:

P a g e | 87

Notification { font-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. Whats left to change, are ingame menu colors and a few minor fixes. Lets change the ingame menu first. Define 2 more colors for said menu:
ingamepurple1="76 0 66 255" ingamepurple2="53 0 45 255"

Next, open gameoverlay.styles:

P a g e | 88

Notifications.PanelPosition
detailsbox {

"BottomLeft"

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

Or look for this piece of code in uinavigatorpanel.layout:

ViewDetailButton:selected { bgcolor="none" render_bg={} image="graphics/icon_button_detail_down" render_bg { // background 0="gradient( x0 + 1, y0 + 1, x1 - 1, y1 - 1, focus2, focus )" // lines around 1="fill( x0 + 1, y0, x1 - 1, y0 + 1, focus2 )" // top 2="fill( x0 + 1, y1 - 1, x1 - 1, y1, focus )" // bottom 3="gradient( x0, y0 + 1, x0 + 1, y1 - 1, focus2, focus )" // left 4="gradient( x1 - 1, y0 + 1, x1, y1 - 1, focus2, focus )" // right } ViewGridButton:selected { bgcolor="none" render_bg={} image="graphics/icon_button_grid_down" render_bg { // background 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, theres technically nothing left to change. Except for the various icons, but this concludes all the coding.

P a g e | 95

7. Using already made skin, to make your own AKA TL;DR

This is exactly how I learned making my own skin, its by randomly modifying the already made ones. This section is going to be like a TL;DR version of the guide. Lets make this quick then, if you open steam.styles located in Rider theme skin directory, youll come across this:
//spalvos txtpink="211 91 151 255" //text color txtpinkbright="239 103 171 255" //text color txtpinkdark="183 78 131 255" //text color txtbackground="188 0 100 255" //selected text background color dialogpink1="73 5 64 255" //menu color 1 dialogpink2="114 8 104 255" //menu color 2 dialoghighlight="145 11 134 255" // ??? ultrapink1="255 117 227 255" // notification and various borders ultrapink2="255 114 189 255" // notification and various borders ultrapink3="219 0 116 255"// notification and various borders menucolor="96 0 85 255" //popup menu color menuborder="137 63 122 255" //popup menu color menuselected="133 0 115 255" //popup menu color menuselected2="150 0 130 255" //popup menu color txtglow="183 130 173 255" //glow color btndark="100 0 45 255" //button color btnlight="158 0 80 255" //button color btnactive="183 113 169 255" //button color detailtxt1="255 0 255 255" //detailsview text color detailtxt2="204 114 186 255" //detailsview text color detailtxt3="255 167 220 255"//detailsview text color detailtxt1trans="255 0 255 160"//detailsview text color 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 Ive used. With the way I assigned them in every file, all you have to do is make same amount of your own colors, and assign them on top of these. For example, you have defined a new color:
Mycolor123=25 26 54 255

Youll change the color of most of the text if you assign it like this:
Txtpink= Mycolor123

And so on. Now you might be wondering ... Whats the catch? Its that you no longer need to search for some files in layout folder or whatever. All you basicly need to do is change the content of a single file steam.styles. Unfortunately: - Its going to be tricky, but faster than following the whole guide - Not likely going to work with any other user made skins, except with this one (Rider theme) If somethings wrong and your color doesnt appear the way it should (unlikely, but youll never know), then copy the RGBT values, instead of the color/variable name. Like this:
Txtpink=25 26 54 255

The result will stay same.

P a g e | 97

8.

Tips and tricks

Just one simple trick. If you put a picture into the friendlist, itll probably look lame, like this:

(no, this is not photoshop or whatever).

P a g e | 98

To make it, so that your friends/groups would be visible, you have to reduce transparency of this image. You can do that with paint.net: 1. Open the image in paint.net and press properties:

2. Reduce the opacity from 255 to 30-50 and press ok:

3. Result:

P a g e | 99

P a g e | 100

9.

Known bugs/errors

When changing piston.tga with your preferred image, youll surely come across this error:

The trick here is to reduce the contrast of said image. There is no designed amount by how much you should reduce it, though. You can do this with paint.net: 1. Open the said image in paint.net. 2. Go to Adjustments->Brightness/Contrast 3. I reduced it by 39 this time:

4. Result:

P a g e | 101