BBCode on TeamLiquid.net: A Content Creators Guide

Deleted User 135096

3624 Posts

May 11 2012 17:52 GMT

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
- Antoine de Saint Exupéry

As content creators on TeamLiquid.net how you format your posts is something that is very important to know in order to be able to create clean, robust, and professional looking content on this site. In the last few years I've been on TeamLiquid.net, I've worked on a number of rather large projects that required heavy and meticulous usage of Bulletin Board Code (hereinafter referred to as BBCode). Throughout this work 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 number of important considerations such as spacing, syntax, or some of the more unlisted features that I've had the sleuth out throughout my work (I do understand the reason why some of these were 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 will occasionally see a number of html line breaks . These tags are used to indicate where TL formats certain tags to have additional spacing before and after the tag in question, and are mentioned on a case by case basis. Note that many tags must be closed in order to work properly (e.g. the opening tag followed by its closing tag [tagname] [/tagname]).

CONTENTS

Color Tags

.....................................................................................................................................................................................................

.................................................................................................................................................

Date, Time, and Counters

........................................................................................................................................................................

[countdown]

[date]

[time]

........................................................................................................................................................

Document Formatting and Navigation

...................................................................................................................................................

..............................................

External Sources

.........................................................................................................................................................................................

............................................................................................

Styling Text

...................................................................................................................................................................................................

...............................................................................................................................................

Combinations and Atypical Uses

...........................................................................................................................................................

Images, Fonts, and Other Symbols

.......................................................................................................................................................

Document Flow and Manuals of Style

...................................................................................................................................................

Final Thoughts and Examples

.................................................................................................................................................................

COLOR TAGS top

[blue] [dblue] [green] [red]
These tags are straightforward and simple, by placing text inside one of these tags your text will by styled with the corresponding color of the tag.

[green]This text will be green.[/green]

This text will be green.

DATE, TIME, AND COUNTERS top

[countdown]
The countdown tag will add a timer to your post that will count down based upon the length that you specify. Note that when you add the tag, that the time from which the timer begins is from the post date of the response. As an example, if you were to place a 12 hour timer in a post that is more than 12 hours old, the timer will output to 0m 0s, as the timer has already reached zero. The following are considerations to note when using this tag:

You are allowed to use yesterday, today, tomorrow, and now. Yesterday/Today/Tomorrow are based on KST, not your local time, and will round to the closest hour, whereas now will not.
Uses the English date format, e.g. month followed by day.
When you specify a time, and you're not using KST, if the time is already past in your local time, it will only start counting to it again if it's a new day in KST (if it's past midnight), otherwise it will display 0m 0s.
Display is also days & hours, hours & minutes, or minutes & seconds. If there are no more full days, it starts using hours as the first space, if there's no more full hours, then it starts using minutes.

The following are a number of possible iterations when using this tag:

[countdown]24:00 CEST[/countdown]

[countdown]4.4.2017 24:00 CEST[/countdown]

[countdown]tomorrow[/countdown]

[countdown]10 hours 2min 2secs[/countdown]

[countdown]2 years 2 months 2 days 2 hours 2min 2secs[/countdown]

Also note that you cannot style the text within the countdown tag, but can by placing the appropriate styling outside this tag.

Approximate time remaining in Brood War's professional run, if it began in 2010.

Finally, you can also add in GMT, EST, KST or other time designations into the countdown field, such as the following (you can also combine today/tomorrow, with this as well):

[countdown]24:00 GMT-05:00[/countdown]

See posts 128 and 130 for more examples.

[date]
Date is pretty simple as dated text within this tag will be formatted to the viewers time zone. Please note that you can use tomorrow, days of the week, even a specified period of duration (e.g. 2 weeks).

[date]June 22 2010 12:00 GMT[/date]

Tuesday, Jun 22 12:00pm GMT (GMT+00:00)

[time]
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]

01:00 GMT (+00:00)

DOCUMENT FORMATTING AND NAVIGATION top

[anchor]
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=#anchor_name]URL Link[/url]



