47 coaches online • Server time: 13:51
* * * Did you know? The most valuable player is Thursdaynight Guitarclub with 96 MVPs.
Log in
Recent Forum Topics goto Post Secret League Old Wo...goto Post Creating a custom to...goto Post ramchop takes on the...
Introduction to BBCode
Introduction
BBCode is a system designed to allow you to add layout and styles to text. This is used in a number of different places on FUMBBL (messages, team and player bios, blogs). This page will describe how the system works, and what features are available.

The basics
BBCode is a pure text-based system, where special tags are used to add style and layout to the text. A tag is surrounded by brackets, for example
[b]
. After a tag, the following text will have the attribute associated with the tag applied to it. This will continue until the tag is closed, which is done with a slash ( / ) prepending the name of the tag you're closing, for example
[/b]
.

Basic tags

BBcode
[b]Bold text[/b]
[i]Italic text[/i]
[u]Underlined text[/u]
[s]Striked text[/s]
[color=red]Red text[/color]
[size=15]Larger text[/size]
[font=serif]Serif font[/font]
Output
Bold text
Italic text
Underlined text
Striked text
Red text
Larger text
Serif font


Images
BBcode
[img]http://fumbbl.com/FUMBBL/Images/rdie6.png[/img]
[img w=50]/FUMBBL/Images/rdie5.png[/img]
[img title=Four]/FUMBBL/Images/rdie4.png[/img]
Output


(This has a hover text)


Lists
BBcode
[ulist]\
[li]Item 1
[li]Item 2
[/ulist]
[list=a]\
[li]Item 1
[li]Item 2
[/list]
[list=A]\
[li]Item 1
[li]Item 2
[/list]
[list=I]\
[li]Item 1
[li]Item 2
[/list]
[list=i]\
[li]Item 1
[li]Item 2
[/list]
[list=1]\
[li]Item 1
[li]Item 2
[/list]
Output
  • Item 1
  • Item 2

  1. Item 1
  2. Item 2

  1. Item 1
  2. Item 2

  1. Item 1
  2. Item 2

  1. Item 1
  2. Item 2

  1. Item 1
  2. Item 2



Block Basics

BBcode
[block display=none]This is invisible[/block]
[block bg=yellow]Yellow background[/block]
[block tooltip=tipblock]Hover over me[/block]
[block=tooltip id=tipblock]Here is the tooltip content[/block]
[block bgi=516597 width=256px height=212px]Content over the image[/block]
[block=blackborder position=relative width=200px height=200px]
[block position=absolute top=40px left=40px]Positioned text[/block]
[block position=absolute top=150px left=30px]More text[/block]
[/block]

Output
This is invisible

Yellow background

Hover over me

Here is the tooltip content

Content over the image


Positioned text

More text







Toggle buttons

BBcode
[toggle label=Show this block=this][toggle label=Hide that block=that]
[block=hidden white id=this]This is this block[/block][block=white pad5]Another block[/block][block id=that]This is that block[/block]

Blocks can also be grouped together to only show one at a time:
[toggle group=somegroup block=block_one label=Show Block 1]\
[toggle group=somegroup block=block_two label=Show Block 2]\
[toggle group=somegroup block=block_three label=Show Block 3]\
[block=hidden group=somegroup id=block_one]This is block one.[/block]\
[block=hidden group=somegroup id=block_two]This is block two.[/block]\
[block=hidden group=somegroup id=block_three]This is block three.[/block]
Output

This is this block
Another block
This is that block


Blocks can also be grouped together to only show one at a time:
This is block one.
This is block two.
This is block three.



Alignment

BBcode
[block=right]Text aligned to the right[/block][block=center]Text aligned to center[/block][block]Text aligned to the left[/block]
Output
Text aligned to the right
Text aligned to center
Text aligned to the left



Floating blocks

