How to use BBcode components

[Raddeck]

BBcode components styles

Documentation and examples for BBcode components available for members.
Although these components are accessible to everyone, please do not abuse them as you risk having this right taken away.

---

Alert message
Information: Alert message from admin and moderator.
Parameter: none
Example Usage:

Code: Select all

[mod=Raddeck]Please post in the right section...[/mod]

Result:

!	Message from: Raddeck
	Please post in the right section...

---

Top of the page


Embed video
Information: Embed any video site url.
Parameter: video url
Example Usage:

Code: Select all

[bbvideo]https://www.youtube.com/watch?v=d1ZnM7CH-v4[/bbvideo]

Result:

---

NFO
Information: For showing ascii art. Don't abuse using it or your posts will be deleted.
Parameter: https://patorjk.com/software/taag/
Example Usage:

Code: Select all

[nfo]your ascii code here[/nfo]

Result:

 (                                 
 )\ )      (    (              )   
(()/(   )  )\ ) )\ )  (     ( /(   
 /(_)( /( (()/((()/( ))\ (  )\())  
(_)) )(_)) ((_))((_)/((_))\((_)\   
| _ ((_)_  _| | _| (_)) ((_| |(_)  
|   / _` / _` / _` / -_/ _|| / /   
|_|_\__,_\__,_\__,_\___\__||_\_\   

---

Top of the page


Off topic
Information: To highlight that the post or subject is off topic.
Parameter: none
Example Usage:

Code: Select all

[offtopic]Please post in the right section...[/offtopic]

Result:

Off Topic

Please post in the right section...

---

Progress bar
Information: To add a progress bar in a post.
Parameter: Any number between 1-100
Example Usage:

Code: Select all

[progress]20[/progress]

Result:

20%

With color:

Code: Select all

[progressC=blue]75[/progressC]

Result:

75%

---

Quoting and outputting fixed-width text
There are 14 ways you can quote text, with a reference or without.

This method allows you to quote with a reference to a person or whatever else you choose to put! For example to quote a piece of text Mr. Blobby wrote you would enter:

Code: Select all

[quote="Mr. Blobby"]The text Mr. Blobby wrote would go here[/quote]

Result:

The text Mr. Blobby wrote would go here

The second method allows you to blindly quote something. When you view the message it will simply show the text within a quotation block.

Code: Select all

[quote]The text Mr. Blobby wrote would go here[/quote]

Result:

The text Mr. Blobby wrote would go here

The 12 other way are shown here: https://lifeplay.site/viewtopic.php?p=214#p214

---

Top of the page


Soundcloud
Information: Hides the text in a Spoiler tag.
Parameter: music url
Example Usage:

Code: Select all

[soundcloud]https://soundcloud.com/oomph-official/truemmerkinder[/soundcloud]

Result:

---

Table ASCII-style
Information: Create tables using any of these ASCII-style formats. User Guide.
Parameter: None
Example Usage:

Code: Select all

Simple table:
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |

Compact table:
The outer pipes and spaces around pipes are optional.
Header 1|Header 2
-|-
Cell 1|Cell 2

Text alignment:
| Left | Center | Right |
|:-----|:------:|------:|
|   x  |    x   |   x   |

Result:
Simple table:

Header 1	Header 2
Cell 1	Cell 2

Compact table:
The outer pipes and spaces around pipes are optional.

Header 1	Header 2
Cell 1	Cell 2

Text alignment:

Left	Center	Right
x	x	x

OR this way
Like in html, by using combination of Table - tr and td or tdb
Example Usage:

Code: Select all

[tables]
[tr]
[td]Title 1[/td]
[td]Title 2[/td]
[/tr]
[tr]
[td]text 1[/td]
[tdb=red]text 2[/tdb]
[/tr]
[/tables]

Result:

Title 1	Title 2
text 1	text 2

---

Top of the page

[Raddeck]

Here's 12 other way to use Blockquotes



First you need to use different tags "qs":

Code: Select all

[qs][/qs]

Using them without any parameter, will not works.

Result:
[qs]Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...[/qs]



But, to make it works and have more beautiful quotes, you can do:

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Parameters for "qs" are:

• darker
• grapefruit
• bittersweet
• sunflower
• grass
• mint
• aqua
• bluejeans
• lavander
• pinkrose
• light
• gray

Parameters for "spa" are (To color everything between the "spa" tags.):

• Cdefault
• Cgrapefruit
• Cbittersweet
• Csunflower
• Cgrass
• Cmint
• Caqua
• Cblue
• Clavander
• Cpinkrose
• Clight
• Cgray

Result/Code:
Joe said

Code: Select all

[spa=Cmint]Joe said[/spa]

Both code mix together:

Code: Select all

[qs=grapefruit][size=120][spa=Cmint]Joe said[/spa] - Blockquote Color Palette[/size]  
[b]Use this class for blockquote layout.[/b]
Some Text...[/qs]

Color demonstration for each of the blockquotes

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Joe said - Blockquote Color Palette
Use this class for blockquote layout.
Some Text...

Have fun with it!

[Raddeck]

New icons BBcode for you all
I implemented Iconify into the forum so this way, you will be able to use a wide variety of icons inside your posts.


How to use Iconify
Add icons to your page with simple code like this:

Code: Select all

[icy=youiconid][/icy]

Result:



Or for more advanced, just do this:

Code: Select all

1- My icon is: whh:sextant; color is: lime
[icyc="whh:sextant" color="lime"][/icyc]

2- My icon is: fa:bars; color is: #6f4ac2
[icyc="fa:bars" color="#6f4ac2"][/icyc]

Result:
1- My icon is: whh:sextant; color is: lime


2- My icon is: fa:bars; color is: #6f4ac2



Icons collections:
All icons listed on Iconify website are free to use, their collections include popular icons, icon fonts and several Emoji.
https://icon-sets.iconify.design/


The color can be: color name or Hex name
Reference:
https://www.w3.org/wiki/CSS/Properties/color/keywords
https://htmlcolorcodes.com/color-names/

[Raddeck]

I have added 2 new BBcodes : bc and bc2


They are Bootsrap div element (containers)
Containers are the most basic layout element in Bootstrap.

In this example, containers "bc" are used to contain our blocks "bc2".

Code: Select all

 // The indentation is only to show the code, it is not necessary.
[bc=container]
    [bc2=row]
        [bc2=col]YOUR CONTENT[/bc2]
    [/bc2]
[/bc]

Parameter for "bc":
bc is the main container.
container, container-sm, container-md, container-lg, container-xl, container-xxl or container-fluid

Parameter for "bc2":
bc2 is used for "row and col"


How to use all this:
Read this: https://getbootstrap.com/docs/5.0/layout/columns/ to understand how the columns works in Bootstrap.


Example:

Code: Select all

[bc=container][bc2=row][bc2=col]YOUR CONTENT[/bc2][/bc2][/bc]
or something like:
[bc=container][bc2=row][bc2=col]YOUR CONTENT 1[/bc2][bc2=col]YOUR CONTENT 2[/bc2][bc2=col]YOUR CONTENT 3[/bc2][/bc2][/bc]

Result:

YOUR CONTENT

or something like:

YOUR CONTENT 1

YOUR CONTENT 2

YOUR CONTENT 3

Or a real example on this page:
https://lifeplay.site/viewtopic.php?t=408