Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. - Antoine de Saint ExupéryAs content creators on TeamLiquid.net the topic of BBCode markup is something I feel is important to know in order to be able to create clean, robust, and professional looking content on this site. In my work on An Overview of Mouse Technology I gained a lot of valuable knowledge and experience on what we can and cannot do on TL to format our text and content, and felt that I should put it all in a place that everyone can refer to in order to format your threads with eloquence and skill. I know that TL already has a BBCode list Here, but it leaves out a few important considerations such as spacing, syntax, or some of the more unlisted features that I've had the sleuth out (I do understand the reason why some of these are left out).
Normally, as TL does not have a [noparse] tag and I don't have html privileges, I would not be able to show BBCode tags outside of code. There is however a workaround which includes any tag within the opening tag so that it is not parsed out as BBCode. See Combinations and Atypical Uses for a description. Also within the code example you may see a number of html line breaks <br/>. These tags are used to indicate where TL formats certain tags to have additional spacing before and afterwards, and are mentioned on a case by case basis.
[anchor]top A very useful tool for quick navigation, especially in guides with a lot of content, the anchor tag allows certain designated sections to be navigated to very quickly. The combination uses the url tag and the anchor tag to create a url link to an invisible anchor point in your document. Note that the entire Table of Contents for this document uses anchors for navigation.
[url=#link_text]URL Link[/url]
[anchor]link_text[/anchor][i]the tag/text are invisible, but points to a section in your document[/i]
the tag/text are invisible, but points to a section in your document
As a final note, when defining the link_text name for the anchor and url, it would be prudent to avoid using numbers as each post in the thread is assigned a number (which is anchored) which could look exactly like the anchor you additionally define, meaning that you could have more than one anchor for the same url link. For example, to create a url link to the first post all that is necessary is the format below as the anchor has already been defined:
[audio]top The audio tag is a very useful tool to link audio files from anywhere on the internet. Note that you will need the actual file location for this tag to work properly (e.g. http://www.../../../file_name.extension). The following is returned when using the audio tag. Please note that this is a html 5 tag, so not every browser will support this tag.
[audio]http://www.audio_file_url_location[/audio]
[b]top A remnant of older html specs, the bold tag is simply used to bold text. Note that in html the bold tag is deprecated and that you should use the <strong> tag instead when using this method. The following results from using the bold tag.
[b]Bold Text[/b]
Bold Text
[big]top The big tag is one of two elements used to change the size of text in your document, as can be seen with the headers of this thread. The following example uses a single big tag.
[big]Big Text[/big]
Big Text
Note that the big tag can be nested to create larger sized text than just with just a single tag, and can be used with other tags like [quote] to change the text size. The following text results when nesting big tags
[big][big][big][big][big]Nested Five Times[/big][/big][/big][/big][/big]
Nested Five Times
[blue]top Pretty self explanatory, it colors text blue.
[blue]Blue Text[/blue]
Blue Text
[center]top Center tags pretty much function how you would expect, they will center content within the tag. This is how centered text would look. Note that the center tag adds an additional <br/> at the end of the tag for space. In order to get your content below to be exactly next to the tag, you need to continue on the same line as the end tag.
[center]Centered Content (can be text, or images, etc...)[/center] <br/>
Centered Content (can be text, or images, etc...)
[code]top You've already seen what the code tag does. It prevents any BBCode from being parsed by the browser and uses a monotype font. Note that like the center tag, the code tag adds a <br/> at the end of the tag. Also note that you cannot nest code tags within code tags, as the first end tag will close the first code instance ([] replaced with <> to show nesting). Lastly, as the code tag does not have a scroll bar, long single lines of text will lengthen the thread window to disproportionate sizes, but only in the preview pane (seen in spoiler below).
If the text in the code tag is on a single line and is long enough, it will change the overall window size of the thread to a different size, but only in the preview pane (not 740px wide)
[date]top Date is pretty simple as dated text within this tag will be formatted to the viewers time zone.
[dblue]top Colors text a dark blue (current color of sidebar text and Terran icon)
[dblue]Dark Blue Text[/dblue]
Dark Blue Text
[embed]top Currently buggy and does not work with many methods, but when working properly should embed video content from other sites into TL seamlessly. See Post 102.
[hr]top The horizontal rule tag creates a line that can easily indicate sectional breaks in content. This tag does not have a end tag due to its nature, though it does not follow the proper formatting syntax, e.g. [hr/]. The following is returned when using the hr tag, you can see that the hr tag adds a line break at the end of the tag for spacing.
[hr] <br/>
[i]top The italics tag simply italicizes text within it. Note that like the bold tag, in html the [i] tag is deprecated and the emphasis tag <em> should be used.
[i]Italicized Text[/i]
Italicized Text
[img]top Using the image tag will take the url of an image and output it as the actual image, rather than the hyperlink. Note that the image tag can behave somewhat oddly depending on where the image is hosted. Sometimes the image will not resolve if the linkage is bad, or will be shown at its original size and will not be constrained by the thread window (736px). The first example shows the intended behavior, while the second instance shows an incorrect linkage and is a broken link as a result. The third example is of the original image size. While in the preview pane the image may resolve at its actual size, however when posted the image will most times be re-sized to fit the thread window (though not always, depends on the host) and will also be accompanied by a yellow bounding box in these cases. Additionally in this example, the image doesn't indicate that it is a link, but when clicked will direct the user to the original image. For this reason it is prudent to either use the TL image uploader (see below), or if the images are hosted elsewhere, to create a placeholder image that is the correct size.
It should be noted that the upload image process using imgur uploads an image, and automatically creates a placeholder image so that it is properly sized in the thread window. Note that this process resizes your image to 730px wide and not 736px to accommodate using images in spoiler tags (because of the added margin or padding). Additionally, because of the border-padding or margin in the css styling, images when used within spoilers should be a maximum of 727px so that the margin/padding is exactly the same on both sides of the image. We should also note that the second example below uses the url hyperlink from the upload image BBCode and not the image url, which ends up returning a broken link. See Combinations and Atypical Uses for more information.
[indent]top The indent tag works mostly as intended, indenting content by a certain amount (exactly 6 non-breaking spaces). Note that unfortunately the indent tag does not work properly as it does not have an end tag [/indent], and therefore you cannot indent sections of content by this method (only single lines of text or content).
[indent]Indented Text
Indented Text
[list] and [*]top A pretty standard addition, the list tag and accompanying list item tag indicate the beginning of a list, and items within the list. The list tag can be ordered or unordered, depending on if you declare it or not (the default behavior is unordered). Note that the list tag has a number of line breaks before and after for spacing. It should also be noted that the use of the list tag indents the content much in the same way as the indent tag, though the bullets will appear less indented.
<br/> [list] [*] list item [*] list item [*] list item[/list] <br/> <br/>
list item
list item
list item
<br/> [list=ordered] [*] list item [*] list item [*] list item[/list] <br/> <br/>
list item
list item
list item
Additionally, lists can be nested in order to create sub-lists for certain topics or items. Note that when lists are nested that the original spacing is overall maintained, and not additionally spaced. There is however one instance where an additional <br/> is added at the end of the list, and can be seen with the example below:
[list][*]primary list item [list] [*] secondary list item [*] secondary list item [list] [*] ternary list item [*] ternary list item[/list] [*] secondary list item [/list][/list]
primary list item
secondary list item
secondary list item
ternary list item
ternary list item
secondary list item
Finally, like the code tag, having too much text on a single line will change the width of the preview thread window if there are no spaces within the text. Of course this again is only in the preview pane, but is helpful in making proper styling decisions.
...................................................................................................................................................................................................................................................... however a single space with revert to the original behavior
[poll]top Due to the fact that you have to use the "Add Poll" tool to make a poll on TL.net this is a rather easy affair. If you say wanted to link a poll that is already in existence, all you would need is to know the number. Note that the poll tag does include a <br/> at the end for spacing.
[quote]top Text that is within quote tags are both indented and one size smaller than the default text position and size. The quote tag also has two horizontal lines demarcating the boundaries of the quote and are also accompanied by a <br/> at the end for spacing.
[s]top The strikethrough tag does exactly what it implies, as it adds a line through the text within the tag. Note that for html this tag has been deprecated and the delete tag <del> should be used.
[s]Text within the strikethrough tag[/s]
Text within the strikethrough tag
[small]top The small tag functions in the opposite way as the big tag, where text within is resolved at a smaller size.
[small]Small Text[/small]
Small Text
These tags like the big tag can also be nested, though they tend to get unhelpful at a much faster rate.
[small][small][small]Nested Three Times[/small][/small][/small]
Nested Three Times
[spoiler]top Using a spoiler tag creates a collapsible tag that can be of varying size, depending on how much content is contained in the spoiler. Spoiler tags can also have metadata within the tag itself demarcating sections, or hints at content, etc... Note that if this text is long enough that by mousing over the spoiler tag the entire text can be seen. As the floating text box for the full text only is visible for ~10 seconds only a certain amount of information should be included.
[spoiler=metadata text within the tag but not inside can be put here. If the text is long enough a popup text box will occur to reveal the whole text]A spoiler tag with metadata[/spoiler]
[time]top Much like the date tag, the time tag will format the time within the tag to the current viewers time zone.
[time]1800 PDT[/time]
1800 PDT
[tlpd]top Using the tlpd tag to link to the database can be relatively easy. Thanks to the button, you can both select specific text or the entire post, and tlpd-ize it. Note that when using this tag that some symbols will generally accompany the results, such as , , or . As a lesser visually obvious function, you can also right-click on the tlpd button to specifically chose which database it refers to. In formatting url locations, # symbols replace the / symbols for the most part, though maps for example have an additional identifier.
Finally, you can see that interestingly enough tlpd parsing is allowed within code tags, which is unlike any other BBCode tag (<> replaces [] to show the resultant formatting when using the tlpd function).
[u]top Another relatively simple tag, the underline tag will underline any text contained within it. Similarly with all of the other text formatting options, in html the underline tag is deprecated and has been replaced by CSS entirely when needed. I would strongly advise against using this tag, unless it is part of a header text as it can easily be confused with hyperlink text. If you do choose to use underlined text, be extra careful that your underlined text will not be confused as url text (simple edits like italics or colors can clearly demarcate these differences).
[u]Underlined Text[/u]
Underlined Text
[url]top The url tag functions much the way the anchor tag <a> in html works, and can be used as either an anchor point link, or as a hyperlink. When used as a hyperlink you can use a variety of content to represent the url link, including text and images.
[url=http://www.teamliquid.net]Item representing the hyperlink[/url]
It should also be noted that posting a raw hyperlink into a thread without the url tag still outputs as a url hyperlink, but you cannot style the text in any way if you wish to keep this functionality. We can easily see how trying to italicize the text negates the url behavior below:
[wiki]top Using the wiki tags will direct url's to specific Liquipedia pages and are accompanied by a wiki icon. It is important to note that capitalization is very important when using this tag as any incorrect use will result in a link to a page that has no data. If we wanted to link the Liquipedia main page, we could use the following format:
We can see however that if we don't capitalize properly, wiki links become invalid and will link to pages with no data. It is also not necessary to include the underscore symbol _ as this is automatically added if absent.
Additionally we can also use the wiki tag as a url, by indicating the url link, and then adding in the content representing that link. The following would be the use of an alternate text. Only the url information after ../starcraft/ is needed in these cases.
Finally, posting a Liquipedia link without BBCode will be automatically wiki-ized, though like the url function, adding any additional styling will negate this behavior.
Combinations and Atypical Usestop So a lot of the uses for the above tags are pretty obvious, however we can also use them in atypical ways, or combine them to produce some interesting effects. For instance, if we want to indent a section of text, we can use the list tag, and just not use any list item tags [*]. The following would be the result of this usage:
[list]The following section of text can be indented with the use of the list tag easily[/list]
The following section of text can be indented with the use of the list tag easily
Additionally, we can center this entire section, which will be additionally indented as well.
[center]The following section of text can be indented with the use of the list tag easily[/center]
The following section of text can be indented with the use of the list tag easily
[center][list]The following section of text can be indented with the use of the list tag easily[/list][/center]
The following section of text can be indented with the use of the list tag easily
We can also nest the list tag to indent all of this content even further if necessary.
[center][list][list]The following section of text can be indented with the use of the list tag easily[/list][/list][/center]
The following section of text can be indented with the use of the list tag easily
In the introduction we mentioned a workaround to create BBCode tags outside of code tags. The workaround involves using BBCode within the tag we are presenting to force the tag to not be parsed by the system. The following execution is one example of using the italics tag to produce this effect. Note that if you use this method that you must be extra careful with how and where your tags are nested/placed and make sure that they are closed properly, else you may produce a host of cascading errors.
[[i][/i]anchor]
[anchor]
As mentioned before, we can use the hr tag to create sectional breaks, however you can also use the hr tag to create other structural formats such as the following examples. In these cases as there is no content after each tag and is followed immediately by another [hr], the spacing ends up much tighter.
[hr][hr] [hr][hr][hr] [hr][hr][hr][hr][hr]
Normally we can't create structural breaks (like a hr) in code as easily, but with a few tricks we can simulate the effect. For example putting two code tags directly next to one another ends up visually creating a thicker line which could be used as a structural formatting if desired (say for table headings). We could also use various symbols _ as lines as well, though they would take a little more effort ([] again replaced by <> to show nesting).
<code>Possible Heading</code><code>Data More Data
</code>
Possible Heading
Data More Data
Another combination that can be used is with color tags to color your code. Unfortunately you cannot color "non-markup" text within the tag, but you can at least do a blanket color change.
Colored Data More Colored Data
Regarding hyperlinks, say we want to follow the Mircosoft Manual of Style regarding url links. We can easily italicize the text within the url tag to follow this formatting principle..
Briefly mentioned before, we can also use images as hyperlinks if we wish. The following example shows the use of an image as a hyperlink, rather than text.
Expanding on our image and url tag, if we wanted to have a specifically sized image that links to the original sized image, all we need to do is follow the above idea with using images as hyperlinks and use the url of the original image in the url tag, while using a placeholder image in the image tag (remembering that imgur does this automatically).
While we don't have a table option to present tabular data, we can use the code tag to approximate this behavior. If we took our tag list and wanted to format it to display in 2 columns we simply need to just add the proper amount of space to format this content. Note that when adding spacing that using tab in MS Word for example will produce a tabbed space in the code tag. Because code uses a monotype font we can also always align to the right or left of the text, though aligning to the right will take slightly more effort.
Interestingly enough we can also encompass our code tag with a center tag, so that the text is centered within, though you can see a little more tweaking would be necessary to line up our columns properly.
We can also get somewhat creative with our use of images to create tables, or images next to one another. Say if we wanted to create 3 columns of images on the same line, we can use the indent tag, image tag, and center tag to format this idea.
Now say we wanted to label these images. We can do that within the image itself, which would be easier overall, but we can also play around with text and the indent tag (within the center tag) to tweak how we want this to look. The only problem with this method is that it is more difficult to make our text fall in line with our images. Thankfully as we know a single indent tag uses 6 non-breaking spaces, we can create our image width based around those stipulations so that they can line up appropriately.
Left Text[indent][indent][indent]Center Text[indent][indent][indent]Right Text
Left Text Center Text Right Text
We can however expand on this idea, and use the code tag additionally as a means to create specific spacing for our text. In this instance the code tag also acts as a x-axis.
When making larger or more intricate documents creating a Table of Contents is often necessary for compartmental or structural reasons. There are a number of ways to go about making one, though the more complex the table, the more oddly we have to format in order to achieve our desired result. As an example, take the Table of Contents of this document and note the somewhat odd way that it was formatted. In a text document it seems rather odd, but the end result is a relatively clean centered two column look that is anchor capable (shown above). We could also reformat this information into a three column layout as well, as seen below.
We could also, if our guide doesn't need anchors, use the code tag and space it accordingly to produce a similar effect, though using periods to space isn't necessary here as code again uses a monotype font (aesthetic purposes).
[anchor] [quote] [audio] [red] [b] [s] [big] [small] [blue] [spoiler] [center] [time] [code] [tlpd] [date] [u] [green] [url] [hr] [wiki] [i] [wiki2] [img] Combinations and Atypical Uses [indent] Images, Fonts, and Other Symbols [list] and [*] Final Thoughts and Examples [poll]
Fore more examples on how you can construct a Table of Contents, refer to some of the links below in Final Thoughts and Examples.
Images, Fonts, and Other Symbolstop There are two to three more formatting tools that we can use additionally from BBCode to make our posts more intricate and interesting. TLPD, Liquipedia, and TL.net are excellent resources for including images for formatting purposes outside of using tlpd tags or other symbols. We can create a variety of interesting effects with these icons, and in some cases don't even have to use the image tag. For example, if we wan to use race icons, we have an easy way of going about this which is similar to the format of our smilies.
:T: :t: :P: :p: :Z: :z: :R: :r:
Additionally to this, by using the img tag to call some of the already used icons in the aforementioned resources, we can gain access to a whole host of icons. Some useful ones are as follows, though there are many more that could be used effectively (such as team icons, which can be found Here).
Before speaking further about other uses it is important to note that we have a limit of how many images can be used in a single post. The current limit is 100 unique urls. This is important to note because this guide has ~115 images in the OP and obviates an important consideration; you may use the same image url multiple times and not have it add to the overall limit as these are not unique url requests.
Nationality icons can also be useful and can also be called in much the same way as the race designations above (a list of them can be found Here). The format is a two letter abbreviation of the nationality within a set of colons. There are a few notes to the function of this however. These icons can be parsed out within code tags, but to do so you need an additional space on both ends of the formatting for it to work. Additionally, if placing multiple flags next to each other the same spacing rule applies and therefore you need to have two spaces in between each flag or they will not properly render.
In this instance :kr: will output as (with additional spaces in code):
Choosing fonts can also be an important decision in how our layout is perceived by the end-user. Some of the more important fonts to us on TL are Arial (primary font), Cambria, Eurostile, Gotham, Helvetica, Helvetica Neue, Proxima Nova Bold, and Tahoma which are used in a variety of places. There are however some other fonts that may also be as important, such as Batman Forever, Microgramma, and Starcraft Normal.
Finally, aside from TLPD, LP, and some of the available icons therein, TL.net also supports a wide variety of alt+code symbols as well as languages that we can additionally use alongside our BBCode. As an example we can create bullets • (alt+7), arrows » (alt+175), degrees ° (alt+0176), or stars ★ ☆ (alt+ 9733 +9734, may need to copy/paste) as well as additional language options like 한글 (Hangul), aɪ pʰiː eɪ (IPA), or cыриллиc (Cyrillic). For use of additional alt codes some trial and error may be necessary, but many codes contained Here or Here can be used.
As an example, say we wanted to create a slightly different horizontal rule, we could instead of using the hr tag, use alt+220 ▄ or alt+196 ─ to produce slightly different results.
Final Thoughts and Examplestop Overall, when making these decisions of what to use and where you should choose your layout and what formatting style you want to follow before you start your markup. For the previously mentioned thread on mouse technology, the Chicago Manual of Style, Microsoft Manual of Style, and Microsoft Computer Dictionary were heavily consulted so that the resulting formatting was clear and consistent throughout the document.
This is also where the initial quote by Antoine de Saint Exupéry becomes very important to consider. From an artists or designers perspective, the best layout designs are those that are the least extraneous, the least cluttered, and the most succinct in their use of elements. We have a pretty amazing amount of tools to make design choices on TeamLiquid.net, but it is important to note that just because we have these tools doesn't mean we should be using them. What this quote attempts to impart is that we should strive to use the absolute minimum amount of these tools, else our content can quickly become overly cluttered and somewhat self congratulatory, no longer serving the needs of the content, or the reader. Along with the Exupéry quote, a few others also help to enumerate what what some generally good design practices are.
The big problem is most contemporary design practiced today is not really graphic design, but graphic decoration. - Art Chantry
Design should never say, “Look at me.” It should always say, “Look at this.” - David Craib
Technical skill is mastery of complexity, while creativity is mastery of simplicity. - Christopher Zeeman
Photoshop is a privilege, not a right. - Dork Tower
I think I've covered most everything that you might want to use, as well as hinting at some of the crazier things you can do with BBCode. I do feel that coming from a web designers standpoint, that there are some styling options that are unfortunately not available to us on TL.net that Should be Included in the future (some being more pertinent than others).
One last thing for the more advanced designers out there. I have been keeping my blog on esports graphics, logos and icons updated as I work with them (most recently added sc2 race icons), and for ease of use, you can access them in both the original eps format and by png, by following this link: http://www.teamliquid.net/blogs/viewblog.php?topic_id=364745
Feel free to contribute any interesting effects you've been able to achieve that I haven't covered, or if you know of some very good uses of BBCode on this site to provide links to them. Happy coding!
I moved the map tiles out of the main post so that I could use more images in this thread and so they wouldn't output as links to images. Back to Images, Fonts, and Other Symbols
Bookmarked. You sir are a gentleman and a scholar.
The seven sins of society.. riches without labour, satisfaction without emotion, trade without ethos, knowledge without character, science without humanism, worship without sacrifice, politics without morals.
deathgod6 United States. May 12 2012 03:55. Posts 4531
![[image loading]](http://cdn.overclock.net/3/35/35382382_4X20f_ph.png)
![[image loading]](http://imgur.com/aVgu5)
![[image loading]](http://cdn.overclock.net/2/2c/2cdb5dfd_4X20f.png)
![[image loading]](http://www.teamliquid.net/images/post/tlpdize.png)
button, you can both select specific text or the entire post, and tlpd-ize it. Note that when using this tag that some symbols will generally accompany the results, such as 
, 
, or 
. As a lesser visually obvious function, you can also right-click on the tlpd button to specifically chose which database it refers to. In formatting url locations, # symbols replace the / symbols for the most part, though maps for example have an additional identifier.
Main_Page![[image loading]](http://i.imgur.com/EJktiRs.png)
![[image loading]](http://i.imgur.com/1y6OA.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/b/b6/TerranIcon_30x30.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/1/1d/ProtossIcon_30x30.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/5/5d/ZergIcon_30x30.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/c/c7/Ticon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/d/d1/Picon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/3/31/Zicon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/9/9d/Ticon_small.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/ab/Picon_small.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/c/c9/Zicon_small.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/8/8a/Ricon_small.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/1/10/Gold.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0b/Silver.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/f/f2/Bronze.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/1/12/Copper.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/4/4a/SF.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/1/10/Gold.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/0/0b/Silver.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/f/f2/Bronze.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0b/Tournament-stub.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/6/6c/Sicon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/8/88/Aicon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/d/de/AllKillIcon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/6/66/GreenCheck.png)
![[image loading]](http://www.teamliquid.net/staff/R1CH/LadderUp.png)
![[image loading]](http://www.teamliquid.net/staff/R1CH/LadderDown.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/06/Up_arrow.png){kind=icon}
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/2d/Unchanged_wh.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/a7/Down_arrow.png){kind=icon}
![[image loading]](http://www.teamliquid.net/images/pm/arrow_ASC.gif){kind=icon}
![[image loading]](http://www.teamliquid.net/images/pm/arrow_DESC.gif){kind=icon}
![[image loading]](http://www.teamliquid.net/tlpd/images/index/up.gif)
![[image loading]](http://www.teamliquid.net/tlpd/images/index/down.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/1/18/Replay_Icon21.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/7/73/Replay_Icon14.png)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/dl.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/f/f9/Down.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0b/Vod.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images/1/17/NoVod.png)
![[image loading]](http://www.teamliquid.net/images/streams/streamicon.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/9/9a/Yt2012ico.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/b/b7/Ogn_ico.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/e/ea/Gomtv_ico.jpg)
![[image loading]](http://i.imgur.com/lJ3oi.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0c/Vlc_ico.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/7/7f/Twitch_ico.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/d/da/Own3D_ico.png)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/ob.gif)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tr.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/thumb/0/09/Preview_Icon.png/15px-Preview_Icon.png){kind=icon}
![[image loading]](http://wiki.teamliquid.net/starcraft/images/c/c9/Int.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/thumb/a/a1/LiveReport.png/15px-LiveReport.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/thumb/3/30/Writers_Icon.png/15px-Writers_Icon.png){kind=icon}
![[image loading]](http://www.teamliquid.net/images/forum/wiki_icon.png){kind=icon}
![[image loading]](http://www.teamliquid.net/blogs/images/blackstar.gif)
![[image loading]](http://www.teamliquid.net/blogs/images/graystarSmall.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/a4/Minerals.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/8/8c/Vespene-terran.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/2e/Vespene-protoss.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/e/e4/Vespene-zerg.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0b/Buildtime_terran.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/a4/Buildtime_protoss.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/7/7b/Buildtime_zerg.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/b/ba/Supply-terran.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/8/86/Supply-protoss.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/02/Supply-zerg.gif)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/e/e2/Icon_Hitpoints.png){kind=icon}
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/5/5e/Icon_Armor.png){kind=icon}
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/c/cb/BronzeMedium.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/22/SilverMedium.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/5/55/GoldMedium.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/2b/PlatinumMedium.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/9/90/DiamondMedium.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/26/MasterMedium.png)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/5/5f/Grandmaster_49x48.png)
![[image loading]](http://www.teamliquid.net/images/new.gif)
![[image loading]](http://www.teamliquid.net/tlpd/images/side_search.png)
![[image loading]](http://www.teamliquid.net/mirror/layout/Search_Icon.png){kind=icon}
Hyde Australia. May 12 2012 03:09. Posts 13808![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/ashworld.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/badlands.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/desert.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/ice.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/installation.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/jungleworld.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/spaceplatform.jpg)
![[image loading]](http://www.teamliquid.net/tlpd/images/maps/tilesets/twilight.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/2f/Ts_agria_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/27/Ts_aiur_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/2d/Ts_avernus_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/b/bb/Ts_bel%27shir_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/ae/Ts_braxis_alpha_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/5/53/Ts_castanar_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0e/Ts_char_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/6/62/Ts_haven_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/e/e2/Ts_korhal_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/22/Ts_mar_sara_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/4/4e/Ts_meinhoff_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/8/8f/Ts_monlyth_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/6/6c/Ts_new_folsom_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/ae/Ts_port_zion_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/b/b6/Ts_redstone_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/3/30/Ts_shakuras_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/2/2f/Ts_tarsonis_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/a6/Ts_typhon_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/7/79/Ts_tyrador_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/a/ad/Ts_ulaan_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/0/0b/Ts_ulnar_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/6/6d/Ts_valhalla_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/d/d6/Ts_xil_small.jpg)
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/b/b7/Ts_zhakul%27das_small.jpg)
