Colored bars guide

Use the code below, just change #000000 to any color you need (you can use any any color picker, don’t forget about #) and change 111111 in two places on the third line to the correct game app number. You can see the number by visiting the game’s page, for example http://store.steampowered.com/app/499520
If you need a black font, change color: #fff to color: #000 on the first line.

<div style="position: relative; min-height: 69px; padding-left: 1rem; background: #000000; color: #fff; text-shadow: 1px 1px 0 black;">
<div style="float: right;">
<a href="http://store.steampowered.com/app/111111/" target="_blank"><img src="http://cdn.akamai.steamstatic.com/steam/apps/111111/capsule_184x69.jpg" /></a>
</div>
<h2 style="margin-bottom: 0px; padding-top: 5px; ">Decent Game Name</h2>
<p style="font-size: 1rem;">100 hours of playtime, 1 of 1 achievements<br>
Positive reviews: 99%</p>
</div>

---

To use a blue/green/other left border (I mark my beaten/completed games by it), change the first line into one of those:

Blue (completed) border -
<div style="position: relative; min-height: 69px; padding-left: 1rem; background: #000; color: #fff; text-shadow: 1px 1px 0 black; border-left: 7px solid #5BC0DE;">

Green (beaten) border -
<div style="position: relative; min-height: 69px; padding-left: 1rem; background: #000; color: #fff; text-shadow: 1px 1px 0 black; border-left: 7px solid #5CB85C;">

Red (won't play) border -
<div style="position: relative; min-height: 69px; padding-left: 1rem; background: #000; color: #fff; text-shadow: 1px 1px 0 black; border-left: 7px solid #D9534F;">

Yellow (unfinished) border -
<div style="position: relative; min-height: 69px; padding-left: 1rem; background: #000; color: #fff; text-shadow: 1px 1px 0 black; border-left: 7px solid #F0AD4E;">

---

If you still want more, you can use gradients =) Notice that I’ve changed min-height below to 71px, and also added style=”margin: 1px;” after <img - this will create 1 pixel border around the game’s image, which could be useful for images with white background.

To use gradients, you must first choose any plain color (background: #000000;). It’s not strictly necessary, but some older browsers do not support gradients, so this color would be shown instead), and after that just add this - background: linear-gradient(to right, #000000, #123ABC);. You can use “to right”, “to left”, or even “to top”, “to bottom left” - this is the direction of the gradient; after that is the first and the second of gradient’s colors.

<div style="position: relative; min-height: 71px; padding-left: 1rem; background: #000000; background: linear-gradient(to right, #000000, #123ABC); color: #fff; text-shadow: 1px 1px 0 black;">
<div style="float: right;">
<a href="http://store.steampowered.com/app/292030/" target="_blank"><img style="margin: 1px;" src="http://cdn.akamai.steamstatic.com/steam/apps/292030/capsule_184x69.jpg" /></a>
</div>
<h2 style="margin-bottom: 0px; padding-top: 5px; ">The Best Game Ever</h2>
<p style="font-size: 1rem;">At least 999 hours of playtime<br>
Positive reviews: 99.9%</p>
</div>