[color=white;position: fixed; {LINK REMOVED}top:0px;;left:0px;background-image:url('https://wallpaperscraft.com/image/triangle_shape_dark_figure_88540_1920x1080.jpg');width:100%;height:100%;z-index:-1000; ][/color]
[color=white;position: relative;background-color:#47253a;z-index:-1000;padding:10vh 100vh 450vh 73vh;opacity:0.9;][/color]
http://steamcommunity.com/groups/SteamTricks
[{LINK REMOVED}color=white;position:fixed;left:1%;bottom:-315px;z-index:200;background-image:url('http://i.imgur.com/gPsfXjq.png');padding:200px;background-size:40vh;background-repeat: no-repeat]Credits Due[/color]
[color=Red]Translating[/color]
A Quick Note, We dont give permission to anyone to translate this guide, if you need translation open your browser and use the built in translator. i am aware this is not 100% correct translation, but is good enough for anyone to understand. Thank you

Welcome to the guide of Color Tag Exploits!

Right now you are thinking this is either the ugliest or most beautiful guide you've ever seen. However this isnt really meant to look pretty, its purely to showcase whats possible, and teach you how to do it. Your guide will be the pretty one!

The purpose of this guide's appearance is to showcase the abilities of this exploit.

http://steamcommunity.com/sharedfiles/filedetails/?id=736542512

This exploit allows Guide creators to manipulate steam guides in some of the craziest ways than we've ever been able to do before, with a small grasp on css, you'll be well on your way to making some of the greatest steam guides possible.

This guide will start simple but get more advanced. It's good to have before hand a knowledge of Basic CSS & HTML.

[color=Green]However![/color] if you are simply not looking to go this in depth and would rather a simple solution; Tags will be pre-made and added to the bottom of the guide for all sorts of different page edits! :)

Here is a basic introduction of how to use the Color tag normally:
http://steamcommunity.com/sharedfiles/filedetails/?id=693394614

In a nutshell

[color=#colorhex]Text you want colored[/color]

Preview: [color=#9C27B0]Text you want colored[/color]

This will create a <span> tag around the [color] tag to add the text color you wanted.

Exploiting The [color] tag - (CSS Properties)

when using [color] tag to change text color we can also sneak in CSS properties. By sneaking in CSS properties we can change and edit text outside what's normally possible.

Here is an very simple example of a CSS property we can add to the [color] tag to change the texts size:

font-size:30px;

[color=#colorhex;font-size:100px;]Text you want colored

Preview: [color=white;font-size:30px;]Text you want colored[/color]

How To Structure Your [color] Tags Properties

Each CSS property added to the tag should be structured as shown below:

>> Property:Value; <<
>> [color=#hexcolor;Property:Value;Property:Value;] <<

[color=#e5e500]NOTE[/color]: you can add as many properties as you please(go crazy). Mixing together certain properties can produce some of the craziest stuff. Like changing a backgorund, or permanant images on the screen as you scroll, or resized text with different fonts; maybe even a border around your text.

Below are a few of the most useful Sites for lists of CSS properties.

There are so many different properties and ways this exploit can be used that making a list of all of them would make this guide too long.

So for the sake of fixing that we are going to link a few sites where you can find huge lists of these CSS properties with explanations of what each one does.

[color=yellow]Not all properties work! but most do.[/color]

[color=yellow]NOTE[/color]: if you find a property that uses the charcter " in it, you will have to change these out for '
The CSS Property example i used for the site below uses this character that you need to change.

Site: {LINK REMOVED}http://www.w3schools.com/cssref/

On the left bar of this site you will see a long list of the properties names. Once clicked on you'll be greeted with its editable parametars and then an explanation of what it does.

[color=white]Example:[/color]

background-image: url("paper.gif");

Definition and Usage
The background-image property sets one or more background images for an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Site: {LINK REMOVED}http://www.blooberry.com/indexdot/css/propindex/all.htm

Slightly harder site to follow but with a little understanding, you can see how to use all the properties.

[color=white]Change Your Guide Background:[/color]

[color=white;position: fixed; {LINK REMOVED}top:0px;left:0px;background-image:url('https://wallpaperscraft.com/image/triangle_shape_dark_figure_88540_1920x1080.jpg');width:100%;height:100%;z-index:-1000; ][/color]

Using this tag you can change you're guide background, just change the link to your choice and enjoy.

[color=white]Change Text Size and font[/color]

[color=#9C27B0;font-size:235px;font-family:serif;]Hello![/color]

Simply change the size number and font name.

[color=white]Add a Permenant Hyperlinkable Image As You Scroll:[/color]

[{LINK REMOVED}url=http://steamcommunity.com/groups/SteamTricks][{LINK REMOVED}color=white;position:fixed;left:80%;bottom:-250px;z-index:200;background-image:url('http://i.imgur.com/AjNXOzl.jpg');padding:200px;background-size:35vh;background-repeat: no-repeat][/color][/url]

For this one you can change the Url at the begining of the tag to link wherever you like(or remove it, for no hyperlink). You can change url in the middle of the tag for a different image to be shown.
Changing the "left" and "bottom" values will allow you to change its position on the page

[color=white]Guide Sections Background:[/color]

[color=white;position: relative;background-color:#47253a;z-index:-1000;padding:10vh 100vh 450vh 73vh;opacity:0.9;][/color]

For this one you can change the hex color of the section background and opacity. the length needs to be changed to suit your guide, to do this just chnage the 450vh value.

[color=red]What We Have Made[/color]
I made that text horribly red for a reason lol. As you can see that by adding these properties together you can come up with some amazing tags. The most you'll need is basic knowledge of CSS/HTML, So we strongly encourge people that are interested in this to read the full guide and give it a go at making your own.

[color=hotpink]If this guide was helpful to you and enjoy the tags exploits, feel free to show off or share yours Here!, We would love to see what you can come up with!