BBCode

From PFWiki

Jump to: navigation, search

BBCode, or Bulletin Board Code, is a modified version of HTML made specifically for forums. A BBCode tag refers to a specific BBCode. BBCode is used instead of HTML on PokéFarm and other sites because disallowing users to use HTML prevents users from using potentially harmful codes.

Contents

Basics

Almost every BBCode is made of two parts.

  • opening tag: A keyword enclosed in square brackets, occasionally accompanied by a parameter that is specified with an equals sign. It would look like: [keyword=parameter] (or simply [keyword])
  • contents: What is between the two tags. This could be text, other BBCodes, or a required parameter that is not part of the opening tag. Many BBCodes will not make visible modifications if they do not have content to modify.
  • closing tag: A forward slash followed by the same keyword as in the opening tag enclosed in square brackets. It never has any parameters. It would look like: [/keyword]

Also, note that when using BBCode, it is important to be neat and organized. If using multiple BBCodes, make sure that you open and close them in reverse order, and do not open one BBCode inside another and then close it outside of the first.

  • For example, you should do:
[example1][example2]example text[/example2][/example1]
  • You should not do:
[example1][example2]example text[/example1][/example 2]
  • You should also not do:
[example1]example text 1 [example2] text 2[/example1] text 3[/example2]

BBCode can be used in the forums, in farmer's logs, and in signatures. In mini-logs, only the URL BBCode can be used.

Some people save specific BBCodes into templates to more easily use them when posting on the forums.

List of BBCodes

The list is in alphabetical order. The format for this list is as follows:

  • Code Name
    • the BBCode tag(s)
    • Parameter(s): What you can change about the code, if there are any.
    • Information: Any other important information, if there is any.
    • Example: An example of the BBCode in use (if it can be properly displayed).



