BBBBcode
Big Beautiful BBcode
Last updated: October 10, 2019 (Current version: 2.1.4 - Donatello TMNT)
A Flarum extension which adds additional bbcodes. It is lightweight; all of the bbcodes are HTML and CSS only. However, currently a JavaScript polyfill is added which ensures that the spoiler bbcode will work in IE and Edge browsers. One day, this small bit of JavaScript may be removed if it is determined that it is no longer necessary.
Below you will find detailed instructions, but in short so that you have an idea of what bbcodes are included, here's the codes you get with this extension (this list also shows which require a closing bbcode tag and which do not):
- [tooltip][/tooltip]
- [spoiler][/spoiler]
- [blur][/blur]
- [accordion][/accordion]
- [chat]
- [audio]
- [action][/action]
- [pop] (popup)
- [red][/red] (also orange, yellow, green, blue, purple)
- [hl][/hl] (highlight)
- [space][/space] (sometimes you need an extra line break)
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. This extends the core bbcode extension.
Install
composer require zerosonesfun/bbbbcode
Update
1) composer update zerosonesfun/bbbbcode
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
Usage
The following BBcodes are available:
Tooltip:
[tooltip="your tip here" placement="right"]word[/tooltip]
(for "placement" you may use: top, bottom, left, right)
Result:
Spoiler:
[spoiler="Text you click on"]What you will see after clicking.[/spoiler]
Result:
Blurred Spoiler:
(Hover over, or if on mobile tap, to reveal.)
[blur]This is what happens at the end of the movie.[/blur]
Result:
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:
[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:
[action]Walks into a wall[/action]
Result:
(Image enlarged to show spinning asterisks. It’s a new take on the old chat room action format.)
Popup:
[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
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:
[audio mp3="song.mp3" ogg="song.ogg"]
or
[audio mp3="song.mp3"]
or
[audio ogg="song.ogg"]
Result would be the browser's default audio player. I'm not including a screenshot of this particular bbcode since each browser is different. Also, I'm the author of the Soundmanager 2 audio extension. That extension is not compatible with the audio bbcode in this extension. So, you have a decision to make. Use this extension and have default browser audio players which sometimes look cool and have nice features like volume control and a download menu. Or, use my Soundmanager 2 extension which is compatible with more audio types, and will look the same in different browsers. But the player is simply a button basically. No controls.
Need a different custom BBcode?
My website address is below and you’ll find a contact form on the “connect” page. Contact me and we can talk about the custom BBcode you need. It would not be free. Even creating a new BBcode takes time. But, depending on the complexity of the BBcode you need, it might be very cheap. 🙂
GitHub: https://github.com/zerosonesfun/bbbbcode
Packagist: https://packagist.org/packages/zerosonesfun/bbbbcode
Me: https://wilcosky.com
