Gorbash Kazdar
2004-09-12, 08:40 PM
This thread is intended to help everyone attempting particular formatting in their posts. This is done with bullentin board tags, which are little snippets of code. This is known as UBB (universal bulletin board) code. UBB is based on HTML, so if you know HTML it gives you a good place to start from. These codes exist because HTML is not enabled on most message boards, to prevent abuses, so UBB tags are thus more limited.
If you have further questions, feel free to PM me or just ask them here. :)
I'm experimenting with a few of these tags to see if I can do some other things with them - if I find more out, I'll add to this post.
Basics of Tags
All tags are enclosed in square brackets - [ ]. Whenever you use a code, you have to "close" it. This is done by putting a close tag at the end. A close tag consists simply of the code's name with a / in front of it – [/ ]. This close tag does not include variable settings - for example, in the color tag you do not have the =color part in the close tag. You'll see what I mean in the examples below. If you forget a close tag, your message won't look right at best, and may not even be readable at worst.
In most cases, you can't use spaces within a tag. For example, when using the color tag you type LimeGreen instead of Lime Green.
You can usually use multiple tags on one thing - for example,
this has five tags affecting it.
You'll notice that a lot of codes will add a line break after the close tag. Be careful of adding extra returns after these, or your post will have excess white space.
As a general rule, whenever you use complex tags, preview your message to make sure everything looks right, then post it.
Also, not all tags work in all browsers. Just look down to the replies for an example of this. Glow and Shadow, for example, do not work in Firefox.
Below you will note that example code will be in small gray boxes; this is because they have been placed between Code tags.
This is an example of text in a
tag. I can’t provide an example of the closing tag in this case, since that will end the Code section, but all you need to do is put a / in front of Code.
Standard Formatting - Kind of the obvious stuff, but have to start somewhere, eh?
Bold
Italicized
Underline
Strikethrough
Subscript
Superscript
Without code, that list would come out as follows:
Bold
Italicized
Underline
Strikethrough
Subscript
Superscript
The line below this section is added with the Horizontal Rule tag; this tag does not have or need a close tag, contrary to the normal rule.
[hr]
[hr]
Linking - One of the most commonly used codes. These codes override color formatting unless the color codes are placed inside the URL codes. See below, in the Color section, for more on colored links.
Basic link:
http://www.example.com
Thus, http://www.wizards.com
Never put spaces after the first tag or before the closing tag.
Link with text:
This is only an example (http://www.example.com)
Thus, Wizards of the Coast (http://www.wizards.com)
You can also do a specific e-mail link with or without text:
[email protected]
[email protected]
Like with the url tag, don't use spaces here.
This is only an example e-mail ([email protected])
My Email ([email protected])
Note that this particular kind of link automatically opens your default e-mail client.
[hr]
Quotes - A very commonly used tag, as one often wants to reference what someone else said in their own post. The basic quote tag can be used without any special information; this provides no links or information about who one is quoting. The advanced form adds a link (generally to where the quote was taken from), the date, and the author's name. Note that it appears you must include all three of these to use any of them; if you leave one out, then the others will not work (you couldn't just have author, or just link and date, for example).
The quote option seen on posts gathers the information for a particular post automatically and in a somewhat different manner. It may be preferable to use this option and copy paste rather than fill in the information yourself.
When quoting, the text will be in a brown box with the Quote heading. This makes it clear you are reposting something someone else said. As a rule, do not change quote text. If you must change text in a quote, make sure its clear you have done so, and clear exactly what you changed.
Quotee: This is an example of a simple quote.
Anonymous: Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for the rest of his life.
This is an example of an advanced quote.
This thread includes a number of abbreviations, acronyms, and terms commonly or uncommonly used on these boards that may not be common knowledge.
[hr]
Images - This embeds an image into your post. Some sites dislike people linking images from them, since it takes up bandwidth. This will lead to an error message, or occasionally a sort of booby trap image that tends to be very disturbing. Always preview images before posting to avoid embarrasment. Also, you can embed an image in the middle of a url code. You can usually find an image's url by right clicking on it, if you use Windows. Threads with images take longer to load, especially for very large images, so always consider linking to the image instead of embedding it. Like the url codes, never put spaces between the basic tags and the contained information. Also, it appears the board does not recognize spaces or the code for spaces (%20) in image urls, so any URLs that contain these will not allow the pictures to display properly. Keep this in mind when saving files - use underscores _ or just keep the file name to one word.
http://www.example.com/example.gif
http://plaza.ufl.edu/redwolf/gorbash2.gif
[hr]
Alignments - it should be noted that the default alignment of text is to the left side, so generally the left alignment tag will be unused, but is included for completeness. Also, YaBB adds a line break after the closing tag for alignments, so if you add one at the end, the text following a block with a different alignment will have be two lines down instead of one.
Center
Right
Left
That list comes out like this:
Center
Right
Left
[hr]
Colored Text - Colored text is useful for highlighting particular words, and is especially useful in the PbP games. However, be careful using it - some colors are hard to read, and overusing color is considered poor posting etiquette.
Your text.
Named colors that can be used on this forum include: Amber, Aqua, Aquamarine, Beige, Bisque, Black, Blue, Brick, Brown, Charcoal, Chocolate, Cyan, DarkGreen, Dred, Ember, Fire, Flesh, Forange, Fuschia, Fushcia, Gold, Gray or Grey, Green, Indigo, Lime, LimeGreen, LGreen, Maroon, Navy, Olive, Orange, Pastel, Peach, Pink, Purple, Red, RoyalBlue, Salmon, SeaBlue, Sienna, Silver, Slate, Tan, Teal, Turquoise, White, Yellow
This is likely not a complete list (and, no, I have no idea why "Peach" gives you a green, or why any of the other odd name/color choices are the way they are, either).
Hex code refers to using a six digit number to identify a specific color. Hex codes begin with a # sign followed by six digits; these digits are in hexadecimal so they can be 0-9 or A-F (0 being lowest and F being highest). The first two digits are for red, the second two for green, and the last two for blue (#RRGGBB). The hex code for bright red is thus #FF0000.
Additionally, black, blue, green, red, and white can all be entered directly as codes to make text the chosen color.
black, blue, green, red, and white
Me - Perhaps the most anomalous code for this forum, the "me" command auto-formats a line to turn it into an action. Placing it at the beginning of a line formats the text red and italic, then adds an asterisk followed by the poster's name, followed by the text (action) the poster wishes to include. This particular command likely stems from IRC and similar chat programs. The particularly odd feature of this code is that it does not use brackets as other codes do, nor does it have a closing tag. The effect ends once a carriage return is added. This code interacts with other formatting codes in a somewhat unusual manner, but does not exactly override them.
/me does something
/me writes a guide
Spoilers - A special use of color tags is to mask spoiler information in a post. In posts with a white background, any of the following tags work:
Spoiler text., Spoiler text., or Spoiler text.
Spoiler text., Spoiler text., or Spoiler text.
However, in half the posts the background color is different. For these posts, the following color code is used:
Spoiler text.
Spoiler text.
Alternatively, placing the text in a quote will allow it to be masked the same way in any post. This has the added benefit of making it clear that your post contains spoiler text.
Spoiler text.
Spoiler text.
Colored Links - As mentioned above, in the Linking section, the URL code overrides color formatting outside of it; but if color tags are added inside of the URL tags, the link can be made to be a certain color. However, in order for this to work, you must close the outside color tag before the URL code.
Though this entire sentence is green, I had to end the first color tag here, start a new one after the URL code for the link, and close it before I close the URL code, (http://www.giantitp.com/cgi-bin/yabb/YaBB.pl?board=news;action=display;num=1095036000) and then open a new color code for this ending.
Colored text.Your colored link text goes here (http://www.example.com)More colored text.
[hr]
Text Size - Like color, useful for highlighting words and making headings. Again, best if used sparingly, but often good when used with bolding and colors.
Your text.
The default size is 2; the largest size is 10 and the smallest is 1.
[hr]
Font Face - You can change the font your text is in, referred to as its face. It is very important to remember that the font you select will only show up if the viewer has it on their computer, so try to stick to basic fonts like Courier, Times New Roman, and Verdana. The board's default font is Arial. Again, this tag should be used on a very limited basis.
Your text.
Here's some text in Courier
[hr]
Moving, Shadow, and Glow - I include these mainly for completeness. They can be very annoying when used, so be very careful.
Your text goes here.
Moving text!
Movement always goes towards the left.
Your text goes here.
Glowing text!
The variable at the end, the 300, does not appear to do anything when changed. The default number of pixels affected is 2.
Your text goes here.
Shadowed text!.
Changing the 300 at the end seems to make the code nonfunctional. Shadow direction is either left or right.
[hr]
Preserving Text and Code - Sometimes, you want your text to come out exactly as you typed it in, without anything being changed. The nice thing about this forum is that this is generally true of the posts anyways. However, if you absolutely need something to look like you typed it, you can use the preformatted text tag.
Your text goes here.
Preformatted text.
The teletype tag makes text look similar to the preformatted text, but doesn't actually preserve the formatting. Its used to make sure the text is readable on any computer, but has limited use.
Your text goes here.
Teletype text.
[hr]
Lists - A list can make your points on a topic much easier to read. Lists can be nested to make sub-lists on each point, like a paper outline. The default list uses bulletin points. Each point includes an item tag to indicate it; you'll note that this tag does not need or have a closing tag, contrary to the normal rule.
Text goes here.
More text.
More text.
More text.
Text goes here for a nested list.
More text.
More text.
First point.
Second point.
Third point.
Fourth point.
Subpoint one.
Subpoint two.
Fifth point.
[hr]
Tables - Perhaps one of the hardest to use tag sets of all, but sometimes you just need a table. The basic table tag simply indicates that you're starting a table, the work is done with row and cell tags.
Starting and closing tags for a table.
{table] and [/table]
Starting and closing tags for a row.
and
Starting and closing tags for a particular cell.
and
These tags revert all text formatting to default, so you have to format each cell individually. The alignment tags align only within the particular cell.
Now, getting a table to look right is a pain. Since the number of columns in a particular row is determined by the number of cells you code in, if you need to skip a column, you must include a blank cell.
Here's an example;
{table]
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
[/table]
{table]
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
[/table]
[hr]
Smilies – Smilies are often included to show the emotion behind a statement, since otherwise it can be hard to interpret typed text. This forum supports 16 different smilies, shown below. The 8) smiley in particular can be annoying because of it’s particular code; if you don’t want to use smilies in a post, there is a check box you can click on at the bottom of the post form to remove them and preserve the code that would otherwise produce a smiley
{table]
[code]:)
:)
;)
;)
:D
:D
;D
;D
>:(
>:(
:(
:(
:o
:o
8)
8)
???
???
::)
::)
:P
:P
:-[
:-[
:-X
:-X
:-/
:-/
:-*
:-*
:'(
:'(
[/table]
[hr]
I hope this helps everyone out with formatting posts and using tags. Thanks to everyone who tested out code, offered suggestions, and reported new tricks!
If you have further questions, feel free to PM me or just ask them here. :)
I'm experimenting with a few of these tags to see if I can do some other things with them - if I find more out, I'll add to this post.
Basics of Tags
All tags are enclosed in square brackets - [ ]. Whenever you use a code, you have to "close" it. This is done by putting a close tag at the end. A close tag consists simply of the code's name with a / in front of it – [/ ]. This close tag does not include variable settings - for example, in the color tag you do not have the =color part in the close tag. You'll see what I mean in the examples below. If you forget a close tag, your message won't look right at best, and may not even be readable at worst.
In most cases, you can't use spaces within a tag. For example, when using the color tag you type LimeGreen instead of Lime Green.
You can usually use multiple tags on one thing - for example,
this has five tags affecting it.
You'll notice that a lot of codes will add a line break after the close tag. Be careful of adding extra returns after these, or your post will have excess white space.
As a general rule, whenever you use complex tags, preview your message to make sure everything looks right, then post it.
Also, not all tags work in all browsers. Just look down to the replies for an example of this. Glow and Shadow, for example, do not work in Firefox.
Below you will note that example code will be in small gray boxes; this is because they have been placed between Code tags.
This is an example of text in a
tag. I can’t provide an example of the closing tag in this case, since that will end the Code section, but all you need to do is put a / in front of Code.
Standard Formatting - Kind of the obvious stuff, but have to start somewhere, eh?
Bold
Italicized
Underline
Strikethrough
Subscript
Superscript
Without code, that list would come out as follows:
Bold
Italicized
Underline
Strikethrough
Subscript
Superscript
The line below this section is added with the Horizontal Rule tag; this tag does not have or need a close tag, contrary to the normal rule.
[hr]
[hr]
Linking - One of the most commonly used codes. These codes override color formatting unless the color codes are placed inside the URL codes. See below, in the Color section, for more on colored links.
Basic link:
http://www.example.com
Thus, http://www.wizards.com
Never put spaces after the first tag or before the closing tag.
Link with text:
This is only an example (http://www.example.com)
Thus, Wizards of the Coast (http://www.wizards.com)
You can also do a specific e-mail link with or without text:
[email protected]
[email protected]
Like with the url tag, don't use spaces here.
This is only an example e-mail ([email protected])
My Email ([email protected])
Note that this particular kind of link automatically opens your default e-mail client.
[hr]
Quotes - A very commonly used tag, as one often wants to reference what someone else said in their own post. The basic quote tag can be used without any special information; this provides no links or information about who one is quoting. The advanced form adds a link (generally to where the quote was taken from), the date, and the author's name. Note that it appears you must include all three of these to use any of them; if you leave one out, then the others will not work (you couldn't just have author, or just link and date, for example).
The quote option seen on posts gathers the information for a particular post automatically and in a somewhat different manner. It may be preferable to use this option and copy paste rather than fill in the information yourself.
When quoting, the text will be in a brown box with the Quote heading. This makes it clear you are reposting something someone else said. As a rule, do not change quote text. If you must change text in a quote, make sure its clear you have done so, and clear exactly what you changed.
Quotee: This is an example of a simple quote.
Anonymous: Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for the rest of his life.
This is an example of an advanced quote.
This thread includes a number of abbreviations, acronyms, and terms commonly or uncommonly used on these boards that may not be common knowledge.
[hr]
Images - This embeds an image into your post. Some sites dislike people linking images from them, since it takes up bandwidth. This will lead to an error message, or occasionally a sort of booby trap image that tends to be very disturbing. Always preview images before posting to avoid embarrasment. Also, you can embed an image in the middle of a url code. You can usually find an image's url by right clicking on it, if you use Windows. Threads with images take longer to load, especially for very large images, so always consider linking to the image instead of embedding it. Like the url codes, never put spaces between the basic tags and the contained information. Also, it appears the board does not recognize spaces or the code for spaces (%20) in image urls, so any URLs that contain these will not allow the pictures to display properly. Keep this in mind when saving files - use underscores _ or just keep the file name to one word.
http://www.example.com/example.gif
http://plaza.ufl.edu/redwolf/gorbash2.gif
[hr]
Alignments - it should be noted that the default alignment of text is to the left side, so generally the left alignment tag will be unused, but is included for completeness. Also, YaBB adds a line break after the closing tag for alignments, so if you add one at the end, the text following a block with a different alignment will have be two lines down instead of one.
Center
Right
Left
That list comes out like this:
Center
Right
Left
[hr]
Colored Text - Colored text is useful for highlighting particular words, and is especially useful in the PbP games. However, be careful using it - some colors are hard to read, and overusing color is considered poor posting etiquette.
Your text.
Named colors that can be used on this forum include: Amber, Aqua, Aquamarine, Beige, Bisque, Black, Blue, Brick, Brown, Charcoal, Chocolate, Cyan, DarkGreen, Dred, Ember, Fire, Flesh, Forange, Fuschia, Fushcia, Gold, Gray or Grey, Green, Indigo, Lime, LimeGreen, LGreen, Maroon, Navy, Olive, Orange, Pastel, Peach, Pink, Purple, Red, RoyalBlue, Salmon, SeaBlue, Sienna, Silver, Slate, Tan, Teal, Turquoise, White, Yellow
This is likely not a complete list (and, no, I have no idea why "Peach" gives you a green, or why any of the other odd name/color choices are the way they are, either).
Hex code refers to using a six digit number to identify a specific color. Hex codes begin with a # sign followed by six digits; these digits are in hexadecimal so they can be 0-9 or A-F (0 being lowest and F being highest). The first two digits are for red, the second two for green, and the last two for blue (#RRGGBB). The hex code for bright red is thus #FF0000.
Additionally, black, blue, green, red, and white can all be entered directly as codes to make text the chosen color.
black, blue, green, red, and white
Me - Perhaps the most anomalous code for this forum, the "me" command auto-formats a line to turn it into an action. Placing it at the beginning of a line formats the text red and italic, then adds an asterisk followed by the poster's name, followed by the text (action) the poster wishes to include. This particular command likely stems from IRC and similar chat programs. The particularly odd feature of this code is that it does not use brackets as other codes do, nor does it have a closing tag. The effect ends once a carriage return is added. This code interacts with other formatting codes in a somewhat unusual manner, but does not exactly override them.
/me does something
/me writes a guide
Spoilers - A special use of color tags is to mask spoiler information in a post. In posts with a white background, any of the following tags work:
Spoiler text., Spoiler text., or Spoiler text.
Spoiler text., Spoiler text., or Spoiler text.
However, in half the posts the background color is different. For these posts, the following color code is used:
Spoiler text.
Spoiler text.
Alternatively, placing the text in a quote will allow it to be masked the same way in any post. This has the added benefit of making it clear that your post contains spoiler text.
Spoiler text.
Spoiler text.
Colored Links - As mentioned above, in the Linking section, the URL code overrides color formatting outside of it; but if color tags are added inside of the URL tags, the link can be made to be a certain color. However, in order for this to work, you must close the outside color tag before the URL code.
Though this entire sentence is green, I had to end the first color tag here, start a new one after the URL code for the link, and close it before I close the URL code, (http://www.giantitp.com/cgi-bin/yabb/YaBB.pl?board=news;action=display;num=1095036000) and then open a new color code for this ending.
Colored text.Your colored link text goes here (http://www.example.com)More colored text.
[hr]
Text Size - Like color, useful for highlighting words and making headings. Again, best if used sparingly, but often good when used with bolding and colors.
Your text.
The default size is 2; the largest size is 10 and the smallest is 1.
[hr]
Font Face - You can change the font your text is in, referred to as its face. It is very important to remember that the font you select will only show up if the viewer has it on their computer, so try to stick to basic fonts like Courier, Times New Roman, and Verdana. The board's default font is Arial. Again, this tag should be used on a very limited basis.
Your text.
Here's some text in Courier
[hr]
Moving, Shadow, and Glow - I include these mainly for completeness. They can be very annoying when used, so be very careful.
Your text goes here.
Moving text!
Movement always goes towards the left.
Your text goes here.
Glowing text!
The variable at the end, the 300, does not appear to do anything when changed. The default number of pixels affected is 2.
Your text goes here.
Shadowed text!.
Changing the 300 at the end seems to make the code nonfunctional. Shadow direction is either left or right.
[hr]
Preserving Text and Code - Sometimes, you want your text to come out exactly as you typed it in, without anything being changed. The nice thing about this forum is that this is generally true of the posts anyways. However, if you absolutely need something to look like you typed it, you can use the preformatted text tag.
Your text goes here.
Preformatted text.
The teletype tag makes text look similar to the preformatted text, but doesn't actually preserve the formatting. Its used to make sure the text is readable on any computer, but has limited use.
Your text goes here.
Teletype text.
[hr]
Lists - A list can make your points on a topic much easier to read. Lists can be nested to make sub-lists on each point, like a paper outline. The default list uses bulletin points. Each point includes an item tag to indicate it; you'll note that this tag does not need or have a closing tag, contrary to the normal rule.
Text goes here.
More text.
More text.
More text.
Text goes here for a nested list.
More text.
More text.
First point.
Second point.
Third point.
Fourth point.
Subpoint one.
Subpoint two.
Fifth point.
[hr]
Tables - Perhaps one of the hardest to use tag sets of all, but sometimes you just need a table. The basic table tag simply indicates that you're starting a table, the work is done with row and cell tags.
Starting and closing tags for a table.
{table] and [/table]
Starting and closing tags for a row.
and
Starting and closing tags for a particular cell.
and
These tags revert all text formatting to default, so you have to format each cell individually. The alignment tags align only within the particular cell.
Now, getting a table to look right is a pain. Since the number of columns in a particular row is determined by the number of cells you code in, if you need to skip a column, you must include a blank cell.
Here's an example;
{table]
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
[/table]
{table]
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
Your text.
[/table]
[hr]
Smilies – Smilies are often included to show the emotion behind a statement, since otherwise it can be hard to interpret typed text. This forum supports 16 different smilies, shown below. The 8) smiley in particular can be annoying because of it’s particular code; if you don’t want to use smilies in a post, there is a check box you can click on at the bottom of the post form to remove them and preserve the code that would otherwise produce a smiley
{table]
[code]:)
:)
;)
;)
:D
:D
;D
;D
>:(
>:(
:(
:(
:o
:o
8)
8)
???
???
::)
::)
:P
:P
:-[
:-[
:-X
:-X
:-/
:-/
:-*
:-*
:'(
:'(
[/table]
[hr]
I hope this helps everyone out with formatting posts and using tags. Thanks to everyone who tested out code, offered suggestions, and reported new tricks!