[anchor]anchor_name[/anchor][i]<<< The tag/text is invisible, but points to a section in your document.[/i]

URL Link

<<< The tag/text is invisible, but points to a section in your document.

As a final note, when defining the anchor_name for the anchor and url tags, it would be prudent to avoid using whole 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:

[url=#2]Go to First Post[/url]

Go to First Post

[center]
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 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]
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 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).

<code>some text</code>
<br/>

some text

+ Show Spoiler [code tag messing with the window size,…] +

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)

[hr]
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/>

The one difference in spacing is that if a [hr/] follows another [hr/] immediately, there will be no space until the last one is used. See Combinations and Atypical Uses for more on this.

[indent]
he 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]
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 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.

+ Show Spoiler [list changing with window width] +

...................................................................................................................................................................................................................................................... however a single space with revert to the original behavior

[poll]
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 at the end for spacing.

[poll]34103[/poll]
<br/>

Poll: Main Query

Option Two (51)

50%

Option One (50)

50%

101 total votes

Your vote: Main Query

(Vote): Option One
(Vote): Option Two

[quote]
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 at the end for spacing.

[quote]Quoted Text[/quote]
<br/>

Quoted Text

[spoiler]
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]A normal spoiler tag[/spoiler]

+ Show Spoiler +

A normal spoiler tag

[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]

+ Show Spoiler [metadata text within the tag but not i…] +

A spoiler tag with metadata

EXTERNAL SOURCES top

[audio]
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]

[embed]
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.

[h]
The h tag, or hero tag, is a quick way to link images for dota2 heroes. To use this, simply put the name of the hero inside the tag, and a small thumbnail image of the hero will output:

[h]weaver[/h]

[img]
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.

[img]http://www.some_image_url_location[/img]

[img]broken_image_from_using_the_wrong_url[/img]

[img]http://www.original_image_size_url_location[/img]

[url]
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]

Item representing the hyperlink

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:

http://www.teamliquid.net

http://www.teamliquid.net

[i]http://www.teamliquid.net[/i]

http://www.teamliquid.net

[tlpd]
Using the tlpd tag to link to the database can be relatively easy. Thanks to the [image loading]

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).

<tlpd#players#225#T>BoxeR</tlpd>

BoxeR

BoxeR

<tlpd#maps#199#korean#Jungle World>Heartbreak Ridge</tlpd>

Heartbreak Ridge

Heartbreak Ridge

[wiki]
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:

[wiki]Main_Page[/wiki]

Main Page

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.

A broken (Wiki)

main page, and the working (Wiki)

Main Page.

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.

[wiki=2012_Tving_OSL/24_Dual_Tournament]A Generic Name[/wiki]

A Generic Name

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.

http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament

http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament

[i]http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament[/i]

http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament

[wiki2]
The wiki2 tag works exactly the same as the wiki tag, but only for StarCraft 2.

[wiki2]Main_Page[/wiki2]

Main Page

STYLING TEXT top

[b]
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 tag instead when using this method. The following results from using the bold tag.

[b]Bold Text[/b]

Bold Text

[big]
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

[i]
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 should be used.

[i]Italicized Text[/i]

Italicized Text

[small]
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

[u]
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

[s]
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~~

COMBINATIONS AND ATYPICAL USES top

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]

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]

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, again[/list][/list][/center]

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]

One thing we can also do with spoilers is change the size of either the spoiler tags text, or the text inside the spoiler. By placing a [big] or [small] outside the spoiler tag we can increase or decrease the size of the spoiler tag, but not the text inside the tag. To do this we would place the modifying tag inside the spoiler so that the text contained within will be styled.

[small][blue]
[spoiler=spoiler text and info is reduced in size]...but text within the spoiler remains the same size[/spoiler][/blue][/small]

+ Show Spoiler [spoiler text and info is reduced in size] +

...but text within the spoiler remains the same size

[spoiler=spoiler text and info is at normal size][small]...but text within the spoiler is now reduced in size[/small][/spoiler]

+ Show Spoiler [spoiler text and info is at normal size] +

