BBBBCode

Big Beautiful BBCode

NEW as of 2020! BBBBCode EXPLODED! 💥 Activate or install only what you want. 🌈

A Flarum extension which adds additional BBCode. It installs multiple separate BBCode extensions so that you have the power to enable just what you need. Keep this extension (bbbbcode) enabled if you want HTML table and horizontal line BBCode. All BBCode is lightweight; they are all HTML and CSS only. However, currently a JavaScript polyfill is added which ensures that the spoiler BBCode will work in IE and Edge browsers.

Further down in this post you will find detailed instructions. But first, here is a quick list of all of the BBCode you would have if you kept all BBCode extensions enabled:

[tooltip][/tooltip]
[spoiler][/spoiler]
[blur][/blur]
[accordion][/accordion]
[chat]
[audio]
[action][/action]
[pop] (popup) This one BBCode is not compatible with my "Link Decisions" extension at this time. But, you can just remove this one or deactivate it if you also use Link Decisions. All other BBCodes are compatible. 🙂
[red][/red] (also orange, yellow, green, blue, purple)
[hl][/hl] (highlight)
[kbd][/kbd] (html keyboard tag)
[space][/space] (sometimes you need an extra line break)
[background][/background] (added directly from s9e TextFormatter)
[font][/font] (added directly from s9e TextFormatter)
[hr] (added directly from s9e TextFormatter)
[align][/align], [left][/left], [right][/right], [justify][/justify] added directly from s9e TextFormatter)
[float][/float] (added directly from s9e TextFormatter)
and table bbcode ([table],[thead],[tbody],[th],[tr],[td]) (added directly from s9e TextFormatter)

Also, remember, Flarum already has a core BBCode extension which is why this extension doesn't include any basics such as, [b]bold[/b], or other basic codes. Here are the BBCodes already included with Flarum core:
[b], [i], [u], [s], [url], [img], [email], [code], [quote], [list], [del], [color], [center], [size], [*]

Install

composer require zerosonesfun/bbbbcode
The above command will install all of the following extensions listed immediately below. Then, simply activate what you want. Or, you could instead just install one or two of the following if that's all you want.

composer require zerosonesfun/spoiler

composer require zerosonesfun/blur

composer require zerosonesfun/tooltip

composer require zerosonesfun/accordion

composer require zerosonesfun/chat

composer require zerosonesfun/pop

composer require zerosonesfun/action

composer require zerosonesfun/font

composer require zerosonesfun/flarum-bbcode-audio

Update

1) composer update zerosonesfun/bbbbcode (or substitute any of the single BBCode extension names)

2) Deactivate and reactivate the extension in your admin. This refreshes important files.

3) Go to your dashboard, click tools, click clear cache.

4) Clear your browser cache, and any other caches like Cloudflare, if applicable.

Uninstall

composer remove zerosonesfun/bbbbcode (or substitute any of the single BBCode extension names)

Usage

The following BBCodes are available:

Tooltip:

(package: zerosonesfun/tooltip)

[tooltip="your tip here" placement="right"]word[/tooltip]

(for "placement" you may use: top, bottom, left, right)

Result:

Spoiler:

(package: zerosonesfun/spoiler)

[spoiler="Text you click on"]What you will see after clicking.[/spoiler]

Result:

Or, if you omit the “spoiler=“ part (the title) then the title of your spoiler will default to “Read More.”

Blurred Spoiler:

(package: zerosonesfun/blur)

(Hover over, or if on mobile tap, to reveal.)

[blur]This is what happens at the end of the movie.[/blur]

Result:

Accordion:

(package: zerosonesfun/accordion)

[accordion header="YOUR HEADER TEXT"]The text that is hidden at first but then appears goes here[/accordion]
[accordion header="YOUR NEXT HEADER TEXT"]The text that is hidden at first but then appears goes here[/accordion]

(repeat the accordion BBCode as many times as needed)

Result:

Chat:

(package: zerosonesfun/chat)

[chat-a="Why did the chicken cross the road?" who="Me"]
[chat-b="It was hungry?" who="Mary"]
[chat-a="No! Wrong!" who="Me"]
[space][/space]

(repeat as many times as needed alternating chat-a and chat-b)

("space" BBCode at end of chat is optional - it adds some extra space)

Result:

Action:

(package: zerosonesfun/action)

[action]grabs a drink[/action]

Result:

(Image enlarged to show spinning asterisks. It’s a new take on the old chat room action format.)

Popup:

(package: zerosonesfun/pop)
This one BBCode is not compatible with my "Link Decisions" extension at this time. But, you can just remove this one or deactivate it if you also use Link Decisions. All other BBCodes are compatible. 🙂

[pop button="Click Here" title="Hello" content="Thank you for being a friend."]

Result:

(By the way, the button you see here to close the popup... That's pretty much what the button looks like that you click on with your custom text to open the popup.)

Quick font colors & highlighter

(package: zerosonesfun/font)

New as of version 1.1.6 there are now quick font color codes and a highlight code. Yes, with the standard BBCode without this extension you can change font colors. But, these equal less keystrokes. So, it's a little faster to make a word red for example compared to the standard way.

Colors:
[red]text here[/red]... other colors available: [orange], [yellow], [green], [blue], [purple]

Highlight:
[hl]highlight this text[/hl]
(That's a "L" not a 1. It's hl for highlight.)

Result:

Audio:

(package: zerosonesfun/flarum-bbcode-audio)

[audio mp3="song.mp3" ogg="song.ogg"]
[audio mp3="song.mp3"]
[audio ogg="song.ogg"]
[audio m4a="song.m4a"]
[audio wav="song.wav"]
[audio flac="song.flac"]
[audio webm="song.webm"]
[audio mp3="song.mp3" width="50"]

(You may put a mp3 and ogg file together for maximum browser compatibility, or just post a mp3, ogg, wav, flac, webm, or m4a file alone. Also, as the last example shows, you may modify the width. The width will become a percentage and by default, if you choose not to declare a width, the player will be 100% width.)

Note: This audio BBCode is compatible with my SM2 audio extension. Feel free to use both! But, of course you would not want to use this plus my separate audio BBCode add-on. That would just add the audio BBCode code twice.

KBD (HTML Keyboard tag):

(package: zerosonesfun/font)

Please type [kbd]breathe[/kbd] in your reply.

Result:

Background, Font, Table, HR, Align, Float:

For now I am not adding screenshots of these. These are pretty basic and added directly from s9e TextFormatter. Background, Font, Align (plus align shortcuts Left, Right, Justify) come with the Font extension. Table codes, HR (horizontal line), and Float come with the main bbbbcode extension. The TextFormatter link above will show you how to use these.

GitHub: https://github.com/zerosonesfun/bbbbcode or https://github.com/zerosonesfun?tab=repositories to browse through all of the single BBCode extensions
Packagist: https://packagist.org/packages/zerosonesfun/bbbbcode