Big Beautiful BBCode
NEW as of 2020! BBBBCode EXPLODED! 💥 Activate or install only what you want. 🌈
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:
- [pop] (popup)
- [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], [*]
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
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.
composer remove zerosonesfun/bbbbcode (or substitute any of the single BBCode extension names)
The following BBCodes are available:
[tooltip="your tip here" placement="right"]word[/tooltip]
(for "placement" you may use: top, bottom, left, right)
[spoiler="Text you click on"]What you will see after clicking.[/spoiler]
Or, if you omit the “spoiler=“ part (the title) then the title of your spoiler will default to “Read More.”
(Hover over, or if on mobile tap, to reveal.)
[blur]This is what happens at the end of the movie.[/blur]
[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)
[chat-a="Why did the chicken cross the road?" who="Me"]
[chat-b="It was hungry?" who="Mary"]
[chat-a="No! Wrong!" who="Me"]
(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)
[action]grabs a drink[/action]
(Image enlarged to show spinning asterisks. It’s a new take on the old chat room action format.)
[pop button="Click Here" title="Hello" content="Thank you for being a friend."]
(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.
[red]text here[/red]... other colors available: [orange], [yellow], [green], [blue], [purple]
[hl]highlight this text[/hl]
(That's a "L" not a 1. It's hl for highlight.)
[audio mp3="song.mp3" ogg="song.ogg"]
[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):
Please type [kbd]breathe[/kbd] in your reply.
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