Tutorial: BBcodes

Getting the most out of Eileen's Lounge!
User avatar
HansV
Administrator
Posts: 78394
Joined: 16 Jan 2010, 00:14
Status: Microsoft MVP
Location: Wageningen, The Netherlands

Tutorial: BBcodes

Post by HansV »

You can format text and insert items such as lists, image and links in posts by using so-called BBCode tags.

The easiest way to do so is to use the buttons above the edit area. When you hover the mouse over the buttons, you'll see a tooltip showing how to use the BBCode tags they insert.

For more info on the built-in tags, complete with examples, see the BBCode guide.
Also see Leif's Tip: Changing Font Size.

We have added a few custom BBCode tags:

Background color for text:

[background=yellow]some text[/background]

results in

some text

You can specify a color in two ways: by its name (red, olive, etc. - see HTML Color Names for the list of names you can use), or by entering a hash character # followed by the hexadecimal RGB value of the color, for example #FF0000 for red, or #808000 for olive.

Center text:

[center]some text[/center]

results in
some text
Set the text font:

[font=Comic Sans MS]Funny text, isn't it?[/font]

results in

Funny text, isn't it?

Unfortunately, you have to enter the name of the font yourself, there's no dropdown list (yet).

Fixed-width text:

[fx]This is fixed-width text[/fx]

results in

This is fixed-width text

Horizontal line:

[hr=red][/hr]

results in

You can specify the color for the line in the same way as for the background tag mentioned above.

Refer to another post:

[post=3652]See this message[/post]

will result in

See this message

You can see the post number in Windows and MacOS by hovering the mouse pointer over the subject of the post.

Strikethrough text:

[s]some text[/s]

results in

some text

Spoiler (hide text):

[spoiler]some text[/spoiler]

results in
Spoiler
some text
[spoiler=Description]some text[/spoiler]

results in
Description
some text
You can use this for example to hide the solution of a puzzle. It works with images (both linked and uploaded) too.
Spoilers can be nested if desired, but don't go overboard with it!

Subscript:

H[sub]2[/sub]O

results in

H2O

Superscript:

E=MC[sup]2[/sup]

results in

E=MC2

Escape tag:

[t]url[/t] will result in [url].

Insert non-breaking spaces

[tab][/tab] results in 4 non-breaking spaces, for example between the following words: this    that.

Tables:

[table=1]...[/table] creates a table with border width 1; using table=0 results in a borderless table.

[tr=top]...[/tr] creates a row with the specified vertical alignment. Valid vertical alignments are top, middle (or center) and bottom.

[td=right]some text[/td] creates a cell with the specified horizontal alignment. Valid horizontal alignments are left, center and right.

Important:
You can use line breaks within cell contents, but you should not insert line breaks between the tags. Such line breaks will result in extra space above the table. The table "definition" should be one long string.

Example:

[table=1][tr=top][td=center]Column 1[/td][td=center]Column 2[/td][td=center]Column 3[/td][/tr][tr=top][td=left]aaa[/td][td=center]bbb[/td][td=right]ccc[/td][/tr][tr=middle][td=right]a
b
c[/td][td=center]d
e[/td][td=left]f[/td][/tr][/table]

results in
Column 1Column 2Column 3
aaabbbccc
a
b
c
d
e
f
Link to member profile:

[user]Eileen[/user]

results in

Eileen

The link will open in a new tab or window, depending on your browser and settings.

Enjoy!
Best wishes,
Hans