BBcode
[block=floatcontainer blue][block=floatleft pad5][url=https://fumbbl.com][img title=This is a hover text...]/FUMBBL/Images/rdie1.png[/img][/url][img]/FUMBBL/Images/rdie6.png[/img][/block]This is a multiline block of text designed to demonstrate the floating image capability of the bbcode additions. Note that there's a hover title on the left image, and it links to another page.
Here's another line of text,
and another just to show what happens when you go beyond the images.[/block]
Output
This is a multiline block of text designed to demonstrate the floating image capability of the bbcode additions. Note that there's a hover title on the left image, and it links to another page.
Here's another line of text,
and another just to show what happens when you go beyond the images.



Layout

BBcode
[block=floatcontainer]\
[block=floatleft pad5 width=50% bg=#99f fg=red]\
Left column[/block]\
[block=floatright pad5 width=50% bg=yellow]\
Right column
Multi-line\
[/block][/block]
[block=floatcontainer]\
[block=floatleft pad5 width=33% bg=#99f fg=white]\
Left column\
[/block]\
[block=floatleft pad5 width=34% fg=#666]\
Center column\
[/block]\
[block=floatright pad5 width=33% bg=#f9f]\
Right column\
[/block]\
[/block]
[block=automargin blackborder border2 pad5 width=50% bg=#ccc]\
This is a centered block with a border...
[block=center]\
... with centered text\
[/block]\
[/block]
Output
Left column
Right column
Multi-line

Left column
Center column
Right column

This is a centered block with a border...
... with centered text


Escape newlines

BBcode
This is a line \
that is split into two, but concatenated on output.
You can even split in the mid\
dle of a word if you want...
Output
This is a line that is split into two, but concatenated on output.
You can even split in the middle of a word if you want...



Nesting

BBcode
[block=center][toggle label=Hide left block=left] [toggle label=Hide right block=right][/block][block=floatcontainer][block=floatleft yellowbg right pad5 width=50% id=left]This is a right-aligned block, with an [img w=20px]http://fumbbl.com/FUMBBL/Images/rdie6.png[/img] inline, scaled, image.[/block][block=floatright pad5 width=50% id=right bg=blue fg=white][block=whitebg black]And here's a nested block.
[toggle label=Show hidden stuff block=secret][block=hidden id=secret]This is some secret stuff...[/block][/block]Note that the toggled block can be anywhere on the page, even before the toggle button. [toggle label=Hide Escaping block=escape][/block][/block]
Output
This is a right-aligned block, with an inline, scaled, image.
And here's a nested block.
This is some secret stuff...
Note that the toggled block can be anywhere on the page, even before the toggle button.



BBCode quoting

BBcode
[bbcode][block bg=#99f]This is a blue block[/block][/bbcοde]
Output
[block bg=#99f]This is a blue block[/block]



Tables

BBcode
Simple example
[table][tr][th]C1[/th][th]C2[/th][/tr][tr][td]Data 1[/td][td]Data 2[/td][/tr][/table]
More complex example
[table width=100%][tr][th]Column 1[/th][th bg=#f9f black center colspan=2]Column 2 and 3[/th][th]Column 4[/th][/tr][tr][td]R1C1[/td][td]R1C2[/td][td]R1C3[/td][td]R1C4[/td][/tr][tr bg=#99f][td width=100px]R2C1[/td][td=white bg=#99f]R2C2[/td][td]R2C3[/td][td bg=#f9f rowspan=2 valign=middle]R2,3C4[/td][/tr][tr][td bg=#f9f colspan=2]R3C1,2[/td][td]R3C2[/td][/tr][/table]
Output
Simple example
C1C2
Data 1Data 2

More complex example
Column 1Column 2 and 3Column 4
R1C1R1C2R1C3R1C4
R2C1R2C2R2C3R2,3C4
R3C1,2R3C2



Panels

BBcode
[block=panel automargin width=300px][block=panelheader]Background[/block][block=pad10]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/block][/block]
Output
Background
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Player Icons

BBcode
[picon=673317]
[picon=673317 x=2 y=1]
[picon=673317 x=3 y=2]
Output




X and Y indicate which icon to show. X ranges from 1 through 4, Y ranges from 1 through the number of icon variants for the icon. The number is the image id of the icon to show, and can be copied from image links on this page: https://fumbbl.com/p/icons?r=4