[GUIDE] How to BBCode (Forum code)

Noxxy

Senior Moderator
ItzNoxxy
ItzNoxxy
Joined
Jul 11, 2020
Messages
341
Hi, ItzNoxxy here :] I don't know if this is useful or anything... But here's a guide on how to use the tool bar in forums or if you want to learn some basics of BBCode.
If I'm missing anything or if anyone has anything to add on, I'd be happy to include it into this guide.

Basics/Tool Bar

bar.PNG
This is the tool bar.
For this guide, I included spaces in the between the coding so that it's visible. If you do use this type of coding, remove the spaces. Also, you don't have to use this to code your posts, you can just click on the tool bar icons or use the ctrl commands.
Going from left to right of the tool bar:

Remove Formatting: Removes all formatting for any text you highlighted

Bold: Bolds your words

Code: [b ] [/b]
Example: [b ]Splash[/b] creates Splash

Italic: Italicizes your words
Code: [i ] [/i]
Example: [i ]Splash[/i] creates Splash

Underline: Underlines your words
Code: [u ] [/u]
Example: [u ]Splash[/u] creates Splash

Strikethrough: Strikes/crosses your words
Code: [s ] [/s]
Example: [s ]Splash[/s] creates Splash

Text Color: Changes the color of your words
Code: [color=enter color/code here] [ /color]
3 different methods;
Example: You can use a color code. If you wanted neon blue, the code for it would be #00FFFF. You can highlight the text you want and then enter said code into where it says "Hex Color" when you click on the Text Color icon.
Example 2: [color=#00FFFF ]Splash[/ color] creates Splash
Example 3: You can also just type out the color. I've provided a list of colors you can use. [color=purple ]Splash[ /color] creates Splash

Fun note: "transparent" is also a color so you can have some fun with that ;] you can see transparent text if you highlight it.
[color = transparent] text [/color]


