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 largeprojects 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 <br/>. 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........................................................................................................................................................................
Document Formatting and Navigation...................................................................................................................................................
Combinations and Atypical Uses........................................................................................................................................................... Images, Fonts, and Other Symbols....................................................................................................................................................... Document Flow and Manuals of Style................................................................................................................................................... Final Thoughts and Examples.................................................................................................................................................................
COLOR TAGStop [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 COUNTERStop [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):
[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 NAVIGATIONtop [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]
<<< 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:
[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 <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] 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)
[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 <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] 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] 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.
[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=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]
EXTERNAL SOURCEStop [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.
[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]
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:
[tlpd] 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).
[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:
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.
STYLING TEXTtop [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 <strong> 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 <em> 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 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, again[/list][/list][/center]
The following section of text can be indented with the use of the list tag easily, again
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]
...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..
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 below). We could also reformat this information into a three column layout as well:
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 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.
DOCUMENT FLOW AND MANUALS OF STYLEtop 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
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.X Ternary 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.X.X Quaternary 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.X.X.X Quinary 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 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?
. . . . .
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 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 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!
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
I've been writing a blog for a little while now and I've always wanted something like this. Thank you so much for taking the time to post this up! And I loved the Mouse Technology post. So many knowledge bombs!
This post came one day too late to save me about an hour and a half of screwing around and looking at an example from primadog, but just in time to stop me from searching for/trying things that didn't exist. Great post!
On May 12 2012 23:47 Inflicted_ wrote: Don't know if it should be included, but these are also useful:
:P:
:T:
:Z:
Not so much BBCode, but yea very helpful, will add it. Also if you use the lowercase letters the icons are smaller. Oh and there's ofc random as well,
Thanks about wiki stuff guys, I haven't honestly used the wiki tags much so I'm less familiar with them.
Also, I should have mentioned this in the OP so I'll add it in, but the meta information for the spoiler tag when in a floating text box will only stay visible for ~10 seconds, or at least in chrome. Also, no you can't get rid of the spoiler descriptor. Some websites override that text when you provide your own information like Overclocked.net, while others such as TeamLiquid.net have both.
OK, I just added a little quote by Antoine de Saint Exupéry. I realized after seeing This thread that I should have included this quote in the beginning.
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
This is important to consider for new content creators (well everyone actually, but hopefully veterans always do) in that the less content that you use, the more succinct and clean your content usually is. Anyone new to the design sphere should ponder what some of the following quote Here enumerate as there are a lot of good principles to get at, though a few good one are as follows:
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 thought I knew a lot of these as can be seen from my article linked in this guide, but I was totally wrong. Specifically, big, hr, anchoring, and nesting are completely new to me and will be very useful for future content.
I wish people would finally start using table of contents for their guides instead of several levels of nested spoilers It's probably the most retarded thing on TL to make people click 20 times to read your content instead of using a table of contents like every other presentation of content in the history of the internet and everything ever.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. - Antoine de Saint ExupéryThis topic is something that I feel is important to know as content creators on TL in order 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 doesn't say anything about additional 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).
Within the code example you may see a number of html line breaks <br/>. These tags are used to indicate where TL.net 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. 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. 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.
[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 (preview pane only). The first image shows the intended behavior, while the third shows the original image size in the preview window. When posted, the image will be resized to fit the thread window, but will also be accompanied by a yellow bounding box. The second insance shows an incorrect linkage and is a broken link as a result.
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. We should also note that the second example below uses the url from the upload image BBCode, and not the image url, which ends up returning a broken link. See Combinations, Atypical Uses, and Style Guides for more information.
[indent]top The indent tag works mostly as intended, indenting content by a certain amount (around 6 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 * 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
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 the meta text is long enough that by mousing over the spoiler tag the whole 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]
01:00 GMT (+00:00)
[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 formatting).
[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 colors, or italics 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.
Combinations, Atypical Uses, and Other Symbolstop 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
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 very 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.
[[i][/i]code]Possible Heading[[i][/i]/code][[i][/i]code]Data More Data
[[i][/i]/code]
Possible Heading
Data More Data
Regarding hyperlinks, say we want to follow the Mircosoft style guide 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 as we don't have a non-breaking space option, that we can only approximate the position of our text. See the alt+code examples below for a clever way around this problem.
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.
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] [poll] [audio] [quote] [b] [red] [big] [s] [blue] [small] [center] [spoiler] [code] [time] [date] [tlpd] [green] [u] [hr] [url] [i] [wiki] [img] [wiki2] [indent] Combinations, Atypical Uses, and Other Symbols [list] and [*] Final Thoughts and Examples
Fore more examples of a Table of Contents, see some of the links below especially ones by Torte de Lini.
There are two to three more formatting tools that we can use additionally from BBCode to make our posts more intricate and interesting. TLPD is an excellent resource for some great images to include for formatting purposes outside of using tlpd tags. When called as images or used in other ways, we can have a variety of interesting effects with these icons. 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:
In another method, we can use the img tag to call some of the already used icons in the tlpd. Some of them are as follows:
I've also sleuthed out some other tlpd-like images hosted on TL.net that I've found useful as well, such as the race icons for SC2 or other icons that TL uses on the site.
Additionally from tlpd and some of the available icons, 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), or arrows » (alt+175), or degrees ° (alt+0176), 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 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+219 █ or alt+220 ▄ to mock up a thicker hr.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ A Mock Progress Bar
Additionally with our labeling of columns in the above example, we don't have access to non-breaking space tags, but we can actually get around that shortcoming by using alt+255 to create a blank symbol. The following text is not spaced by the spacebar or with indent tags, but with a number of alt+255 symbols in between each bit of text. The formatting isn't perfect, but it is much better than our previous example.
Left Text Center Text Right Text
Final Thoughts and Examplestop Overall, when making these considerations 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 where the initial quote by Antoine de Saint Exupéry is very important to consider. From an artists or designers perspective, the best 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 enumerates 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 and the reader. Along with the Exupéry quote, the following quotes also give a good idea to 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).
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!
On May 15 2012 04:58 qrs wrote: Nice write-up! It must have taken you a lot of time. I didn't know about the anchor tags, which look to be quite useful.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. - Antoine de Saint ExupéryThis topic is something that I feel is important to know as content creators on TL in order 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 doesn't say anything about additional 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).
Within the code example you may see a number of html line breaks <br/>. These tags are used to indicate where TL.net 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. 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. 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.
[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 (preview pane only). The first image shows the intended behavior, while the third shows the original image size in the preview window. When posted, the image will be resized to fit the thread window, but will also be accompanied by a yellow bounding box. The second insance shows an incorrect linkage and is a broken link as a result.
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. We should also note that the second example below uses the url from the upload image BBCode, and not the image url, which ends up returning a broken link. See Combinations, Atypical Uses, and Style Guides for more information.
[indent]top The indent tag works mostly as intended, indenting content by a certain amount (around 6 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 * 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
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 the meta text is long enough that by mousing over the spoiler tag the whole 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]
01:00 GMT (+00:00)
[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 formatting).
[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 colors, or italics 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.
Combinations, Atypical Uses, and Other Symbolstop 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
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 very 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.
[[i][/i]code]Possible Heading[[i][/i]/code][[i][/i]code]Data More Data
[[i][/i]/code]
Possible Heading
Data More Data
Regarding hyperlinks, say we want to follow the Mircosoft style guide 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 as we don't have a non-breaking space option, that we can only approximate the position of our text. See the alt+code examples below for a clever way around this problem.
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.
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] [poll] [audio] [quote] [b] [red] [big] [s] [blue] [small] [center] [spoiler] [code] [time] [date] [tlpd] [green] [u] [hr] [url] [i] [wiki] [img] [wiki2] [indent] Combinations, Atypical Uses, and Other Symbols [list] and [*] Final Thoughts and Examples
Fore more examples of a Table of Contents, see some of the links below especially ones by Torte de Lini.
There are two to three more formatting tools that we can use additionally from BBCode to make our posts more intricate and interesting. TLPD is an excellent resource for some great images to include for formatting purposes outside of using tlpd tags. When called as images or used in other ways, we can have a variety of interesting effects with these icons. 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.
In another method, we can use the img tag to call some of the already used icons in the tlpd. Some of them are as follows:
I've also sleuthed out some other tlpd-like images hosted on TL.net that I've found useful as well, such as the race icons for SC2 or other icons that TL uses on the site.
Additionally from tlpd and some of the available icons, 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), or arrows » (alt+175), or degrees ° (alt+0176), 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 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+219 █ or alt+220 ▄ to mock up a thicker hr.
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ A Mock Progress Bar
Additionally with our labeling of columns in the above example, we don't have access to non-breaking space tags, but we can actually get around that shortcoming by using alt+255 to create a blank symbol. The following text is not spaced by the spacebar or with indent tags, but with a number of alt+255 symbols in between each bit of text. The formatting isn't perfect, but it is much better than our previous example.
Left Text Center Text Right Text
Final Thoughts and Examplestop Overall, when making these considerations 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 where the initial quote by Antoine de Saint Exupéry is very important to consider. From an artists or designers perspective, the best 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 enumerates 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 and the reader. Along with the Exupéry quote, the following quotes also give a good idea to 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).
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!
Awesome stuff! I remember PMing some mods about adding more functionality for normal users in BBCode, because making proper blogs or guides was such a pain in the ass back then
I'll definitely favourite this thread for future reference, when I decide to make another awesome blog post ^_^
I have been using most of these already but I had no idea about indent and anchor for example. I made this thread with your help and included anchor and indent:
On May 23 2012 02:45 JOJOsc2news wrote: I have been using most of these already but I had no idea about indent and anchor for example. I made this thread with your help and included anchor and indent:
On May 28 2012 09:17 Torte de Lini wrote: Seems you can no longer center/center youtube videos anymore. Fixed the broken embedding.
It actually still does work though for whatever reason you have to put a space between the opening tag and the content, idk why it does that though. So this,
On May 28 2012 09:17 Torte de Lini wrote: Seems you can no longer center/center youtube videos anymore. Fixed the broken embedding.
It actually still does work though for whatever reason you have to put a space between the opening tag and the content, idk why it does that though. So this,
On May 28 2012 09:17 Torte de Lini wrote: Seems you can no longer center/center youtube videos anymore. Fixed the broken embedding.
It actually still does work though for whatever reason you have to put a space between the opening tag and the content, idk why it does that though. So this,
hmmm it seems that bot the bbcode parsing and implementation might be going through some changes on the back end of things. I just had some trouble inserting image tags where the end result would add a space between the opening tag, and make the image a hyperlink instead, resulting in this:
On May 31 2012 03:51 Primadog wrote: :us: gets parsed in code as well
huh, didn't know flags could be called that way, neat! Oh I think I got it, they follow TLPD sort of, a few are :ru: (oops supposed to be Russia )
Basically they follow :two_letter_designation: to parse out the flag. Handy because TLPD also will give you the abbreviation if your mouse hovers over the flag, though Korea is kr and not ks. Much better than linking images.
Are there any more of these that I may have missed?
So I linked the site that I've drawn these from, but it seems to be another good resource for other symbols that we can use, and also has them categorized into groups like currency, or mathematical, etc... To use the symbols simply click on the one you want and it will auto copy it (make sure it's as text).
On June 07 2012 17:46 Probe1 wrote: I can't believe you just gave away the live report secret sheet cleverly hidden in the BBCode page. You fiend now everyone will use BBCode!
nice, will add them into the OP. Also I couldn't figure out what symbol you were using and then it was staring me in the face as alt+8. Apparently I'm selectively blind.
In updating the image section I found that you are limited by the number of images that can be used in a single post. For instance in this document I added ~115 images total to the OP, however only 113 of them resolved. The final two were output as links, so regarding my comment above on this topic I think this may be an intended behavior. Rule of Thumb then? Don't use more than 110 images in one post.
I've found some other things that I've come across in the last few days that are of interest. When using the [small] and [spoiler] tags to make text smaller inside the spoiler, you have to put the small tag inside the spoiler, else nothing will happen. I haven't tested all of the examples, however, it looks like you have to have an additional tag between the small tag and spoiler tag for the spoiler information to be reduced in size as well. I do know that color tags work, as well as the list tag, but underline and indent and italics don't work.
Here's an example of the small tag outside and inside the spoiler tag, with the first example using the blue tag to reduce the size of the spoilered information:
[small][blue] [spoiler=spoiler text and info is reduced in size]...but text within the spoiler remains the same size[/spoiler][/blue][/small]
Neat! Have you found any other websites where the embedding works here? I tried a number of sites like twitch, blip, yt, vimeo, gt, and some others, but could only get gamespot to work.
On June 22 2012 04:35 wo1fwood wrote: I've found some other things that I've come across in the last few days that are of interest. When using the [small] and [spoiler] tags to make text smaller inside the spoiler, you have to put the small tag inside the spoiler, else nothing will happen. I haven't tested all of the examples, however, it looks like you have to have an additional tag between the small tag and spoiler tag for the spoiler information to be reduced in size as well. I do know that color tags work, as well as the list tag, but underline and indent and italics don't work.
Ok so I did a little housekeeping, added the embed tag, even though it doesn't quite work properly yet. I also moved the tileset icons to make room for more images in the OP, and finally added in a few more LR image resources (for streams mostly), seen below:
new youtube icon ongamenet icon (not official, reconstructed) gomtv icon vlc player icon twitch icon own3d icon
Regarding countries and their flags, is there a complete list with all the countries because I understand the P's and R's don't really seem to work. Thanks for this btw, really useful.
Oh I know, that's what I was referring to, I was just wondering if there was a way to fix the 'r' and 'p' issue where they give you the smileys instead of the flags.
oh lol, second time today... t.t No, it's because of the way smileys work on TL that you can't get rid of that problem until either the flag markup or smiley markup changes (smiley markup should change imo as it messes up other things too, like talking about screen resolutions and such), so unfortuantely we can't get rid of those issues.
I apologize in advance. I do find recursive rabbit holes very tempting. Some people with low pain thresholds might prefer not to open this + Show Spoiler +
On December 19 2012 10:50 wo1fwood wrote: Shameless plug and an old bump, but our massive project is another great reference for what you can do with bbcode only (and yes it is %100 bbcode): http://www.teamliquid.net/forum/viewmessage.php?topic_id=383628
unshameless bump. As I spent a while before I found this very useful guide of yours. bump.
I was going to add an extra trick I had not seen described, but when I went fishing for a quote of something to respond to I noticed that you had already used the technique even if I had not seen you describe it.
I now will....
On June 22 2012 04:35 wo1fwood ALMOST wrote: I've found some other things that I've come across in the last few days that are of interest. When using the [small] text [/small] and [spoiler] spoilered text [/spoiler] tags to make text smaller inside the spoiler,
Note i have tweaked(aka changed) the red part of the quote to make the effect more visually evident. There look like there are BBcode tags[...] but they apparently did not get rendered as BBcode tags[...]....
Q1: how do you, or in this case me, suppress the BBcode translation in or, for the purpose writing guides explaining how to use them. A1: put the example text in [code] [/code] blocks... (the most common solution used in this thread, and while that is clear it breaks the flow of the text so....)
Q2: but how did I do it inline just above? A2: I used this text [[i][/i]code] [[i][/i]/code] . You can see that yourself if you quote this post. Why2 does that work?: I suspect the server rendering program like other code I have also not seen, is not implemented as a stateful full recursive descent parser, as they are harder to make hack proof... (It is also then much harder to test that you have.) Why is that important?: There is an unlikely possibility that one day the undocumented feature of this ([[i][/i]code] [[i][/i]/code]) working will cease. As an enduser do you or should you care?: probably not. Indeed I mainly mention it to visibly document that it is a feature that now has been relied on.
and just because you know i have to do it....
Q2: but how did I do it inline just above? A2: I used this text [[[i][/i]i][[i][/i]/i]code] [[[i][/i]i][[i][/i]/i]/code] . You can see that yourself if you quote this post.
Q3: There are not more questions. Why? A3: The head of everyone except, LISP programmers, and POSIX based picket fence coders, just now exploded.... and the former two groups may well now be AFK for a while..... oh, ooops my bad: C&C warning. >:P
BTW: If the above does not make sense to you don't worry, it probably was not meant to and is very likely unimportant to you.
Can anyone tell me how to make the background a color or image? I'm trying to revolutionize LR threads here The suggestions I found on the internet don't work which makes me think TL is preventing me from doing it.
On January 09 2013 03:56 BisuDagger wrote: Can anyone tell me how to make the background a color or image? I'm trying to revolutionize LR threads here The suggestions I found on the internet don't work which makes me think TL is preventing me from doing it.
On January 09 2013 03:56 BisuDagger wrote: Can anyone tell me how to make the background a color or image? I'm trying to revolutionize LR threads here The suggestions I found on the internet don't work which makes me think TL is preventing me from doing it.
Only staff can use stuff like that.
That makes me sad. I think LR threads could be made so much more awesome. Maybe I can get code certified by the staff so I can do so in LR's lol.
Haha that's awesome. You could try looking at the code by quoting a post that has what you want and seeing what they did, then you can adapt that to what you want to do. Not sure if that will work but it might give you some ideas.
On January 09 2013 05:08 TzaTzers wrote: Haha that's awesome. You could try looking at the code by quoting a post that has what you want and seeing what they did, then you can adapt that to what you want to do. Not sure if that will work but it might give you some ideas.
I tried, but it doesn't work because us mortal forumers can't
Before I start, a few Bugs/Features to be aware of, when using this: + Show Spoiler +
Date and countdown tags: yesterday/today/tomorrow seem to be based on KST, not your local time, so they give wrong results for people that aren't on KST.
Date and countdown tags: Uses English date format, with months then days. If you wish to avoid the confusion, just use names for months, instead of numbers.
Countdown tag: 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.
Countdown tag: It has a bug that makes it skip from 1 min 0 secs to 0s 0m and display the whole last minute as 0s 0m instead of counting down seconds.
[countdown]24:00 CEST[/countdown]
It also works with dates and/or hours.
[countdown]4.4.2017 24:00 CEST[/countdown]
Tomorrow works with countdown tag:
[countdown]tomorrow[/countdown]
It also works like a normal countdown timer, counting down from the moment of posting (?):
[countdown]10 hours 2min 2secs[/countdown]
It can be used for years, months, days, hours, minutes and seconds:
[countdown]2 years 2 months 2 days 2 hours 2min 2secs[/countdown]
It displays in this order:
days & hours
hours & minutes
minutes & seconds
If there's no more full days, it starts using hours as first, if there's no more full hours, then it starts using minutes.
I also noticed you can use yesterday, today, now and tomorrow with time/date/countdown tags as well. Yesterday, today and tomorrow round the time to the closest (?) hour, while now doesn't.
Now and today with the time tag:
[time]now[/time]
15:25 GMT (+00:00)
[time]today[/time]
15:00 GMT (+00:00)
You can also use yesterday, today, tomorrow and now with the date tag:
[date]yesterday[/date]
Monday, May 13 3:00pm GMT (GMT+00:00)
[date]today[/date]
Tuesday, May 14 3:00pm GMT (GMT+00:00)
[date]now[/date]
Tuesday, May 14 3:25pm GMT (GMT+00:00)
[date]tomorrow[/date]
Wednesday, May 15 3:00pm GMT (GMT+00:00)
Keep in mind the bugs/features that are listed at the top of the post, because the result might not be what you expect, so test it first.
Some time zone abbreviations don't work properly, but "GMT±x" and "GMT±xx:xx" work for all regions: "GMT-4" for Eastern US during summer (EDT) "GMT+9" for Korea "GMT+09:30" for Central Australia during winter "GMT+05:45" for Nepal etc.
[countdown]22 Jan 2102[/countdown] [countdown]22 Feb 2102[/countdown] [countdown]22 Mar 2102[/countdown] [countdown]22 Apr 2102[/countdown] [countdown]22 May 2102[/countdown] [countdown]22 Jun 2102[/countdown] [countdown]22 Jul 2102[/countdown] [countdown]22 Aug 2102[/countdown] [countdown]22 Sep 2102[/countdown] = [countdown]22 Sept 2102[/countdown] [countdown]22 Oct 2102[/countdown] [countdown]22 Nov 2102[/countdown] [countdown]22 Dec 2102[/countdown]
Normal abbreviation rule seems to apply. Period after 3 letters is optional (ex. "Dec" = "Dec.")
=
Btw, the content in this OP is so helpful that it's a shame that this thread doesn't have more viwers. I don't know where it should belong, but not many people check blog threads after all. A link to this thread from "BBCode Tips" when creating a new thread would be nice. Anyways, thank you wo1fwood for a great thread!!
haha thanks. Yea I should look into it, especially for visibility reasons as blogs make this somewhat hidden. Also nice find quirinus, though I'm finding countdown to tomorrow (or yesterdays date) kind of funny. What happens when you update the thread? Does the countdown reset to the last edit date, or thread post date?
Edit: ok i reorganized the thread to something I hope is a little better, it's now separated by use, so colors, text styles and the like are all in one section now. All I need to do is add in countdown and I'm up to date. Also I was able to confirm that the countdown timer goes off of post date, not edit date.
Also, going to add in a few things for manual of style and document setup when I can.
Yay, I finally finished updating this thing! I also added the [h] tag to the list as well. Biggest addition is the new section on Document formatting and Manuals of Style.
EPT![[image loading]](http://www.teamliquid.net/staff/monk/PvZ_guide/hr_list_indent.jpg)
![[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.BoxeR
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/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}
![[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)
It's probably the most retarded thing on TL to make people click 20 times to read your content instead of using a table of contents like every other presentation of content in the history of the internet and everything ever. ![[image loading]](http://www.teamliquid.net/tlpd/images/Zicon_small.png)
, ![[image loading]](http://www.teamliquid.net/tlpd/images/Picon_small.png)
, or ![[image loading]](http://www.teamliquid.net/tlpd/images/Ticon_small.png)
. 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.![[image loading]](http://www.teamliquid.net/images/usericons/banling.png)
![[image loading]](http://www.teamliquid.net/tlpd/images/common/gold.png)
![[image loading]](http://www.teamliquid.net/tlpd/images/common/silver.png)
![[image loading]](http://www.teamliquid.net/staff/Hot_Bid/SC2T_small2.png)
![[image loading]](http://www.teamliquid.net/images/race/SC2T10.png)
![[image loading]](http://www.teamliquid.net/staff/Hot_Bid/SC2Z_small.png)
![[image loading]](http://www.teamliquid.net/images/race/SC2Z10.png)
![[image loading]](http://www.teamliquid.net/staff/Hot_Bid/SC2P_small.png)
![[image loading]](http://www.teamliquid.net/images/race/SC2P10.png)
![[image loading]](http://www.teamliquid.net/tlpd/images/Ricon.png)
![[image loading]](http://i.imgur.com/EyBaN.png)
transparent 
:ru: (oops supposed to be Russia 
![[image loading]](http://wiki.teamliquid.net/starcraft/images2/9/9a/Yt2012ico.png)
![[image loading]](https://i.imgur.com/01Zjzak.jpg)
