BBCode

From PokéFarm Q Official Wiki
Revision as of 12:25, 1 July 2014 by Kieri (talk | contribs) (Creating a new version of the BBCode page.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

BBCode is a mechanic on PokéFarm Q that allows users to place objects into Forum Posts or Private Messages that would be unachievable using regular text. Most BBCodes use the format: [tag]text[/tag] or [tag=data]text[/tag] however there are exceptions.

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 Signatures, and in Private Messages. BBCode can also be used to a lesser extent in your Introduction.

List of BBCodes

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

  • Code Name
    • Tag(s): Syntax of the BBCode tag.
    • 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).

Accordion

  • Tag
    • [accordion]Panels[/accordion]
    • [accordion=DefaultPanel]Panels[/accordion]
  • Parameters
    • Optional [DefaultPanel]: Panel number to be displayed by default.
  • Information
    • The Accordion is used to display one panel at a time, the panels being [a-section] BBCodes.
    • This BBCode is complicated and should only be used if you know what you are doing.
  • Example
    • This BBCode is incompatible with the wiki so an example cannot be displayed. However, the Lab page has an example of an Accordion.

Accordion Section

  • Tag
    • [a-section=SectionTitle]Content[/a-section]
  • Parameters
    • The title of the Section to be displayed.
  • Information
    • The [a-section] BBCode is used inside with the [accordion] BBCode.
  • Example
    • [accordion][a-section=SectionTitle]Content[/a-section][/accordion]
    • See the Accordion tag above.