...but text within the spoiler is now reduced in size

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 Microsoft Manual of Style regarding url links. We can easily italicize the text within the url tag to follow this formatting principle..

[url=http://www.teamliquid.net][i]Team Liquid[/i][/url]

Team Liquid

...or if we want to additionally color it to follow our own style set, we can do the following:

[url=http://www.teamliquid.net][green][i]Team Liquid[/i][/green][/url]

Team Liquid

Now let's say we want to use it as some kind of heading for our document. We can easily add some big and bold tags to make the appropriate changes.

[url=http://www.teamliquid.net][green][big][big][b][i]Team Liquid[/i][/b][/big][/big][/green][/url]

Team Liquid

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.

[url=http://www.teamliquid.net/forum/viewmessage.php?topic_id=32696]
[img]http://i.imgur.com/EJktiRs.png[/img][/url]

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).

[url=original_image_url][img]placeholder_image_url[/img][/url]

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.

[anchor]					[img]
[audio]						[indent]
[b]						[list]
[big]						  [*]
[blue]						[quote]
[center]					[red]
[code]						[s]
[date]						[small]
[green]						[spoiler]
[hr]						[u]
[i]						[url]

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.

[anchor]					[img]
[audio]						[indent]
[b]						[list]
[big]						  [*]
[blue]						[quote]
[center]					[red]
[code]						[s]
[date]						[small]
[green]						[spoiler]
[hr]						[u]
[i]						[url]

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.

[center][img]Column 1[/img][indent][img]Column 2[/img][indent][img]Column 3[/img][/center]

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.

   Column 1         Column 2           Column 3         Column 4          Column 5          Column 6

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 below). We could also reformat this information into a three column layout as well:

Combinations and Atypical Uses

[img]

Images, Fonts, and Other Symbols

[indent]

Final Thoughts and Examples

Combinations and Atypical Uses

[date]

[s]

Images, Fonts, and Other Symbols

[green]

[small]

Final Thoughts and Examples

[hr]

[spoiler]

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 as there are many excellent examples.

IMAGES, FONTS, AND OTHER SYMBOLS top

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):

[img]http://wiki.teamliquid.net/starcraft/images2/b/b6/TerranIcon_30x30.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/1/1d/ProtossIcon_30x30.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/5/5d/ZergIcon_30x30.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/c/c7/Ticon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/d/d1/Picon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/3/31/Zicon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/9/9d/Ticon_small.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/ab/Picon_small.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/c/c9/Zicon_small.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/8/8a/Ricon_small.png[/img]

[img]http://wiki.teamliquid.net/starcraft/images2/1/10/Gold.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/0b/Silver.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/f/f2/Bronze.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/1/12/Copper.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/4/4a/SF.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/1/10/Gold.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/0/0b/Silver.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/f/f2/Bronze.png[/img]

[img]http://wiki.teamliquid.net/starcraft/images2/0/0b/Tournament-stub.png[/img] 
[img]http://wiki.teamliquid.net/starcraft/images2/6/6c/Sicon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/8/88/Aicon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/d/de/AllKillIcon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/6/66/GreenCheck.png[/img]
[img]http://www.teamliquid.net/staff/R1CH/LadderUp.png[/img]
[img]http://www.teamliquid.net/staff/R1CH/LadderDown.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/06/Up_arrow.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/2d/Unchanged_wh.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/a7/Down_arrow.png[/img]
[img]http://www.teamliquid.net/images/pm/arrow_ASC.gif[/img]
[img]http://www.teamliquid.net/images/pm/arrow_DESC.gif[/img]
[img]http://www.teamliquid.net/tlpd/images/index/up.gif[/img]
[img]http://www.teamliquid.net/tlpd/images/index/down.gif[/img]

[img]http://wiki.teamliquid.net/starcraft/images2/1/18/Replay_Icon21.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/7/73/Replay_Icon14.png[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/dl.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/f/f9/Down.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/0b/Vod.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/1/17/NoVod.png[/img]
[img]http://www.teamliquid.net/images/streams/streamicon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/b/b7/Ogn_ico.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/e/ea/Gomtv_ico.jpg[/img]
[img]http://i.imgur.com/lJ3oi.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/0c/Vlc_ico.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/7/7f/Twitch_ico.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/d/da/Own3D_ico.png[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/ob.gif[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tr.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/thumb/0/09/Preview_Icon.png/15px-Preview_Icon.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images/c/c9/Int.png[/img]
[img]https://twitter.com/favicons/favicon.ico[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/thumb/a/a1/LiveReport.png/15px-LiveReport.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/thumb/3/30/Writers_Icon.png/15px-Writers_Icon.png[/img]
[img]http://www.teamliquid.net/images/forum/wiki_icon.png[/img]
[img]http://www.teamliquid.net/blogs/images/blackstar.gif[/img]
[img]http://www.teamliquid.net/blogs/images/graystarSmall.gif[/img]

[img]http://wiki.teamliquid.net/starcraft/images2/a/a4/Minerals.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/8/8c/Vespene-terran.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/2e/Vespene-protoss.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/e/e4/Vespene-zerg.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/0b/Buildtime_terran.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/a4/Buildtime_protoss.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/7/7b/Buildtime_zerg.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/b/ba/Supply-terran.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/8/86/Supply-protoss.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/02/Supply-zerg.gif[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/e/e2/Icon_Hitpoints.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/5/5e/Icon_Armor.png[/img]

Map Tilesets (follow link to tilesets below).

[img]http://wiki.teamliquid.net/starcraft/images2/c/cb/BronzeMedium.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/22/SilverMedium.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/5/55/GoldMedium.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/2b/PlatinumMedium.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/9/90/DiamondMedium.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/26/MasterMedium.png[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/5/5f/Grandmaster_49x48.png[/img]

[img]http://www.teamliquid.net/images/new.gif[/img]
[img]http://www.teamliquid.net/tlpd/images/side_search.png[/img]
[img]http://www.teamliquid.net/mirror/layout/Search_Icon.png[/img]

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.

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

─────────────────────────────────────────────────────────────────────────────────

We can also additionally color these codes or make them larger or smaller, which can present some very interesting ideas for formatting.

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
%90 Complete

DOCUMENT FLOW AND MANUALS OF STYLE top

One of the most, if not the most important aspect of content creation of this type is working on the layout of your document. Regardless to how slick or stylized you can make your content, if you haven't set up a logical flow and ordering of your document or a ruleset for how you format what content, a project can very easily come off as enigmatic and overly obtuse. It is important then for this reason of legibility and ease of use to have a logical setup (and often strict) behind your content, so as to ensure that the end-user has an easy time reading and understanding you. There are a few things that help with this idea of 'ease of use', and can be divided into two major categories

Document Structuring/Layout, and (intended medium also important, web, pdf, etc...)
Manual of Style (the rules from which to follow when formatting the content, add later in full descr)

Document Layout
When embarking on writing the best and most professional content that we can, the single biggest tell that the writer has put a lot of time and effort into an article is when you can see a clear document structure/flow/layout, and it is incredibly easy to read and not a laborious process. Setting this up early is the single most important thing to be thinking about when in the preparation stages of creating content. You have to ask when you decide to write something of weight "What's the article about?", "What are the main areas or sections within the document?", "How do I want things to flow from section to section?", and many other smaller questions. Is your document best laid out in two major sections with subsections withing them, or should it really be 4 smaller sections covering the same material.

Answering these questions will help you in your flow, and in your presentation of the material or information you wish to impart. Some of you may remember that this document originally looked a little different. I originally set this up so that each tag was discussed alphabetically, but after thinking a little more on this I felt that I needed to re-organize it into similar categories so that the most often used tags would be in closer proximity to each other. As an example of a carefully set up structure, below is the basic document layout for the massive 100+ page PvZ Guide on TL:

. . . . .

X Primary Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
X.X Secondary Heading

X.X.X.X Quaternary Heading

X.X.X.X.X Quinary Heading

X Primary Heading

. . . . .

Here you can clearly see the Primary section, which is delineated by the largest font, and a horizontal rule. Everything else is contained within this box. You can also see that in order to space the content the same, primary headings have three spaces in between the heading and last part of content, secondary headings have two, and all others having one. This is only one way to structure content, but was carefully chosen after weeks of work on only the flow and format of the document.

There are a few things to keep in mind when thinking about your layout, and how that will affect your readers experience:

Spoilers: As a formatting tool, try to avoid this at all costs. While it might condense your article, it makes it much harder to read and you also require the end user to do things in order to even get to the material (opening/closing); this could be perceived as a hassle.
Headings: If you decide to make custom headings, or further style your text with colors, make sure that they are always the same throughout the document. If there are too many changes or differences, it will become visually cluttered.

Manuals of Style
Setting up and following a manual of style, styleguide, or formatting ruleset is the separation between content that is good, and content that is as meticulously crafted as any professionally curated content. While there are many rulesets out there, it is important to note what could be defined as generalized conventions withing certain mediums, and to try to choose your own formatting choices to conform to these prescribed practices as much as possible. The interesting and partially fun part is that no manual of style is %100 correct, and so you have some leeway to choose what your own rules will be, but just remember that standard conventions are there for a reason. For instance, if you are submitting content to the NSF (National Science Foundation) they have a very specific set of rules you need to follow in order for them to even accept your content (this even gets into defining what font and its size you are allowed to use).

Here are a number of general conventions that most people would agree are what you should follow

Headings:The first and last words of any heading must be capitalized. For example the word "an" in "an overview of mouse technology" normally would not be capitalized as its two letters, but because it is the first word it has to be. Any additional words within a title should be capitalized if they are four letters or more. This rule is a little less cut and dry as if it is an important three letter word you may want to capitalize it, or not depending on your own preferences. This is just to note that some of these rules are flexible to a degree, but the more you look at headings, the better idea you'll get on what is commonly done (make sure you look at vetted sources though, like NYTimes, Guardian, or other well known professional sources).
Proper Nouns: All proper nouns must be capitalized. This can include abbreviated nouns such as Ling for Zergling, and Hatch for Hatchery. It should be noted that even on TL, this rule isn't adhered to strictly in some places, but ideally for the most professionally looking content, all proper nouns should get this treatment.
References:When referring to a section of a document, a book, an online article, or other full written document, you must properly capitalize and italicize this text.
Underlines: As opposed to printed articles, the use of underlines as a means of emphasizing text in an electronic medium should not be done ever unless it is used in headings. The reason is quite simple, underlining text will masquerade as a hyperlink, and could confuse the reader into thinking that it is such.
Spacing: Not so much a thing on boards today, but it just bears noting that single spaces should be used after a period. The reason that two spaces were used was because of typeface issues with spacing and the kerning of text. As modern typefaces have largely corrected themselves this practice is no longer necessary.
Hyperlinks: There is no general consensus as to whether hyperlinks should be italicized or not, but it is worth noting two things. First, the Microsoft Manual of Style indicates that hyperlinks should be italicized and I would generally agree with this, with an addendum. The choice to italicize or not is a visual way to differentiate between internal and external links in a document or html page. This way the user can easily know if the content will leave the currently viewed page or not.

Out of the many posts on TL, one that I can %100 guarantee you will not find a single styling or formatting inconsistency is An Overview of Mouse Technology. In trying to set up my ruleset for how to format in this article I consulted the Chicago Manual of Style (one of the leading and most widely used formatting styleguides), and the Microsoft Computer Dictionary (to cover rules relating specifically technical jargon and terminology). Here I followed general conventions on how and when to use italics, or how to properly capitalize headings, or even how to refer to sections of the document as previously mentioned. I would strongly suggest referencing these two above mentioned resources. While you have to pay to access the current version of the CMOS, the first edition is free and available in PDF form. The MS Computer dictionary can also be found as a PDF (though its location is somewhat more transient). These aren't the only two resources however, NASA has their own Manual of Style as do many others. It is then up to you to determine what you want in your formatting, and how your ruleset will be modified to present what you wish to present.

FINAL THOUGHTS AND EXAMPLES top

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 find at a later date, or if you know of some very good uses of BBCode on this site to provide links to them. Happy coding!

Roe

Canada6001 Posts

May 11 2012 18:04 GMT

thanks! this is all very useful!

EvilTeletubby

Baltimore, USA22194 Posts

May 11 2012 18:04 GMT

Holy cow...

tofucake

Hyrule18457 Posts

May 11 2012 18:07 GMT

nice

Hyde

Australia14568 Posts

May 11 2012 18:09 GMT

Well done (maybe sticky it somewhere for new people?)

Qbek

Poland12923 Posts

May 11 2012 18:11 GMT

On May 12 2012 03:09 Hyde wrote:
Well done (maybe sticky it somewhere for new people?)

Definitely sticky it, but where?

Torte de Lini

Germany38463 Posts

May 11 2012 18:14 GMT

Damn, I was going to do this as part of my formatting guide.
Very welll-done, very impressed!

Imbu

United States903 Posts

May 11 2012 18:14 GMT

Damn, I've been looking for something like this!

Thank you!!!

Now where was this when I was making tournament threads TT.

Torte de Lini

Germany38463 Posts

May 11 2012 18:16 GMT

You seem to be missing wiki and wiki2
tlpd is not there.

You can also add the poll one too.

You can find a lot of BBCode used in these topics: http://www.teamliquid.net/forum/viewmessage.php?topic_id=269873
http://www.teamliquid.net/forum/viewmessage.php?topic_id=334375

Deleted User 135096

3624 Posts

May 11 2012 18:26 GMT

#10

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

[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/ashworld.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/badlands.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/desert.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/ice.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/installation.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/jungleworld.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/spaceplatform.jpg[/img]
[img]http://www.teamliquid.net/tlpd/images/maps/tilesets/twilight.jpg[/img]

[img]http://wiki.teamliquid.net/starcraft/images2/2/2f/Ts_agria_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/27/Ts_aiur_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/2d/Ts_avernus_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/b/bb/Ts_bel%27shir_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/ae/Ts_braxis_alpha_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/5/53/Ts_castanar_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/0e/Ts_char_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/6/62/Ts_haven_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/e/e2/Ts_korhal_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/22/Ts_mar_sara_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/4/4e/Ts_meinhoff_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/8/8f/Ts_monlyth_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/6/6c/Ts_new_folsom_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/ae/Ts_port_zion_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/b/b6/Ts_redstone_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/3/30/Ts_shakuras_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/2/2f/Ts_tarsonis_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/a6/Ts_typhon_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/7/79/Ts_tyrador_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/a/ad/Ts_ulaan_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/0/0b/Ts_ulnar_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/6/6d/Ts_valhalla_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/d/d6/Ts_xil_small.jpg[/img]
[img]http://wiki.teamliquid.net/starcraft/images2/b/b7/Ts_zhakul%27das_small.jpg[/img]

Lexpar

1813 Posts

May 11 2012 18:26 GMT

#11

From now on, this is how I post.

surfinbird1

Germany999 Posts

May 11 2012 18:27 GMT

#12

This is excellent. Thank you so much.

Steveling

Greece10806 Posts

May 11 2012 18:45 GMT

#13

Bookmarked.
You sir are a gentleman and a scholar.

deathgod6

United States5052 Posts

May 11 2012 18:55 GMT

#14

I glanced at the title and thought TL was featured on BBC or something. rofl

Aphasie

Norway473 Posts

May 11 2012 19:00 GMT

#15

On May 12 2012 03:26 Lexpar wrote:

From now on, this is how I post.

I doubt your posting-spree will be long if you just act like an attention whore ^^

Anyway, it was good to see how it works in action. I guess i will use some of it for OPs from now on.

ryndaris

263 Posts

May 11 2012 19:05 GMT

#16

Amazingly informative, thanks a lot for typing this up!

Otolia

France5805 Posts

May 11 2012 19:13 GMT

#17

5/5

Clear, simple, efficient. It only lack boobs to be perfect.