Big Beautiful BBcodes

010101

BBBBCode

Big Beautiful BBCode

Last updated: November 28, 2019 (Current version: 2.9.6 - "Michelangelo 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.

Further down in this post you will find detailed instructions. But first so that you have an idea of what BBCodes are included, here are 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)
[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)
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. This extends the core BBCode extension. 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

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:

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

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"]
[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):

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

Result:

Background, Font, Table:

For now I am not adding screenshots of these three. These are pretty basic and added directly from s9e TextFormatter.

GitHub: https://github.com/zerosonesfun/bbbbcode
Packagist: https://packagist.org/packages/zerosonesfun/bbbbcode

010101

The plan is to add many different bbcodes to this extension. Right now, it is only one. A tooltip bbcode. You may reply and suggest a bbcode that you'd like to have added. As long as it isn't too crazy, I may add it in a future release.

010101

v0.1.6 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/v0.1.6-beta.8

Added an accordion bbcode. The first post has been updated with the new bbcode and example.
Added ability to change the position of the tooltip when using the tooltip bbcode.

Have a bbcode you think would be useful? Let me know. I can't promise that I'll be able to implement it, but I still welcome any ideas. 😄

010101

v0.1.9 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/v0.1.9-beta.8

Added two fun BBcodes: [action] and [animal] - both pure CSS. See first post.

iCosmo

010101 Very cool, thank you！

010101

v0.1.9.3 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/v0.1.9.3-beta.8

If you by chance already installed the version I released this morning, you will want to update. Nothing major, but I discovered on iOS browsers only, the accordion header had a weird border inside of it. This is now fixed. It's almost 2020 and we still have to deal with different browsers doing different things, especially mobile browsers. Sad. Just make all browsers render things exactly the same already! Wake up sheeple! 😂

iCosmo

010101 Your efficiency is very high, thank you very much!

010101

v0.1.9.8 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/v0.1.9.8-beta.8

A single popup (or modal box) added
A 5 step popup (or modal box) (or tour) added

See first post for details.

These new popups aren't working on mobile. Looks like I have some troubleshooting to do...

iCosmo

010101 Wow, your bbcode makes the theme more dynamic！

Admin000

@010101 if I'll give you the site where I found data round shape. Can you get css out of them?

010101

Admin000 Maybe. Feel free to post the link here or in your other thread.

Admin000

010101 brainly.com register, and after registration you will see the form data

010101

v0.2.0.1 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/v0.2.0.1-beta.8

Almost fixed the popup CSS issue happening on small screens where the popup isn’t resizing properly. Everything worked in this mobile emulator I used. But, now that I’m testing it on my iPhone, the popup still isn’t resizing properly. It is usable though. It just doesn’t look as good as it should on iPhone. I will research and fix this at some point.

010101

Admin000 Sorry, but this isn't something I'll have time to work on right now. But, thank you for bringing up the idea since your idea did inspire the latest "popup" BBcode I added to this extension.

010101

v0.2.0.2 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/v0.2.0.2-beta.8

Fixed CSS issue on mobile involving the new popup BBcode.
Now that this is fixed, and all BBcodes are working well, most likely this will be the last release at least for a little bit. Unless I think of a really crucial BBcode that is needed.

As always - see first post for extension details and examples.

Ralkage

LOVE IT.

We definitely need a BBCode Manager down the line at this rate 😆

010101

New version released which adds an audio bbcode.

Audio:

[audio mp3="song.mp3" ogg="song.ogg"]

[audio mp3="song.mp3"]

Result would be the browser's default audio player. I'm not including a screenshot 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.

010101

v0.3.1 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/0.3.1

Added a chat transcript bbcode (see first post for example and instructions)
Added a vertical space bbcode (due to the way certain bbcodes are styled, sometimes you might want a little bit of extra space between something like your accordion, or your chat, and the next line of text. It just ensures things are spaced nicely. All you have to do is put the following on a new line: [space][/space]

☮️

010101

v0.3.4 Released!

https://github.com/zerosonesfun/bbbbcode/releases/tag/0.3.4

Added a [spoiler] bbcode. (Although this extension already has an accordion, it could be a little too fancy for some. Or, just not quite what someone is looking for. This spoiler is very basic. And, as with all of the bbbbcode, it is pure HTML & CSS. No JavaScript needed.)
- The [spoiler] bbcode is set up so that you may turn any word or even a sentence into the part you click on. The hidden text is within the opening spoiler tag. For example:
  * [spoiler="THIS IS THE HIDDEN TEXT"]Click at your own risk[/spoiler]
  * A font awesome arrow is added to the right of your spoiler as well.
- I believe there is already a spoiler bbcode or two out there for Flarum. This one may or may not be compatible. It depends on how the other ones are coded (if they happen to use the same CSS classes for example, I'm sure there would be trouble).

See the first post for a GIF example. 🙂

☮️

katos

These look fantastic! Thanks @010101
Would it be possible to restrict certain BBCodes to specific permissions? For example having only staff able to post the pop-up one?

010101

katos Anything's possible. But, that's out of my realm. 😁 The only thing I could do for you at this time is tell you how to disable the popup one completely. Or, one could make the bbcode very specific/unique, almost like a password, so that a regular member wouldn't know how to do it. For example, one could make the popup bbcode something like, [pop019284746]. Making it really hard for a normal user to guess what the bbcode is to make a popup.

datitisev

katos I don't know if that's possible, as the Formatter configuration (which includes plugins added through extensions such as fof/formatting and custom bbcodes) is cached, so is only called when enabling/disabling some extensions and clearing the cache.

Perhaps one can simply make it so it doesn't render it (still processed though). 🤷‍♂️