Font Family: Changes the font of your words
Code: [font=enterfont[/font]
Example: [font = sans ]Splash[/font] creates Splash

Font Size: Changes the size of your words
Code: [size=enter size here] [/size]
Example: [size=1 ]Splash[/size] creates Splash
Example 2: [size= 10]Splash[/size] creates Splash (honestly just play around with the numbers)

Insert Link: Creates a hyperlink (clickable word)
Code: [url = ] [/url]
Example: [url = https://thesplashmc.net/ ]Splash[/url] creates Splash

Insert Image: Insert an image
Code: [img ] enter image address/link here [/img]
Example: [img ]link;like the https thing[/img] creates
Sites like imgur provides a BBCode copy and paste. Otherwise, you can just right click any image and click "copy image address" for the link.

Smilies: Insert smilies

Insert Media: Inserts media

Code: [MEDIA =enter source here; sources listed when you click on the icon ] [/MEDIA]
Example: [MEDIA = youtube ] video ID [/MEDIA] creates
It's easiest to click on the icon rather than manually coding it (obviously)

Insert Quote: Insert Quote
Code: [quote ] [/quote]
Example: [quote ]If it's not worth it don't do it[/quote] creates
If it's not worth it don't do it
You can also quote a person.
Code: [quote = "name" ] [/quote]
Example: [quote = "Skeppy" ]If it's not worth it don't do it[/quote] creates
Skeppy said:
If it's not worth it don't do it

Insert Spoiler: Inserts spoiler alert
Code: [spoiler = "insert word" ] insert the spoiler [/spoiler]
Example: [spoiler = "SplashMC" ] TheSplashMC is the best server. [/spoiler] creates
TheSplashMC is the best server.

Insert Inline Spoilter: Inserts a blurry spoiler alert
Code: [ispoiler ] insert spoiler here [/ispoiler]
Example: [ispoiler ]TheSplashMC is the best server.[/ispoiler] creates TheSplashMC is the best server.

Insert Code: I will be honest; this is semi-new to me. The only "languages" I know is BBCode and sort of HTML. But I'm pretty sure the main purpose of this was to make it so that you can share codes / make codes visible without it being actually applied.
Code: [code ] insert code [/code]
Example: [code ] [i ]Splash[/i] [/code] creates
Code:
[i]Splash[/i]

Insert Inline Code: Same as above^
Code: [icode ] insert code [/code]
Example: [icode ][b ]Splash[/b][/icode] creates [b]Splash[/b]

NOTE: For Insert Code, you can select different languages (HTML, JavaScript, Python, etc.) by using [code = Insert language here] [/code]. Forums will type that out for you though as long as you click on the Insert icon & select one of the language options.

Align Center: Centers your text
Code: [center ] [/center]
Example: [center ]Splash[/center] creates (without the colors. I used color so its easier for you to see the difference)
Splash


Align Left: Aligns your text to the left
Code: [left ] [/left]
Example: [left ]Splash[/left] creates
Splash


Align Right: Aligns your text to the right
Code: [right ] [/right]
Example: [right ]Splash[/right] creates

Splash

Ordered List: Creates an list with numbers (I can't get it to work with letters, oh well)
Code: [list = ] [/list]
Example:
[list = 1]
[*]The
[*]Splash
[*]MC [ /list]
Creates

  1. The
  2. Splash
  3. MC

Unordered List: Creates list with bullet points
Code: [list ] [/list]
Example:
[list ]
[*]The
[*]Splash
[*]MC
[/ list]
Creates

  • The
  • Splash
  • MC
NOTE: For the list codes, [*] marks an entry

Indent: Inserts an indent in your text (I outdented this on purpose)
Code: [indent ] [/indent]
Example: [indent ]Splash[/indent] creates

Splash​

Outdent: Inverses your indent

Insert Table: Inserts a table in your selected size

Undo: Undos most recent formatting / word

Redo: Inverses your undo

Drafts: Saves your current post so if you're not done with it, you can come back to it on a later time without it being deleted

Toggle BBCode: Toggles BBCode. Basically, if use the ctrl functions or if you highlight a word and/or click on one of the tools on the tool bar, Toggle BBCode will show the "coding" of it (like the brackets {[i ] [/i]} stuff) which is what this guide is mostly about.




Now that you know the basics of BBCode, we can explore on how to combine them.


Colored Hyperlinks: Create a hyperlink with colored text
Code: [url = link ][color=##### or name of color ]Text[ /color][/url]
Example: [url = https://thesplashmc.net/ ][color = red] Splash [ /color][/url] creates Splash

If you want to make that hyperlink bigger...
Size adjustment;
Code: [size = #] [url = link ][color=##### or name of color ]Text[ /color][/url][/size]
Example: [size = 5][url = https://thesplashmc.net/ ][color = red] Splash [ /color][/url][/size] creates Splash
Example 2 (without color): [size = 5][url = https://thesplashmc.net/ ] Splash [/url][/size] creates Splash

Works with pretty much everything.
 
Last edited:

Luxilium

New member
Joined
Jul 30, 2020
Messages
2
Color Codes
If it's hard to see the color/name, highlight the text.

Here are some colors you can use with BBCode (without the hex code). There are way more colors you can use but I've listed a decent sized sample.
Use the following Code:

[color = INSERT COLOR NAME HERE] text [/color ]


Pink
Lightpink
Palevioletred
Hotpink
Deeppink

Red
Tomato
Crimson
Firebrick
Indianred

Darkred
Maroon
Brown
Sienna
Saddlebrown
Rosybrown

Tan
Darkkhaki
Burlywood
Chocolate
Peru
Darkgoldenrod

Lightcoral
Coral
Lightsalmon
Salmon
Darksalmon
Orangered
Darkorange
Orange

Sandybrown
Goldenrod
Khaki
Gold
Yellow

Greenyellow
Lightgreen
Lawngreen
Chartreuse
Lime
Springgreen
Mediumspringgreen
limegreen

Green
Forestgreen
Darkgreen
Seagreen
Mediumseagreen
Darkseagreen
Olive
Olivedrab
Darkolivegreen

Azure
Aliceblue
Lightcyan
Paleturquoise
Lightblue
Lightsteelblue
Powderblue

Cyan
Aqua
Aquamarine
Turquoise
Lightskyblue
Skyblue
Mediumaquamarine
Mediumturquoise
Darkturquoise
Deepskyblue

Cadetblue
Cornflowerblue
Steelblue
Slateblue
Mediumslateblue
Royalblue
Dodgerblue
Lightseagreen

Teal
Darkcyan
Blue
Mediumblue
Darkslateblue
Navy
Darkblue
Midnightblue

Indigo
Blueviolet
Mediumpurple
Mediumorchid
Purple
Darkmagenta
Darkviolet
Darkorchid

Lavender
Thistle
Plum
Violet
Orchid
Magenta
Fuchsia
Mediumvioletred

Darkslategrey
Dimgrey
Grey
Slategrey
Darkgrey
Silver

Note: For the grays/greys, you can type either "grey" or "gray". I'm just more used to typing "grey" but either way works.
 
Last edited:

Noxxy

Senior Moderator
ItzNoxxy
ItzNoxxy
Joined
Jul 11, 2020
Messages
341
reserved for part 3


Luxilium is my alt. I'm using it to create a separate post as forums will auto merge. I find that separate posts will make this thread look cleaner as the first part of it is already quite long.
 

Noxxy

Senior Moderator
ItzNoxxy
ItzNoxxy
Joined
Jul 11, 2020
Messages
341
\ Dang, You typed like every color known to man
Haha there's actually a lot more but i'm way too lazy to type them. You could google it but I think I provided more than enough
 

Kracked

Well-known member
Kracked_
Kracked_
Joined
Jul 15, 2020
Messages
237
I mean, I'd rather use the toolbar than the BBcode, but this is useful
 

Noxxy

Senior Moderator
ItzNoxxy
ItzNoxxy
Joined
Jul 11, 2020
Messages
341
I mean, I'd rather use the toolbar than the BBcode, but this is useful
Yes, toolbar is so much easier haha
Honestly, I was bored & to be honest it was a learning experience for some of the tools.

-

Also does anyone know how to align pictures all in the same row but in different columns ;-; I was able to do it on a different forum page but I can't do it here T.T
 
Top