Anchor

  • Tag
    • [anchor=AnchorName]contents[/anchor]
  • Parameters
    • Name of the anchor.
  • Information
    • Anchors allow you to link to the anchored point on a page.
    • Anchor codes can be used on many things: images, words, and so on.
    • The code is designed to be used in conjunction with a Link BBCode.
    • The anchor code will not work properly on user pages due to each tab having its own anchor.
  • Example
    • Putting # followed by the anchor name will take you to the anchored point on the page. Using the URL code to get to an anchor on a different page, the code would look like: [url=http://pokefarm.org/forum_thread?tid=???#AnchorName]contents[/url]
    • If you want to stay on the same page, use a slightly different code: [url=#AnchorName]contents[/url]
    • Forum posts all have a unique and automatic anchor: postNUMBER (where number is replaced by the real post number, like 12873). This is an example using the wiki's discussion thread: [url=http://pokefarm.org/forum_thread?tid=75633#post4549890]The first post of the thread![/url]

Return to Contents.


Audio

  • Tag
    • [audio]Source(s)[/audio]
  • Parameters
    • Audio source(s).
  • Information
    • This code allows others to listen to the source audio file.
    • The code must be used in conjunction with Source BBCode.
    • Not all browsers are compatible with all audio types; see the announcement about the Audio/Video BBCode for more information.
  • Example
    • Appearance: Bbcodex audio.png
    • Code: [audio][source=audio/ogg]http://adamhaskell.net/misc/Pirates of the Caribbean/guitar.ogg[/source][source=audio/mp3]http://adamhaskell.net/misc/Pirates of the Caribbean/guitar.mp3[/source][/audio]

Return to Contents.


Background

  • Tag
    • [background=BackgroundURL]contents[/background]
  • Parameters
    • URL of background image
    • For a solid color, use: /_img/script/pixel?c=HEX as the background URL and replace "HEX" with the hex color code (XXXXXX or XXX, X = 0 to 9 or A to F) of your desired color.
      • Alternatively, you can use the CSS BBCode with a "background" or "background-color" property included.
  • Information
    • This code places a background image behind the contents.
    • If using an image for a post background, it will automatically repeat vertically and horizontally to fill the posting space. If you do not desire horizontal repetition, ensure that your image is exactly 600 pixels wide.
  • Example
    • Bbcodex background.png

Return to Contents.


Bold

  • Tag
    • [b]contents[/b]
  • Information
    • This code is used to create bold text.
  • Example
    • This is not bold, but this is.

Return to Contents.


Center

  • Tag
    • [center]contents[/center]
  • Information
    • This code moves the contents to the center of the area that it is in.
    • If centering text in a table, a new center code must be used for each cell to be centered.
  • Example
This is centered.

Return to Contents.


Code

  • Tag
    • [code]contents[/code]
  • Information
    • This code disables BBCode until the tag is closed, allowing BBCode to be shared more easily.
    • This cannot be used to display for Code BBCodes. For those, use [ to designate an opening square bracket ([) or use some other HTML character code to break the Code BBCode.
  • Example
    • Bbcodex code.png

Return to Contents.


Color

  • Tags
    • [color=ColorName]contents[/color]
    • [color=#ColorHexCode]contents[/color]
    • [color=rgb(R,G,B)]contents[/color]
    • [color=rgba(R,G,B,A)]contents[/color]
    • [color=hsl(H,S,L)]contents[/color]
    • [color=hsla(H,S,L,A)]contents[/color]
    • For all tags, the spelling colour can be used instead of color.
  • Parameters
    • Color name
    • #RRGGBB or #RGB hex code (R, G, B = 0 to 9 or A to F)
    • RGB (Red Green Blue) color values (R, G, B = 0 to 255)
    • RGBA (Red Green Blue Alpha) color values (same as RGB, with A = 0 to 1)
    • HSL (Hue Saturation Lightness) color values
      • H = 0 to 360; a degree on the color wheel, with 0 and 360 being red, 120 being green, and 240 being blue
      • S = 0% to 100%; 0% is a gray color and 100% is the full color
      • L = 0% to 100%; 0% is completely black and 100% is completely white
    • HSLA (Hue Saturation Lightness Alpha) color values (same as HSL, with A = 0 to 1)
  • Information
    • This code is used to create colored text.
    • It cannot be seen with Colour-Based BBCodes Disabled on Forum Settings page.
    • "Alpha" versions are used when giving the text color some transparency, which is why the value is between 0 (completely transparent) and 1 (completely opaque). The value 0.5 would be half-transparent.
    • If you simply want completely invisible text, you can use "transparent" as a color name.
    • RGBA, HSL, HSLA, and the color "transparent" for text may not be compatible with outdated/older browsers.
    • For a list of color names supported in most browsers, see Wikipedia's list of X11 colors.
  • Example
    • red text

Return to Contents.


Comment

  • Tag
    • [comment]contents[/comment]
  • Information
    • This code hides the contents so that they are only visible in the post source (when being quoted or edited).
  • Example
    • Due to the nature of this code, it is impossible to give a visible example. But if your post code was something like Before [comment]Middle[/comment]& After, then people would only see Before & After.

Return to Contents.


CSS

  • Tags
    • [css=STYLE]contents[/css]
  • Parameters
    • The CSS style information, which can include quite a lot of properties.
  • Information
    • CSS can do many things that other BBCode also cover. Some of the other BBCode is simpler to use, but the strength of the CSS BBCode is its flexibility.
    • Because there are so many properties, they are not listed here. Some of the more commonly used ones are covered in the wiki's guide to Post Templates and CSS.
    • A more complete list of CSS properties can be found in this w3schools CSS Reference. That site also has a full CSS Tutorial, but the CSS BBCode can only handle the style properties.
    • Not all CSS properties will work properly on PokéFarm. Additionally, not all CSS properties are compatible with every browser, particularly the properties introduced in the newest version of CSS, CSS3.
    • Color properties can use color names, hex color codes, RGB values, and RGBA values, exactly like the color and highlight BBCodes here.
    • The CSS BBCode generally starts a new line. If you want to use it without starting a new line (like in the middle of a sentence), then use the "display: inline;" property in the style code.
    • Certain things, like the table and URL BBCodes, may not apply the CSS BBCode completely. You may need to repeat table formatting inside every table cell's BBCode and link formatting within the link BBCode.
    • It cannot be seen with Colour-Based BBCodes Disabled on the Forum Settings page.
  • Example
    • Many examples are covered in the CSS BBCode announcement, such as the following one.
    • Code: [css=background-color: #202020; border-radius: 16px; padding: 8px; font-size: 14pt; color: #ffffff]There is no limit to how much CSS you can cram in there.[/css]
    • Appearance:
There is no limit to how much CSS you can cram in there.
  • Rules Warning
    • Certain CSS propeties and attributes are against the Rules, especially in regards to the Post Box Rules.
    • CSS properties that can be used to override existing rules (such as pseudo-element !important) should not be used.

Return to Contents.


Date-Time

  • Tags
    • [datetime]YYYY-MM-DD hh:mm:ss[/datetime]
    • [datetime]correctly specified date and time[/datetime]
  • Parameters
    • The basic datetime format is YYYY-MM-DD hh:mm:ss (Year-Month-Day hour:minute:second).
    • However, there are many more possibile ways to specify date and time. You can see what might be supported on PHP.net. You can play around with the code and see what works; if the resulting time is "Never", then what you input does not work.
  • Information
    • This code displays a time in relation to the date and time given. It updates itself with every page refresh.
    • When using "YYYY-MM-DD hh:mm:ss", you should use 24-hour time when specifying the hour.
    • The time should be given in server time, as it will be calculated in accordance with the server time.
  • Example
    • There is no way to give a good example of this. Basically, if the Date-Time code was set to a time 15 seconds from your current point in time, it would display as "in 15 seconds". If the code was set to a time 2 hours ago, it would display as "2 hours ago".

Return to Contents.


Display

  • Tags
    • [display=Title]content[/display]
  • Information
    • The Display Code can be used to create a display box around a section of a post; it appears as an un-hidden hide box. A title for the box can be entered inside of the first tag.
  • Example
    • Display code.png

Return to Contents.



Font

  • Tags
    • [font=FontName]contents[/font]
    • [font='FontName1','FontName2']contents[/font]
  • Parameters
    • Name of desired font(s).
  • Information
    • This code changes the font of your text.
    • A comma-separated list of font names in single quotes can be used to designate a font just in case that the main font (the first named) is not owned by the viewer. The list can include as many fonts as you like.
  • Example
    • This is a different font than the normal font.

Return to Contents.


Heading

  • Tags
    • [h1]contents[/h1]
    • [h2]contents[/h2]
  • Information
    • This code creates headers, usually used to visually separate sections of a post, often to give the sections a title.
    • Header text is automatically made large, centered, bold, and underlined.
  • Example
    • Bbcodex headers.png

Return to Contents.


Horizontal Rule

  • Tag
    • [hr]
  • Information
    • The horizontal rule is an automatically centered horizontal line used to divide a post visually.
    • Do not use a closing tag for this; this code cannot have contents by its nature.
  • Example
    • Bbcodex hr.png

Return to Contents.


Hide

Also referred to as "hide box", "spoiler", and "spoiler box".

  • Tag
    • [hide=BoxTitle]contents[/hide]
  • Parameters
    • Description or box title.
  • Information
    • Hide boxes are used to hide content that the poster does not want displayed automatically. This could be anything, including content that uses BBCodes.
    • You cannot put most kinds of BBCode in the title of the hide box. If you try, you might break the box or the post that contains it.
    • Image BBCodes work, but only because the system currently processes the Image BBCode before the Hide BBCode.
    • If you want to discuss spoilers anywhere in the forums or elsewhere on the site, you must use this code and have "Spoiler" in the box title.
  • Example
    • Closed box: Bbcodex hide1.png
    • Open box: Bbcodex hide2.png

Return to Contents.


Highlight

  • Tags
    • [highlight=ColorName]contents[/highlight]
    • [highlight=#ColorHexCode]contents[/highlight]
    • [highlight=rgb(X,X,X)]contents[/highlight]
    • [highlight=rgba(X,X,X,Y)]contents[/highlight]
  • Parameters
    • Color name
    • #XXXXXX or #XXX hex code (X = 0 to 9 or A to F)
    • RGB color values (X = 0 to 255, Y = 0 to 1).
  • Information
    • This code is used to give the contents, usually text a colored background that does not extend the entire width of the post.
    • It cannot be seen with Colour-Based BBCodes Disabled on Forum Settings page.
    • RGBA is used when giving the text color some transparency, which is why the value is between 0 (completely transparent) and 1 (completely opaque). The value 0.5 would be half-transparent. If you simply want completely invisible text, you can use "transparent" as a color name.
    • RGBA and the color "transparent" for text may not be compatible with outdated/older browsers.
  • Example
    • green highlighted text

Return to Contents.


Italics

  • Tag
    • [i]contents[/i]
  • Information
    • This code is used to italicize text.
  • Example
    • This is italicized text, and this is not.

Return to Contents.


Image

  • Tags
    • [img]ImageURL[/img]
    • [img=ImageDescription]ImageURL[/img]
  • Parameters
    • URL of image
    • Optional: text to display when hovered over or when image is broken
  • Information
    • This code is used to display an image (PNG, JPG, or GIF) that is hosted somewhere online.
    • For PokéFarm images shown on PokéFarm, you can remove the "http://pokefarm.org" part of a link and still have it work properly.
  • Example
    • Nugget
  • Rules Warning
    • According to the Rules, images should be no taller than 400 pixels and no wider than 600 pixels. While images larger than 600 pixels do get automatically resized, it is still polite to link to larger images instead of including them in your post.
    • According to the Post Box Rules, the height rule applies to multiple images used together. For example, a post header that is 315 pixels in height with a post footer that is 100 pixels in height would be breaking the 400 pixels height limit.

Return to Contents.


Link

  • Tags
    • [url]LinkURL[/url]
    • [url=LinkURL]contents[/url]
  • Parameters
    • The URL (internet address) of the page that you wish to link to.
    • Optional: contents to be linked to (instead of displaying the link by itself).
  • Information
    • This is used to link to another online location.
    • For PokéFarm links shown on PokéFarm, you can remove the "http://pokefarm.org" part of a link and still have it work properly.
  • Example

Return to Contents.


List, ordered

  • Tags
    • [ol]items/contents[/ol]
    • [ol=ListType]items/contents[/ol]
  • Parameters
    • Optional: type of list. List types: 1, I, i, A, a.
  • Information
    • This is used to designate list items as part of an ordered list.
  • Example
    • Bbcodex ol.png

Return to Contents.


List, unordered

  • Tags
    • [ul]items/contents[/ul]
    • [ul=ListType]items/contents[/ul]
  • Parameters
    • Optional: type of list. List types: bullet, square, circle.
  • Information
    • This is used to designate list items as part of an unordered list.
  • Example
    • Bbcodex ul.png

Return to Contents.


List item

  • Tag
    • [li]contents[/li]
  • Information
    • This designates the contents as a single item in a list. A new item receives a new number/mark and is placed onto a new line of the post, even if the list items were not on separate lines in the code.
  • Example
    • See ordered and unordered list examples above.

Return to Contents.


Overline

  • Tag
    • [o]contents[/o]
  • Information
    • This code places a line over the contents.
  • Example
    • Bbcodex overline.png

Return to Contents.


Quote

  • Tags
    • [quote]contents[/quote]
    • [quote=WriterName]contents[/quote]
  • Parameters
    • Optional: original speaker/writer’s name.
  • Information
    • This is used to quote something that another said or wrote.
  • Example
    • Bbcodex quote.png

Return to Contents.


Scrolling marquee

  • Tag
    • [marquee]contents[/marquee]
  • Information
    • The contents of this code move across the screen from right to left, emerging from the right side again after it disappears into the left side.
    • It cannot be seen with Colour-Based BBCodes Disabled on Forum Settings page.
  • Example
    • This code is not compatible with the wiki, so it is difficult to present a good example.

Return to Contents.


Size

  • Tag
    • [size=SizeNumber]contents[/size]
  • Parameters
    • Desired size (in point, or pt). The minimum is 6 due to readability issues.
  • Information
    • This code is used to change the size of the text contents.
    • It cannot be seen with Colour-Based BBCodes Disabled on Forum Settings page.
  • Example
    • Smaller text.

Return to Contents.


Source

  • Tags
    • [source=audio/ogg]URL of OGG file[/source]
    • [source=audio/mp3]URL of MP3 file[/source]
    • [source=audio/wav]URL of WAV file[/source]
    • [source=video/ogv]URL of OGV file[/source]
    • [source=video/mp4]URL of MP4 file[/source]
  • Parameters
    • URLs of audio/video files.
    • Kind of file: audio/video.
    • Type of file: ogg/mp3/wav/ogv/mp4.
  • Information
    • This designates a URL as an audio/video source.
    • It must be used in conjunction with either Audio or Video BBCode, depending on the correct file-type.
    • Not all browsers are compatible with all audio/video types; see the announcement about the Audio/Video BBCode for more information.
    • When using multiple sources, OGG should be placed before MP3 and OGV should be placed before MP4 or else it will not work for those using the FireFox browser.
  • Example
    • Code: [video][source=video/ogv]http://.../FileName.ogv[/source][source=video/mp4]http://.../FileName.mp4[/source][/video]

Return to Contents.


Strike-through

  • Tag
    • [s]contents[/s]
  • Information
    • This creates a link that strikes through the center of the text contents. It is often used to designate an error that was later corrected, sometimes done with the intent to convey humor or sarcasm.
  • Example
    • struck-out text

Return to Contents.


Subscript

  • Tags
    • [sub]contents[/sub]
  • Information
    • This makes the text small and places it below the level of normal text.
  • Example
    • Numbers are often written with subscript in chemical formulas, such as H2O.

Return to Contents.


Superscript

  • Tags
    • [sup]contents[/sup]
  • Information
    • This makes the text small and places it above the level of normal text.
  • Example
    • X to the power of Y can be written as XY.

Return to Contents.


Table

  • Tags
    • [table]rows designated with the below code[/table]
      • [tr]cells in the row designated with one of the below code[/tr]
        • [td]contents of a cell[/td]
        • [th]contents of a header cell[/th]
  • Parameters
    • Column span (how many columns a cell stretches across) and row span (how many rows a cell stretches down)
      • [th=ColspanxRowspan]
      • [td=ColspanxRowspan]
      • Colspan and rowspan should be written as numbers, with the "x" remaining between them (i.e. 4x1)
  • Information
    • [table], [tr], and [td] are necessary to create a table. [th] is optional, for a table header.
      • table defines where the table itself
      • tr defines a table row and is placed inside table
      • td defines a table cell and is placed inside tr
      • th defines a table header cell and is placed inside tr. It will automatically be centered, have bold text, and have a background color (that changes with a person's skin setting).
    • All table rows should have the same number of cells (or cells that span across the correct number of columns/rows) to display correctly.
  • Example
    • Newbbcodetable.png
    • Code:
[table]
 [tr]
  [th=2x1]Header Cell[/th]
 [/tr]
 [tr]
  [td=1x2]Row 1/2, Cell 1[/td]
  [td]Row 1, Cell 2[/td]
 [/tr]
 [tr]
  [td]Row 2, Cell 2[/td]
 [/tr]
 [tr]
  [td]Row 3, Cell 1[/td]
  [th]Row 3, Cell 2 (with header)[/th]
 [/tr]
[/table]

Return to Contents.


Tip

Also referred to as "tooltip".

  • Tag
    • [tip=TipStuff]contents[/tip]
  • Parameters
    • Things to show in the tip.
  • Information
    • This code shows the contents of the tip when hovered over the contents between the tags.
    • Things with a tip are designated by a dotted line underneath them.
  • Example
    • Hover your mouse over this text.

Return to Contents.


Underline

  • Tags
    • [u]contents[/u]
  • Information
    • This is used to create a solid line under the contents.
  • Example
    • This is underlined text, and this is not.

Return to Contents.


Video

  • Tags
    • [video]Source(s)[/video]
  • Parameters
    • Video source(s).
  • Information
    • This code allows others to view the source video file.
    • The code must be used in conjunction with Source BBCode.
    • Not all browsers are compatible with all video types; see the announcement about the Audio/Video BBCode for more information.
  • Example
    • Code: [video][source=video/ogv]http://.../FileName.ogv[/source][source=video/mp4]http://.../FileName.mp4[/source][/video]

Return to Contents.


YouTube

  • Tags
    • [youtube]YouTube Video URL[/youtube]
  • Parameters
    • URL of YouTube video: http://www.youtube.com/watch?v=ID
  • Information
    • This code allows you to display a YouTube video that others can view without leaving the site.
  • Example
    • Image: Bbcodex youtube.png
    • Code: [youtube]http://www.youtube.com/watch?v=K8wLSlgPjg8[/youtube]

Return to Contents.

Personal tools