EPTBBCode on TeamLiquid.net: A Content Creators Guide - Page 4
| Blogs > Deleted User 135096 |
|
drooL
United Kingdom2108 Posts
| ||
|
Deleted User 135096
3624 Posts
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 | ||
|
TBone-
United States2309 Posts
| ||
monk
United States8476 Posts
| ||
|
Mr. PotatoHead
112 Posts
| ||
zatic
Zurich15310 Posts
 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. GJ on this guide! | ||
|
og8456
Korea (South)26 Posts
| ||
|
qrs
United States3637 Posts
There's a trick to work around the lack of a "noparse" tag. + Show Spoiler [demonstration] + 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 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. Table of Contents
[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 .................................... List of Available Tags [anchor] [list] and [*] [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] URL Link 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: [url=#2]Go to First Post[/url] Go to First Post [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] 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). <code> some text</code> some text + Show Spoiler [code tag messing with the window size] + If the text in the code tag is on a single line and is long enough, it will change the overall window size of the thread to a different size, but only in the preview pane (not 740px wide) [date] top Date is pretty simple as dated text within this tag will be formatted to the viewers time zone. [date]June 22 2010 12:00 GMT[/date] Tuesday, Jun 22 12:00pm GMT (GMT+00:00) [green] top Colors text green. [green]Green Text[/green] Green Text [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] [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. [img]http://www.some_image_url_location[/img] ![[image loading]](http://cdn.overclock.net/3/35/35382382_4X20f_ph.png) [img]broken_image_from_using_the_wrong_url[/img] ![[image loading]](http://imgur.com/aVgu5) [img]http://www.original_image_size_url_location[/img] ![[image loading]](http://cdn.overclock.net/2/2c/2cdb5dfd_4X20f.png) [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/>
<br/>
Finally, like the code tag, having too much text on a single line will change the width of the preview thread window if there are no spaces within the text. Of course this again is only in the preview pane, but is helpful in making proper styling decisions. + Show Spoiler [list changing with window width] +
[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. [poll]34103[/poll] Poll: Main Query Option Two (51) Option One (50) 101 total votes Your vote: Main Query [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. [quote]Quoted Text[/quote] Quoted Text [red] top Colors text red. [red]Red Text[/red] Red Text [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] [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]A normal spoiler tag[/spoiler] + Show Spoiler + A normal spoiler tag [spoiler=metadata text within the tag but not inside can be put here. + Show Spoiler [metadata text within the tag but not i…] + A spoiler tag with metadata [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 ![[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 ![[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.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). <tlpd#players#225#T>BoxeR</tlpd>
 BoxeR<tlpd#maps#199#korean#Jungle World>Heartbreak Ridge</tlpd> Heartbreak Ridge Heartbreak Ridge [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] Item representing the hyperlink It should also be noted that posting a raw hyperlink into a thread without the url tag still outputs as a url hyperlink, but you cannot style the text in any way if you wish to keep this functionality. We can easily see how trying to italicize the text negates the url behavior below: http://www.teamliquid.net http://www.teamliquid.net [i]http://www.teamliquid.net[/i] http://www.teamliquid.net [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: [wiki]Main_Page[/wiki]  Main PageWe can see however that if we don't capitalize properly, wiki links become invalid and will link to pages with no data. It is also not necessary to include the underscore symbol _ as this is automatically added if absent. A broken main page, and the working Main Page.Additionally we can also use the wiki tag as a url, by indicating the url link, and then adding in the content representing that link. The following would be the use of an alternate text. Only the url information after ../starcraft/ is needed in these cases. [wiki=2012_Tving_OSL/24_Dual_Tournament]A Generic Name[/wiki] A Generic NameFinally, posting a Liquipedia link without BBCode will be automatically wiki-ized. http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament [wiki2] top The wiki2 tag works exactly the same as the wiki tag, but only for StarCraft 2. [wiki2]Main_Page[/wiki2] Main PageCombinations, Atypical Uses, and Other Symbols top So a lot of the uses for the above tags are pretty obvious, however we can also use them in atypical ways, or combine them to produce some interesting effects. For instance, if we want to indent a section of text, we can use the list tag, and just not use any list item tags [*]. The following would be the result of this usage: [list]The following
section of text can be indented with the use of the list tag easily Additionally, we can center this entire section, which will be additionally indented as well. [center]The following 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 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 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] 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 Possible Heading 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.. [url=http://www.teamliquid.net][i]Team Liquid[/i][/url] Team Liquid ...or if we want to additionally color it to follow our own style, we can do the following: [url=http://www.teamliquid.net][green][i]Team Liquid[/i][/green][/url] Team Liquid Now let's say we want to use it as some kind of heading for our document. We can easily add some big and bold tags to make the appropriate changes. [url=http://www.teamliquid.net][green][big][big][b][i]Team Liquid[/i][/b][/big][/big][/green][/url] Team Liquid Briefly mentioned before, we can also use images as hyperlinks if we wish. The following example shows the use of an image as a hyperlink, rather than text. [url=http://www.teamliquid.net/forum/viewmessage.php?topic_id=32696] ![[image loading]](http://www.teamliquid.net/images/usericons/banling.png) Expanding on our image and url tag, if we wanted to have a specifically sized image that links to the original sized image, all we need to do is follow the above idea with using images as hyperlinks and use the url of the original image in the url tag, while using a placeholder image in the image tag (remembering that imgur does this automatically). [url=original_image_url][img]placeholder_image_url[/img][/url] While we don't have a table option to present tabular data, we can use the code tag to approximate this behavior. If we took our tag list and wanted to format it to display in 2 columns we simply need to just add the proper amount of space to format this content. Note that when adding spacing that using tab in MS Word for example will produce a tabbed space in the code tag. Because code uses a monotype font we can also always align to the right or left of the text, though aligning to the right will take slightly more effort. [anchor] [img] Interestingly enough we can also encompass our code tag with a center tag, so that the text is centered within, though you can see a little more tweaking would be necessary to line up our columns properly. [anchor] [img] We can also get somewhat creative with our use of images to create tables, or images next to one another. Say if we wanted to create 3 columns of images on the same line, we can use the indent tag, image tag, and center tag to format this idea. [center][img]Column 1[/img][indent][img]Column 2[/img][indent][img]Column 3[/img][/center] ![[image loading]](http://i.imgur.com/1y6OA.png) 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. Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 When making larger or more intricate documents creating a Table of Contents is often necessary for compartmental or structural reasons. There are a number of ways to go about making one, though the more complex the table, the more oddly we have to format in order to achieve our desired result. As an example, take the Table of Contents of this document and note the somewhat odd way that it was formatted. In a text document it seems rather odd, but the end result is a relatively clean centered two column look that is anchor capable.
[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 .................................... 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] 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: [img]http://www.teamliquid.net/tlpd/images/maps/dl.gif[/img] ![[image loading]](http://www.teamliquid.net/tlpd/images/maps/dl.gif) ![[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://www.teamliquid.net/tlpd/images/common/gold.png) ![[image loading]](http://www.teamliquid.net/tlpd/images/common/silver.png) 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. [img]http://www.teamliquid.net/staff/Hot_Bid/SC2T_small2.png[/img] ![[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://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} 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. █████████████████████████████████████████████████████████████████████████████████ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ We can also additionally color these codes or make them larger or smaller, which can present some very interesting ideas for formatting. ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 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 Examples top 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.
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 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!  Some examples of clean or interesting BBCode usage $11,000 GIGABYTE ESPORTS LAN Invitational in SoCal: http://www.teamliquid.net/forum/viewmessage.php?topic_id=332111 [G] Positioning, Formations, and Tactics: http://www.teamliquid.net/forum/viewmessage.php?topic_id=187892 [G] PvP: An Overview/Observing PvP: http://www.teamliquid.net/forum/viewmessage.php?topic_id=329091 [G] WoL Openings/Timings: http://www.teamliquid.net/forum/viewmessage.php?topic_id=202400 An Overview of Mouse Technology: http://www.teamliquid.net/forum/viewmessage.php?topic_id=333648 Dolby SC2 Open SoCal Tournament: http://www.teamliquid.net/forum/viewmessage.php?topic_id=300245 How to E-Sports: http://www.teamliquid.net/forum/viewmessage.php?topic_id=334375 How to Use Team Liquid [FAQ 2.0]: http://www.teamliquid.net/forum/viewmessage.php?topic_id=269873 SC2 Korean/Foreigner Transfer List: http://www.teamliquid.net/blogs/viewblog.php?id=290015 The Ultimate Mouse Thread: http://www.teamliquid.net/forum/viewmessage.php?topic_id=174311 | ||
|
Deleted User 135096
3624 Posts
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. There's a trick to work around the lack of a "noparse" tag. + Show Spoiler [demonstration] + 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 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. Table of Contents
[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 .................................... List of Available Tags [anchor] [list] and [*] [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] URL Link 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: [url=#2]Go to First Post[/url] Go to First Post [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] 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). <code> some text</code> some text + Show Spoiler [code tag messing with the window size] + If the text in the code tag is on a single line and is long enough, it will change the overall window size of the thread to a different size, but only in the preview pane (not 740px wide) [date] top Date is pretty simple as dated text within this tag will be formatted to the viewers time zone. [date]June 22 2010 12:00 GMT[/date] Tuesday, Jun 22 12:00pm GMT (GMT+00:00) [green] top Colors text green. [green]Green Text[/green] Green Text [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] [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. [img]http://www.some_image_url_location[/img] [img]broken_image_from_using_the_wrong_url[/img] [img]http://www.original_image_size_url_location[/img] [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/>
<br/>
Finally, like the code tag, having too much text on a single line will change the width of the preview thread window if there are no spaces within the text. Of course this again is only in the preview pane, but is helpful in making proper styling decisions. + Show Spoiler [list changing with window width] +
[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. [poll]34103[/poll] Poll: Main Query Option Two (51) Option One (50) 101 total votes Your vote: Main Query [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. [quote]Quoted Text[/quote] Quoted Text [red] top Colors text red. [red]Red Text[/red] Red Text [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] [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]A normal spoiler tag[/spoiler] + Show Spoiler + A normal spoiler tag [spoiler=metadata text within the tag but not inside can be put here. + Show Spoiler [metadata text within the tag but not i…] + A spoiler tag with metadata [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). <tlpd#players#225#T>BoxeR</tlpd>
BoxeR<tlpd#maps#199#korean#Jungle World>Heartbreak Ridge</tlpd> Heartbreak Ridge Heartbreak Ridge [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] Item representing the hyperlink It should also be noted that posting a raw hyperlink into a thread without the url tag still outputs as a url hyperlink, but you cannot style the text in any way if you wish to keep this functionality. We can easily see how trying to italicize the text negates the url behavior below: http://www.teamliquid.net http://www.teamliquid.net [i]http://www.teamliquid.net[/i] http://www.teamliquid.net [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: [wiki]Main_Page[/wiki] Main PageWe can see however that if we don't capitalize properly, wiki links become invalid and will link to pages with no data. It is also not necessary to include the underscore symbol _ as this is automatically added if absent. A broken main page, and the working Main Page.Additionally we can also use the wiki tag as a url, by indicating the url link, and then adding in the content representing that link. The following would be the use of an alternate text. Only the url information after ../starcraft/ is needed in these cases. [wiki=2012_Tving_OSL/24_Dual_Tournament]A Generic Name[/wiki] A Generic NameFinally, posting a Liquipedia link without BBCode will be automatically wiki-ized. http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament http://wiki.teamliquid.net/starcraft/2012_Tving_OSL/24_Dual_Tournament [wiki2] top The wiki2 tag works exactly the same as the wiki tag, but only for StarCraft 2. [wiki2]Main_Page[/wiki2] Main PageCombinations, Atypical Uses, and Other Symbols top So a lot of the uses for the above tags are pretty obvious, however we can also use them in atypical ways, or combine them to produce some interesting effects. For instance, if we want to indent a section of text, we can use the list tag, and just not use any list item tags [*]. The following would be the result of this usage: [list]The following
section of text can be indented with the use of the list tag easily Additionally, we can center this entire section, which will be additionally indented as well. [center]The following 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 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 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] 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 Possible Heading 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.. [url=http://www.teamliquid.net][i]Team Liquid[/i][/url] Team Liquid ...or if we want to additionally color it to follow our own style, we can do the following: [url=http://www.teamliquid.net][green][i]Team Liquid[/i][/green][/url] Team Liquid Now let's say we want to use it as some kind of heading for our document. We can easily add some big and bold tags to make the appropriate changes. [url=http://www.teamliquid.net][green][big][big][b][i]Team Liquid[/i][/b][/big][/big][/green][/url] Team Liquid Briefly mentioned before, we can also use images as hyperlinks if we wish. The following example shows the use of an image as a hyperlink, rather than text. [url=http://www.teamliquid.net/forum/viewmessage.php?topic_id=32696] Expanding on our image and url tag, if we wanted to have a specifically sized image that links to the original sized image, all we need to do is follow the above idea with using images as hyperlinks and use the url of the original image in the url tag, while using a placeholder image in the image tag (remembering that imgur does this automatically). [url=original_image_url][img]placeholder_image_url[/img][/url] While we don't have a table option to present tabular data, we can use the code tag to approximate this behavior. If we took our tag list and wanted to format it to display in 2 columns we simply need to just add the proper amount of space to format this content. Note that when adding spacing that using tab in MS Word for example will produce a tabbed space in the code tag. Because code uses a monotype font we can also always align to the right or left of the text, though aligning to the right will take slightly more effort. [anchor] [img] Interestingly enough we can also encompass our code tag with a center tag, so that the text is centered within, though you can see a little more tweaking would be necessary to line up our columns properly. [anchor] [img] We can also get somewhat creative with our use of images to create tables, or images next to one another. Say if we wanted to create 3 columns of images on the same line, we can use the indent tag, image tag, and center tag to format this idea. [center][img]Column 1[/img][indent][img]Column 2[/img][indent][img]Column 3[/img][/center] Now say we wanted to label these images. We can do that within the image itself, which would be easier overall, but we can also play around with text and the indent tag (within the center tag) to tweak how we want this to look. The only problem with this method is that 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. Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 When making larger or more intricate documents creating a Table of Contents is often necessary for compartmental or structural reasons. There are a number of ways to go about making one, though the more complex the table, the more oddly we have to format in order to achieve our desired result. As an example, take the Table of Contents of this document and note the somewhat odd way that it was formatted. In a text document it seems rather odd, but the end result is a relatively clean centered two column look that is anchor capable.
[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 .................................... 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] 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: [img]http://www.teamliquid.net/tlpd/images/maps/dl.gif[/img] 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. [img]http://www.teamliquid.net/staff/Hot_Bid/SC2T_small2.png[/img] 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. █████████████████████████████████████████████████████████████████████████████████ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ We can also additionally color these codes or make them larger or smaller, which can present some very interesting ideas for formatting. ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ 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 Examples top 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.
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 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! Some examples of clean or interesting BBCode usage $11,000 GIGABYTE ESPORTS LAN Invitational in SoCal: http://www.teamliquid.net/forum/viewmessage.php?topic_id=332111 [G] Positioning, Formations, and Tactics: http://www.teamliquid.net/forum/viewmessage.php?topic_id=187892 [G] PvP: An Overview/Observing PvP: http://www.teamliquid.net/forum/viewmessage.php?topic_id=329091 [G] WoL Openings/Timings: http://www.teamliquid.net/forum/viewmessage.php?topic_id=202400 An Overview of Mouse Technology: http://www.teamliquid.net/forum/viewmessage.php?topic_id=333648 Dolby SC2 Open SoCal Tournament: http://www.teamliquid.net/forum/viewmessage.php?topic_id=300245 How to E-Sports: http://www.teamliquid.net/forum/viewmessage.php?topic_id=334375 How to Use Team Liquid [FAQ 2.0]: http://www.teamliquid.net/forum/viewmessage.php?topic_id=269873 SC2 Korean/Foreigner Transfer List: http://www.teamliquid.net/blogs/viewblog.php?id=290015 The Ultimate Mouse Thread: http://www.teamliquid.net/forum/viewmessage.php?topic_id=174311 lol nice, the html designer in me is cringing a little right now, but it's a decent work around. Will add and update the OP. | ||
|
Primadog
United States4411 Posts
| ||
|
Latham
9551 Posts
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 ^_^ Again, good stuff! | ||
|
quirinus
Croatia2489 Posts
| ||
|
DYEAlabaster
Canada1009 Posts
| ||
|
ztoa03
Philippines181 Posts
| ||
|
monk
United States8476 Posts
http://www.teamliquid.net/forum/viewmessage.php?topic_id=338554 http://www.teamliquid.net/forum/viewmessage.php?topic_id=327905 | ||
|
Deleted User 135096
3624 Posts
| ||
|
JOJOsc2news
3000 Posts
I made this thread with your help and included anchor and indent: http://www.teamliquid.net/forum/viewmessage.php?topic_id=339393 I wanted to include the [audio] code as well but it didn't work with soundcloud unfortunately. Thanks! | ||
|
Deleted User 135096
3624 Posts
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: http://www.teamliquid.net/forum/viewmessage.php?topic_id=339393 I wanted to include the [audio] code as well but it didn't work with soundcloud unfortunately. Thanks! yea you need to point to the actual file location (wma, mp3, aiff, etc...), so if you don't have that then it won't work unfortunately. | ||
|
Deleted User 135096
3624 Posts
| ||
|
Primadog
United States4411 Posts
![[image loading]](http://i.imgur.com/EyBaN.png) transparent images . | ||
| ||
