remember me
Register | Forgot Login

BBCode: Style your text

Table Of Contents

  • What is BBCode?

    BB stands for "Bulletin Board". It has two benefits:

    1. It is safer than HTML, and helps to prevent malicious users from destroying pages (or your computer!) by disallowing certain HTML tags that can be damaging, and
    2. It is simpler than HTML, so even people who don't know anything about making websites can still have some control over the look and feel of their text.
  • How does BBcode work?

    Most BBCode consists of an opening tag and a closing tag, with the text you want to format going in between. If your BBCode isn't working, be sure to check that you've remembered to close your tags.

    An opening tag might look like this: [b]

    Closing tags generally look just like the opening tag, but with a slash, like this: [/b]

  • Bold, italic, underline and strike

    To bold, use [b][/b] tags.
    To italicize, use [i][/i] tags.
    To underline, use [u][/u] tags.
    To strikeout, use [s][/s] tags.

    BBCode:
    This text has some [b]boldness[/b] in it!
    This text has some [i]emphasis[/i] on it!
    This text is [u]underlined[/u].
    This text is [s]struck out[/s].
    What it will look like:
    This text has some boldness in it!
    This text has some emphasis on it!
    This text is underlined.
    This text is struck out.
  • Change text size

    To change the size of your text, use a [size=x][/size] tag. Just pick a number between 0 and 7 to represent the size you want and put it in place of the x, with 0 being the smallest and 7 being the largest.

    BBCode:
    [size=0]This text is size 0 (tiny).[/size]
    [size=1]This text is size 1 (very small).[/size]
    [size=2]This text is size 2 (small).[/size]
    [size=3]This text is size 3 (normal).[/size]
    [size=4]This text is size 4 (large).[/size]
    [size=5]This text is size 5 (very large).[/size]
    [size=6]This text is size 6 (huge).[/size]
    [size=7]This text is size 7 (ridiculous).[/size]
    What it will look like:
    This text is size 0 (tiny).
    This text is size 1 (very small).
    This text is size 2 (small).
    This text is size 3 (normal).
    This text is size 4 (large).
    This text is size 5 (very large).
    This text is size 6 (huge).
    This text is size 7 (ridiculous).
  • Font color

    To change your text color, use the [color=blah]...[/color] tag. You can either enter a color name, or a HEX code.

    BBCode:
    [color=red]This text is red.[/color]
    [color=#7A95FF]This text is periwinkle.[/color]
    What it will look like:
    This text is red.
    This text is periwinkle.
  • Alignment

    There are five tags you can use to align your text. [left][/left], [right][/right], [center][/center], [justify][/justify] and [indent][/indent]. Indent adds about a half-inch margin to the left side, useful if you want to set something apart from the rest of your text, like a quote or some song lyrics.

    BBCode:
    [right]This text is right aligned[/right]

    [left]This text is left aligned[/left]

    [center]This text is centered[/center]

    [justify]This text is justified. That means it will stretch out to try and touch both sides of its container, instead of having a ragged edge on the left or right. It will only do this if there's enough text to stretch without making it hard to read, so I'm using a lot of extra text in this example to make the effect visible.[/justify]

    [indent]This text is indented[/indent]
    What it will look like:
    This text is right aligned

    This text is left aligned

    This text is centered

    This text is justified. That means it will stretch out to try and touch both sides of its container, instead of having a ragged edge on the left or right. It will only do this if there's enough text to stretch without making it hard to read, so I'm using a lot of extra text in this example to make the effect visible.

    This text is indented
  • Images

    To add an image, use the [img]your picture url here[/img] tag.

    BBCode:
    [img]https://www.rprepository.com/imgs/pizzadragon.png[/img]
    What it will look like:

    Please note: only urls that end in .gif, .jpg, .jpeg or .png will work. If there's anything else after the filename, it will fail.

    If you want to let text wrap around your images, you can use the align parameter to move the image to the left or right like so:

    BBCode:
    [img align=left]https://www.rprepository.com/imgs/pizzadragon.png[/img]
    What it will look like:
    Here is a bunch of text that is going to wrap around my image. I can create lots of great effects on my character profile with this simple technique. In this example, I moved the image to the left of the text, but I could just as easily have moved the image to the right. The difference between this command and the [right][/right] and [left][/left] alignment tags that are shown above is that in those cases, the thing inside the tags will be moved to the correct location, but they won't necessarily cause text (or anything else) to move up to occupy the new empty space that was created. The only way to be sure that your image will make room for other things on the same line is to use this special alignment property in conjunction with the image tag.

    Be warned: More things may wrap around your image than you originally bargained for!

  • Links

    To place a link, surround the text that you want to be clickable with the [url=][/url] tags, with the = pointing to the URL where you want the link to go.

    BBCode:
    [url=https://www.rprepository.com/]This link will take you to the homepage.[/url]
  • Lists

    There are several types of list possible with BBcode. The simplest uses the [list][/list] tags, with each point in the list preceded by a [*] tag.

    BBCode:
    [list]
    [*]Apples
    [*]Bananas
    [*]Oranges
    [*]Strawberries
    [/list]
    What it will look like:
    • Apples
    • Bananas
    • Oranges
    • Strawberries

    Alternatively, if you would like a numbered list, use [list=1][/list]

    BBCode:
    [list=1]
    [*]Apples
    [*]Bananas
    [*]Oranges
    [*]Strawberries
    [/list]
    What it will look like:
    1. Apples
    2. Bananas
    3. Oranges
    4. Strawberries
  • Youtube videos

    If you would like to embed a youtube video into your profile, you need only use the [youtube][/youtube] tags. What goes inside the tags is the video share link. It should look something like this: https://youtu.be/xMrN3Rh55uM. Just drop that link inside the tags and it will be converted into a video player.

    BBCode:
    [youtube]https://youtu.be/xMrN3Rh55uM[/youtube]
    What it will look like:

    If you want to make the video bigger or smaller, you may also include a width and height, like so:

    [youtube width=640 height=385]https://youtu.be/xMrN3Rh55uM[/youtube]

  • Vimeo videos

    If you would like to embed a vimeo video into your profile, use the [vimeo][/vimeo] tags. What goes inside the tags is the video share link.

    Most vimeo videos have URLs that look something like this: https://vimeo.com/29189421. Place this link inside the tags, and it will be converted into a video player.

    BBCode:
    [vimeo]https://vimeo.com/29189421[/vimeo]
    What it will look like:

    If you want to make the video bigger or smaller, you may also include a width and height, like so:

    [vimeo width=400 height=225]https://vimeo.com/29189421[/vimeo]

  • Hiding spoilers

    If you want to talk about the end of a movie but don't want to spoil it for those who haven't seen it, the [spoiler][/spoiler] tag is a good way to go. It will blot out the offending text, so that it has to be highlighted to be read. That way, people can choose whether they want to know the end of the movie in advance or not.

    This is a great option, because it will work even for people who have disabled javascript.

    BBCode:
    [spoiler]Put your opinions in here, where people who don't want things revealed to them in advance won't be able to see them.[/spoiler]
    What it will look like:
    Put your opinions in here, where people who don't want things revealed to them in advance won't be able to see them.
  • Collapse tags

    [collapse][/collapse] is a fancy, interactive tag! As the title implies, it will condense a large amount of information into a very small space, and through the use of javascript, reveal it when the title is clicked.

    BBCode:
    [collapse=Click on me to reveal more information!]You can put secret or extra information you don't want cluttering your page inside here. It will be revealed when someone clicks on the title.[/collapse]
    What it will look like:
    Click on me to reveal more information!
    You can put secret or extra information you don't want cluttering your page inside here. It will be revealed when someone clicks on the title.
  • Columns

    [columns] is a great tag to use if you want to display a table of information. Open your tables with [columns], create the next column with [nextcol], and finally, close your table with [/columns].

    BBCode:
    This text goes before the columns.
    [columns]
    This text is in the first column.
    This is a second line in the first column.
    [nextcol]
    This is the second column,
    with a second line.
    [nextcol]
    This is a third column.
    Are we having fun yet?
    [/columns]
    This text goes after the columns.
    What it will look like:
    This text goes before the columns.
    This text is in the first column.
    This is a second line in the first column.
    This is the second column,
    with a second line.
    This is a third column.
    Are we having fun yet?
    This text goes after the columns.
  • GM-Only

    This special tag works inside of groups only. It prevents any text inside of the gm-only tag from being read by anyone but the members of the group who have been promoted to have GM (Game Master) privileges and the member who posted the information to the group's profile. It works equally well in the forums and in other group areas such as comments on an announcement or event.

    BBCode:
    [gm-only]Here is some super secret information just for me and the group GMs![/gm-only]
    What it will look like to the group GMs:
    GM INFO ONLY
    Here is some super secret information just for me and the group GMs!

    What it will look like to everyone else: