Professional Documents
Culture Documents
(Guide) How To Make A Steam Skin
(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.
P age |4
3.
Advanced FAQ
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"
P age |5
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"
P age |7
P age |8
P age |9
4.
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:
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.
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:
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:
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.
P a g e | 12
P a g e | 13
5.
Use of paint.net
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:
P a g e | 15
So as you slide it to the sides, the RGB values change, and so does the
color.
P a g e | 16
6.
-
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:
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:
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
And:
P a g e | 19
and change it with your preferred font. For example, you want to use
Tahoma font, then you write this:
basefont=Tahoma
P a g e | 20
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 )"
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
P a g e | 23
7. If we click on grid view, well see that theres one thing left
unchanged:
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"
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.
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 )"
}
}
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
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:
P a g e | 34
P a g e | 35
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
P a g e | 38
P a g e | 39
P a g e | 40
P a g e | 41
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.
P a g e | 44
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 )"
}
}
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.
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
P a g e | 48
CDetailsGameTitleHeaderPanel
{
bgcolor=detailbg1
}
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
}
Results:
P a g e | 50
15.
P a g e | 51
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
}
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"
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
}
P a g e | 55
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.
scrolldark="150 39 91 255"
scrolllight="196 51 118 255"
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
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
}
}
P a g e | 61
17.
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.
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
Result:
P a g e | 65
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.
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
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
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
}
P a g e | 70
22.
Mind you, the above chat border is missing, but I added it with the
underlined code line.
Result:
P a g e | 71
friendingame
friendonline
friendoffline
Now, whats left is to change the friends highlight color (when you
hover the cursor over one of your steam friends). Define the color
and assign it like this:
Focus3=friendshighlight
23.
// blue
P a g e | 72
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
P a g e | 75
P a g e | 76
P a g e | 77
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
none
Result so far:
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
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.
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 )"
//left
//right
//top
//btm
}
}
publishcaption
{
textcolor=ultrapink2
font-size=17
inset=2
font-style="italic"
}
publishcaptionprompt
{
textcolor=ultrapink1
}
WrapPanel
{
inset="10 2 10 2"
bgcolor="none"
render_bg {
// background gradient
0="gradient( x0+1, y0+1, x1-1, y1-2, chatpurple, chatpurple )"
1="gradient( x0+1, y0+1, x1-1, y0 + 31, chatpurple, chatpurple )"
// lines around
2="fill( x0, y0 + 1, x0 + 1, y1 - 3, ButtonBorderDisabled )" //left
3="fill( x1 - 1, y0 + 1, x1, y1 - 3, ButtonBorderDisabled )" //right
4="fill( x0 + 2, y0, x1 - 2, y0+1, ButtonBorderDisabled )" //top
5="fill( x0 + 2, y1 - 2, x1 - 2, y1 - 1, ButtonBorderDisabled )" //btm
// single pixel fills in the corners
6="fill( x0 + 1, y0, x0 + 2, y0 + 1, ButtonBorderDisabled )" //UL
7="fill( x1 - 2, y0, x1 - 1, y0 + 1, ButtonBorderDisabled )" //UR
8="fill( x0 + 1, y1 - 3, x0 + 2, y1 - 2, ButtonBorderDisabled )"
9="fill( x1 - 2, y1 - 3, x1 - 1, y1 - 2, ButtonBorderDisabled )"
}
}
ScreenshotLoadingThrobber
{
minimum-width=100
minimum-height=75
bgcolor=btnlight
}
Result:
P a g e | 86
26.
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:
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"
P a g e | 88
Notifications.PanelPosition
"BottomLeft"
detailsbox
{
render_bg
{
0="gradient( x0, y0, x1, y1, ingamepurple1, ingamepurple2 )"
}
}
Result:
28.
Now, for the finishing touches, change all these colors, with
your preferred ones:
ButtonFace=dialogpink2
ButtonFace2=dialogpink2 // for use in main client list panel column header, some
button states
ButtonFace3=dialogpink2 // button cornering pixels
ButtonFaceDisabled="none"
ButtonFaceHover=dialoghighlight /// hover!
ButtonFaceActive=dialoghighlight // not sure what this state is...
ButtonFaceFocus=dialoghighlight // keyboard focus
ButtonFaceActiveFocus=dialoghighlight // this is the default choice
ButtonBorder=ultrapink3
ButtonBorderPage=ultrapink3
P a g e | 89
ButtonBorderDisabled=menuborder
ButtonBorderDisabled2=menuborder //cornering pixels
ButtonBorderActive=ultrapink1
ButtonBorderFocus=ultrapink1
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 )"
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
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
}
P a g e | 95
P a g e | 96
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
P a g e | 97
8.
Just one simple trick. If you put a picture into the friendlist, itll
probably look lame, like this:
P a g e | 98
3. Result:
P a g e | 99
P a g e | 100
9.
Known bugs/errors
4. Result:
P a g e | 101