Skip to main content

Help » 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.

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.

BBCode:
[highlight=yellow]This text is highlighted yellow.[/highlight]
[highlight=#7A95FF]This text is highlighted periwinkle.[/highlight]
What it will look like:
This text is highlighted yellow.
This text is highlighted 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!

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

BBCode:
[img alt="A tiny red dragon eating a slice of pepperoni pizza almost as large as himself. He looks very happy."]https://www.rprepository.com/imgs/pizzadragon.png[/img]

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]

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.

BBCode:
[anchor=linktext]This text will be clickable.[/anchor] [anchor=hiddenlinktext][/anchor]
What it will look like:
This text will be clickable.

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.

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 name="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.

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.

BBCode:
[collapse name="Click on me to reveal more information!" color=red size=5]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:


Comments

Kim

January 14, 2023
11:12am

Are you maybe running any browser plugins?

DeviousEris

January 12, 2023
12:04pm

@Kim Still not showing. Vimeo works fine, just not showing. Must be firefox... thank you for the info!

Kim

January 12, 2023
10:34am

@DeviousEris Maybe Vimeo was down when you were looking? It's there and fine for me.

DeviousEris

January 12, 2023
8:11am

Pssst, is the vimeo video code not working anymore? They're a big blank spot now.

Thylonicus

May 10, 2022
1:10am

@Hexaki-Leon Two answers to that--one, it's partly meant for photos hosted off-site, at someplace like Imgur or the like. Two, your Gallery images do have URLs. I don't know how it works on Mac, but this is how it does on Windows and Chromebook. I'll show an example with a screenshot.

Screenshot
8xX4UaU.jpg


If you right-click on a photo in your Gallery, one of the options should be "Copy link address" or some similar (red ellipse). Alternatively, "Copy image address" (blue ellipse) does roughly the same thing, and for these purposes I don't think you'll find a difference. You can even see what the URL is wherever your O.S. displays it. For my Chromebook, that's in the lower-left corner of the screen (green ellipse). I think Windows shows it somewhere along the bottom, too, but don't hold me to that.

I hope this helps anyone with the same issue.

Hexaki-Leon

August 12, 2021
5:53pm

The attaching pictures thing is very confusing. Photos in my own gallery don't have a URL

OmNLSAA

November 17, 2020
1:51am

This is fabulous

WHOOOOT Spoiler!
Hehe jk