Tealmermaid Designs

web design, coding, and SEO tips and tricks

BBCode for text, images, and links

Share:

BBCode for text, images, and links
BBCode (Bulletin Board Code) is a markup language used on forums such as phpBB and vBulletin. It is very similar to standard HTML except that code tags are indicated with square brackets ([ and ]) instead of pointy brackets (< and >).

The use of standard HTML on forums tends to interfere with forum functionality, so BBCode is used instead. This code can then be parsed by the forum into markup which can be understood by web browsers.


BBCode basics

BBCode text styles

[b]bold text[/b]

bold text

[i]italic text[/i]

italic text

[u]underline text[/u]

underline text

[s]strikeout text[/s]

strikeout text

BBCode fonts

You can specify font names in BBCode with [font=XX]. Try to keep to web-safe fonts if you do this.

[font=Century]Display this text in Century.[/font]

Display this text in Century.

Set text size in BBCode with [size=XX].

[size=20]20px text[/size] and [size=40]40px text[/size]

20px text and 40px text

Set text color in BBCode with [color=XXX]. The colors may be specified by hexadecimal numbers or names.

[color=orange]This text is orange[/color].

This text is orange

[color=157DEC]This text is blue[/color].

This text is blue

BBCode lists

These are used to display bullet lists. Bullet points are enclosed in the tag [list] (and closing tag [/list]). This can also be marked for Roman numerals ([list=I]) and numbers ([list=1]).

Unordered list

[list]
[*]a bullet
[*]another bullet
[*]yet another bullet
[/list]

Roman numerals lists

[list=I]
[*]a Roman numeral bullet
[*]another Roman numeral bullet
[*]yet another Roman numeral bullet
[/list]

  1. a Roman numeral bullet
  2. another Roman numeral bullet
  3. yet another Roman numeral bullet

[list=i]
[*]a Roman numeral bullet
[*]another Roman numeral bullet
[*]yet another Roman numeral bullet
[/list]

  1. a Roman numeral bullet
  2. another Roman numeral bullet
  3. yet another Roman numeral bullet

Numeric list

[list=1]
[*]a numeric bullet
[*]another numeric bullet
[*]yet another numeric bullet
[/list]

[list=1]
[*]a numeric bullet
[*]another numeric bullet
[*]yet another numeric bullet
[/list]

  1. a numeric bullet
  2. another numeric bullet
  3. yet another numeric bullet

Text and images in BBCode

The code for a image has the form [img]http://sitename.com/img.png[/img].

[img]http://tealmermaid.com/includes/tealmermaid.png[/img]

The code for a text link has the form [url=http://sitename.com]Site Name[/a].

[url=http://tealmermaid.com]Tealmermaid[/url]

Tealmermaid

The code for a image link has the form [url=http://sitename.com][img]http://sitename.com/img.png[/img][/url].

[url=http://tealmermaid.com][img]http://tealmermaid.com/includes/tealmermaid.png[/img][/url]

The code for an email link has the form [email]myname@mydomain.com[/email].

myname@mydomain.com

Text and image alignment can be set by using [left], [right], [center], and [justify] tags.

[left]Align to the left[/left]

Align to the left

[right]Align to the right[/right]

Align to the right

[center]Center that text[/center]

Center that text

[justify]Let's make a giant block of text so there is plenty of text to justify on both sides of the paragraph that is being created. Then you will be able to see clearly how "justify" works with a large block of text.[/justify]

Let's make a giant block of text so there is plenty of text to justify on both sides of the paragraph that is being created. Then you will be able to see clearly how "justify" works with a large block of text.

The [float] and [note] tags can be used similarly to the alignment codes to place floating boxes in the text which is useful for images and callouts. You can specify the direction of the float with [float=left] and [float=right].

[float=right]Let's float a caption to the right.[/float]
Let's make a giant block of text so there is plenty of text to float some content next to it. Then you will be able to see clearly how "float" works with a large block of text.

Let's float a caption to the right.

Let's make a giant block of text so there is plenty of text to float some content next to it. Writing more content to fill some space so you will be able to see clearly how "float" works with a large block of text.

Your ad here
Advertisement