Help » BBCode: Style your text

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.

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.

Font color

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

Highlighting text

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

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.

Images

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

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:

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!

You can add alt text to your images! Just use the parameter alt:

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.

Page anchors

To create an anchor on your page, so that you can link to a specific portion of the page, place an anchor. You can choose to surround text to make a visible anchor, or leave the anchor tag empty to make an invisible anchor.

Whatever you define the link text to be, it will be preceded with "anchor-" So if you create your anchor using [anchor=playerclasses], your anchor will be #anchor-playerclasses

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.

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

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.

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.

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.

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.

Don't forget the quotes around the name!

You can also control the size and color of your collapse tag. Use Size 0-7. Color will accept either an HTML color name, or a HEX color.

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].

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.