New BBCode : Tags explained and examples

[Dan]

Now I know that some people have noticed that there is some non-standard BBCode available, some simple stuff you would not find on all SMF powered boards.  I think it is time that I explained how this new tags work.

I hope my explanations are satisfactory.

[Dan]

[float="right"][/float]
The spoiler tag is a simple way to hide part of a post from viewers who may not wish to read it.

[spoiler id="example" stext="Click to read"]You should not be able to see this...[/spoiler]

The spoiler tag has two attributes: id and stext.  The id allows the javascript controlling the effect to identify the tag: if you are posting two spoilers in a post then you ought to have a different id for each.  The stext defines what is displayed in the spoiler link.

The above example was generated using:

Code Select Expand

[spoiler id="example" stext="Click to read"]You should not be able to see this...[/spoiler]

Additional examples

Two spoilers in one page (ids must be different)

[spoiler id="one" stext="I am one"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.[/spoiler]
[spoiler id="two" stext="I am two"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.[/spoiler]

Code Select Expand

[spoiler id="one" stext="I am one"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.[/spoiler]
[spoiler id="two" stext="I am two"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.[/spoiler]

Nested spoilers.  This seems to parse, but I would not suggest using it. >_>

[spoiler id="oneagain" stext="I am one"]Moo
[spoiler id="twoinone" stext="I am two and inside one"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.[/spoiler][/spoiler]

Code Select Expand


[spoiler id="oneagain" stext="I am one"]Moo
[spoiler id="twoinone" stext="I am two and inside one"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.[/spoiler][/spoiler]

Finally, and example of what happens if you do not change the ids for more than one tag in the page.

[spoiler id="me" stext="Click to read"]I can be opened[/spoiler]
[spoiler id="me" stext="Can I be opened?"]I should not be able to be opened.[/spoiler]

Code Select Expand

[spoiler id="me" stext="Click to read"]I can be opened[/spoiler]
[spoiler id="me" stext="Can I be opened?"]I should not be able to be opened.[/spoiler]

[Dan]

[float="right"][/float]
The caption tag allows you to put a caption around an image (or anything else you wish, I think).

There are two attributes to the tag: width and ctext.  Setting the width is important, and you must take care to add an extra 12px to the width of the object to be captioned.  The ctext is the caption to display below the object.

[caption ctext="My avatar... isn't it great?" width="132"][/caption]

The object being captioned is 120 pixels wide, thus, the width is "132".

Code Select Expand

[caption ctext="My avatar... isn't it pretty?" width="132"][img]http://seidou.org/forum/index.php?action=dlattach;id=172;type=avatar[/img][/caption]

Using the tag with other things

You can also caption other things, such as simple text.  The text will be centered by default, so use the alignment tags if you want a different alignment.

[caption ctext="Some text is above" width="200"]You can do this with it as well if you want[/caption]

Code Select Expand

[caption ctext="Some text is above" width="200"]You can do this with it as well if you want[/caption]

[caption ctext="Some text is above and left-aligned" width="200"]

You can do this with it as well if you want

[/caption]
[caption ctext="Some text is above and right-aligned" width="200"]

You can do this with it as well if you want

[/caption]

Code Select Expand

[caption ctext="Some text is above and left-aligned" width="200"][left]You can do this with it as well if you want[/left][/caption]
[caption ctext="Some text is above and right-aligned" width="200"][right]You can do this with it as well if you want[/right][/caption]

[Dan]

The float tag allows you to position parts of you post on the left or right of the post and have the rest of the post wrap around it (N.B. the code tag is an exception because of how it is parsed; the code tag with 'break' the floating, but I shall cover this later).

[float="right"] [/float]
Floating a element with a set width (block level elements)

The simple way to use the tag is to float something like an image.

[float="left"][/float]
I have placed my avatar in a floating tag.  Note how the rest of the post is wrapping around it.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

The above was generated using:

Code Select Expand

[float="left"][img]http://seidou.org/forum/index.php?action=dlattach;id=172;type=avatar[/img][/float]
I have placed my avatar in a floating tag.  Note how the rest of the post is wrapping around it.  If you wanted to place the float on the right then replace "left" with "right".

[i]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.[/i]

[float="right"] [/float]
Floating elements without a set width (in-line elements)

You may wish to float portions of text instead of block elements like images.  This cannot be done using the normal float tag, as the following example should show (the floated text is red):

[float="left"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental[/float]
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum

Code Select Expand

[float="left"][color=Red]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental[/color][/float]
[i]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum[/i]

The reason why this does not work is because the normal tag does not bother to constrain the float to a specific size, and the text will expand the float to fill the page if needed.  In order to float text, or other in-line elements, you should use a float with a set width.

[float="left" width="250"]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental[/float]
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.

Code Select Expand

[float="left" width="250"][color=Red]Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental[/color][/float]
[i]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.[/i]

The only different between how this version of the float tag and the previous tag is the width attribute.  Remember to set the width.

Combining floats

It is possible to combine the floats:

[float="left"][/float]
[float="right"][/float]
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

[float="right" width="100"]This is floating to the right and it is green.[/float]
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

Code Select Expand

[float="left"][img]http://seidou.org/forum/index.php?action=dlattach;id=172;type=avatar[/img][/float]
[float="right"][img]http://seidou.org/forum/index.php?action=dlattach;id=172;type=avatar[/img][/float]
[i]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.[/i]

[float="right" width="100"][color=Green]This is floating to the right and it is green.[/color][/float]
[i]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.[/i]

Float breaking

Earlier I mentioned that code blocks "break" the floating.  Code blocks do not wrap around the floats, so code blocks will appear after any floating elements.

[float="left" width="300"]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate.[/float]

Code Select Expand

Some code

There may be times that you want the next part of the text to come after all the floating elements.  In this case, all you need to do is place a breaking tag ( '['break']' without the apostrophes).

[float="left"][/float]
I have placed my avatar in a floating tag.  Note how the rest of the post is wrapping around it.
[break] But this will appear after the float.

Code Select Expand

[float="left"][img]http://seidou.org/forum/index.php?action=dlattach;id=172;type=avatar[/img][/float]
I have placed my avatar in a floating tag.  Note how the rest of the post is wrapping around it.
[break] But this will appear after the float.

[Dan]

[float="right"][/float]
Instead of explaining what an overflow is, I'll just show how the tags work.

With a defined height and width

[oflow width="400" height="100"]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum[/oflow]

Code Select Expand

[oflow width="400" height="100"]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum[/oflow]

With a defined height

[oflow height="50"]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum[/oflow]

Code Select Expand

[oflow height="50"]Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum[/oflow]

With a defined width

[oflow width="400"]Blah blah blah....

Epsumfactorialnondepositquidproquohicescorololypianquarrelsetgorillacongoliumsicadnauseumsouvlakiignituscarborundum[/oflow]

Code Select Expand

[oflow width="400"]Blah blah blah....

Epsumfactorialnondepositquidproquohicescorololypianquarrelsetgorillacongoliumsicadnauseumsouvlakiignituscarborundum[/oflow]

[Grate Saiyaman]

Thank you DAN . . .
. . . you are truely divine . . .