Background

  • Tag
    • [background=BackgroundColour]Content[/background]
    • [background=BackgroundURL]Content[/background]
  • Parameters
    • BackgroundColour: A colour code denoting the colour of the background to be displayed.
    • BackgroundURL: A URL to an image to use as the background of the Content.
  • Information
    • This BBCode is similar to the [highlight] BBCode, but allows the use of a URL and extends to the left and right borders.
    • This BBCode should be used in conjunction with the [colour] BBCode as other users may use a theme that changes the text colour to one similar to the highlight's colour.
  • Example
    • [background=#FF0000]Black text on a Red Background[/background]
      [background=red]Black text on a Red Background[/background]
      [background=rgba(255, 0, 0, 1)]Black text on a Red Background[/background]
    • Black text on a Red Background

Bold

  • Tag
    • [b]Text[/b]
  • Information
    • This BBCode is used to create Bold text.
  • Example
    • [b]Bold Text[/b]
    • Bold Text

Center

  • Tag
    • [center]Text[/center]
  • Information
    • This BBCode is used to centre the content to the middle of its container.
  • Example
    • [center]Centred Text[/center]
    • Centred Text

Colour

  • Tags
    • [color=Colour]Text[/color]
    • [colour=Colour]Text[/colour]
  • Parameters
    • Colour: A colour code denoting the colour of the text to be displayed.
  • Information
    • This BBCode should be used in conjunction with the [highlight] or [background] BBCode as other users may have a theme that changes the background colour to one similar to the text colour.
    • [color] and [colour] are interchangeable.
  • Example
    • [color=#FF0000]Red Text[/color]
      [colour=red]Red Text[/colour]
      [color=rgba(255, 0, 0, 1)]Red Text[/color]
    • Red Text

CSS

  • Tag
    • [css=CSSStyling]Content[/css]
  • Parameters
    • CSSStyling: The style that should be applied to the content.
  • Information
    • This BBCode is complicated and should only be used if you know what you are doing.
    • There a a few guidelines for use of this BBCode:
      • Never set the position value to fixed.
      • Only set the position value to absolute if the container has a position value of relative.
      • Never use the opacity key on elements containing text. Use the [colour] BBCode using the rgba(R,G,B,A) format.
      • Never set width, height, min-width, min-height, max-width or max-height to any value that causes the element to be unreasonably small or large.
      • Never use overflow as it can make scrolling tricky.
      • Never use cursor. Changing the cursor without reason is a bad practice in web design.
      • Never use filter. Filters are only use by old versions of Internet Explorer and excessive use can cause major lag.
      • Never set background-attachment to fixed as it can become extremely distracting.
  • Example
    • [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]
    • There is no limit to how much CSS you can cram in there.

Date-Time

  • Tag
    • [datetime]YYYY-MM-DD hh:mm:ss[/datetime]
    • [datetime]any supported format[/datetime]
  • Information
    • The basic date-time format is YYYY-MM-DD hh:mm:ss (Year-Month-Date Hour:Minutes:Seconds).
    • Many formats are supported, to see if your format is, check on php.net. If the time displayed is Never then the format used is not supported.
  • Example
    • The wiki does not support this BBCode. Basically, if the time set was 5 seconds from the current time it would display as in 5 seconds; if the time set was 2 hours in the past it would display as 2 hours ago.

Display

  • Tag
    • [display=PanelTitle]Content[/display]
  • Parameters
    • PanelTitle: The title of the Panel to be displayed.
  • Information
    • This BBCode displays a Panel with a Title and a border around the Content.
    • This BBCode is similar to the [hide] BBCode, but does not have the collapsible functionality.
  • Example
    • The wiki does not support this BBCode so an example cannot be displayed.

Headings

  • Tags
    • [h1]Text[/h1]
    • [h2]Text[/h2]
    • [h3]Text[/h3]
  • Information
    • This BBCode creates a heading, usually used to separate sections of a post.
    • The Text within this BBCode is bolded, centred and made larger.
    • [h1] creates the largest heading whilst [h3] creates the smallest.
  • Example
    • [h1]Heading 1[/h1]
      [h2]Heading 2[/h2]
      [h3]Heading 3[/h3]
    • Heading 1

      Heading 2

      Heading 3

Hide

  • Tag
    • [hide=PanelTitle]Content[/hide]
  • Parameters
    • PanelTitle: The title of the Panel to be displayed.
  • Information
    • This BBCode is very similar to the [display] BBCode, the only difference if the lack of collapsibility.
  • Example
    • The wiki does not support this BBCode so an example cannot be displayed.

Highlight

  • Tag
    • [highlight=HighlightColour]Text[/highlight]
  • Parameters
    • HighlightColour: A colour code denoting the colour of the text highlight to be displayed.
  • Information
    • This BBCode is very similar to the [background] BBCode but does not extend to the borders of its container.
  • Example
    • [highlight=#F00]Black text with a Red highlight[/highlight]
      [highlight=red]Black text with a Red highlight[/highlight]
      [highlight=rgba(255, 0, 0, 1)]Black text with a Red highlight[/highlight]
    • Black text with a Red highlight

Horizontal Rule

  • Tag
    • [hr]
  • Information
    • This BBCode create a horizontal rule. It can be used to separate sections on a post.
    • Unlike many other BBCodes, this BBCode does not have any content or ending tag.
  • Example
    • [hr]

Images

  • Tag
    • [img=ImageDescription]ImageURL[/img]
  • Parameters
    • Optional [ImageDescription]: The description of the image to be displayed when the image is hovered over.
  • Information
    • The image displayed by this BBCode should be in PNG, JPG or GIF format.
    • If an image is too large to display in its container it will be automatically scaled and a bar will appear the time top of the image with information regarding its original size, scaled size and scaling percentage.
  • Example

Italics

  • Tag
    • [i]Text[/i]
  • Information
    • This BBCode is used to create Italicized text.
  • Example
    • [i]Italic Text[/i]
    • Italic Text

Lists, Unordered

  • Tag
    • [ul]List Items[/ul]
  • Information
    • This BBCode creates an Unordered List.
    • For this BBCode to display it must contain List Items. See below for [li].
  • Example
    • [ul][li]List Item 1[/li][li]List Item 2[/li][/ul]
      • List Item 1
      • List Item 2

Lists, Ordered

  • Tag
    • [ol]List Items[/ol]
  • Information
    • This BBCode creates an Ordered List.
    • For this BBCode to display it must contain List Items. See below for [li].
  • Example
    • [ol][li]List Item 1[/li][li]List Item 2[/li][/ol]
      1. List Item 1
      2. List Item 2

List Item

  • Tag
    • [li]Content[/li]
  • Information
    • This BBCode does not display properly unless within a parent [ul] or [ol] tag.
    • This BBCode is used to define a list item within a parent list.
  • Example
    • See above for an example of this BBCode's use.

No BBCode

  • Tag
    • [nobbcode]Text[/nobbcode]
  • Information
    • This BBCode Stops the text inside being formatted by the site.
    • This BBCode is usually used to display BBCode without causing the code to format its content.
  • Example
    • [nobbcode][b]Bold Text[/b][/nobbcode]
    • [b]Bold Text[/b]

Overline

  • Tag
    • [o]Text[/o]
  • Information
    • This BBCode is used to create text with an overline.
  • Example
    • [o]Overlined Text[/o]
    • Overlined Text

Quote

  • Tag
    • [quote=QuotedUser]Content[/quote]
  • Parameters
    • QuotedUser: The person who wrote the content in the quote.
  • Information
    • This BBCode is used to quote a user on the site.
    • The use of this BBCode is generally depreciative. This BBCode is automatically generated when quoting someone on the forums and when replying to a Private Message.
  • Example
    • The wiki does not support this BBCode so an example cannot be displayed.

Size

  • Tag
    • [size=FontSize]Text[/size]
  • Parameters
    • FontSize: The size of the text to be displayed in points (pt).
  • Information
    • This BBCode is used to change the font size of the text.
    • The size can be within the range of 6 (tiny) and 99 (obscenely huge) but any size above 24 should not be used.
  • Example
    • [size=7]Size 7 Text[/size]
    • Size 7 Text

Strike-through

  • Tag
    • [s]Text[/s]
  • Information
    • This BBCode is used to create text that has a strike through it.
  • Example
    • [s]Text with a strike-through[/s]
    • Text with a strike-through

Subscript

  • Tag
    • [sub]Text[/sub]
  • Information
    • This BBCode is used to create subscripted text.
  • Example
    • [sub]Subscripted Text[/sub]
    • Subscripted Text

Superscript

  • Tag
    • [sup]Text[/sup]
  • Information
    • This BBCode is used to create superscripted text.
  • Example
    • [sup]Superscripted Text[/sup]
    • Superscripted Text

Tables

  • Tag
    • [table]Table Elements[/table]
  • Information
    • This BBCode is used in conjunction with [td], [th] and [tr] to create a table.
    • This tag alone does nothing but serves as a container for the rest of the table tags.
  • Example
    • [table][tr][th]Table heading[/th][/tr][tr][td]Table Cell[/td][/tr][/table]
    • Table Heading
      Table Cell

Table Cell

  • Tag
    • [td]Cell Content[/td]
  • Information
    • This BBCode is used to create a Table Cell, displaying information.
    • This BBCode can only be used within a [tr] tag.
  • Example
    • See the [table] tag for an example.

Table Heading

  • Tag
    • [th]Heading Content[/th]
  • Information
    • This BBCode is used to create a Table Heading Cell, displaying a Heading.
    • This BBCode can only be used within a [tr] tag.
  • Example
    • See the [table] tag for an example.

Table Row

  • Tag
    • [tr]Cells[/tr]
  • Information
    • This BBCode is used to define a new row within a table.
    • This BBCode can only be used within a [table] tag.
  • Example
    • See the [table] tag for an example.

Tooltips

  • Tag
    • [tip=TipText]Text[/tip]
  • Parameters
    • TipText: The text to be displayed when the user hovers over the text.
  • Information
    • This BBCode is used to show a tip when the user's cursor hovers over the text.
    • The text inside has a dotted line underneath, denoting a tip is available.
  • Example
    • The wiki does not support this BBCode so an example cannot be displayed.

Underline

  • Tag
    • [u]Text[/u]
  • Information
    • This BBCode is used to display a solid underline below text.
  • Example
    • [u]Underlined Text[/u]
    • Underlined Text

URLs

  • Tag
    • [url=URL]Text[/URL]
  • Parameters
    • Optional [URL]: The URL for the Text to redirect to. If this parameter is left out the Text will become the URL.
  • Information
    • This BBCode is used to direct the user to a new page upon clicking the link created.
  • Example