The Beginner's Guide to BBCode

[Ranger]

The Beginner's Guide to BBCode

Welcome to The Beginner's Guide to BBCode. In this guide we will cover the basics of BBCode, starting with the basics of how to style your text and eventually making our way to knowing how to fill out prewritten BBCode. It's important to note that this guide will only cover the basics of BBCode and will not be going in-depth to the extent of teaching advanced techniques such as floating text, creating tables, alert messages, and so on. If you're looking to complete any "advanced" techniques with BBCode, I'd suggest googling how to do X function; there are loads of resources out there!

This guide will be useful for BBCode formatting on the ECRP Government Website.

If you are looking for a more advanced and/or in-depth guide, visit the guide made by @Mpache here.
 

1. The Toolbar

One of the first things that is good to learn is how to use the toolbar that is available to use whilst creating a post or posting a reply. In this first section, we'll be covering most of the relevant tools* that are available on the toolbar. Whilst looking at each symbol on the toolbar, if you hover your mouse over each tool it will give you a short description of what the tool does.

 

• B - This is the bolding tool. Highlight your text and click the B to bold your text.

• I - This is the italicize tool. Highlight your text and click the I to italicize your text.

• U - This is the underline tool. Highlight your text and click the U to italicize your text.

• " - This is the quote tool. Highlight your text and click the " to quote text.

• The symbol next to the * symbol is the image tool. This tool inserts the standard image function into your text.

• The chain symbol is the "Insert URL" tool. When you press this it has 3 functions.
  • Function 1: If you click the tool and put your desired link in "Enter a site URL", it pastes the raw link.
  • Function 2: If you add a description it will hyperlink the description text with the URL you entered into the "Enter a site URL" field.
  • Function 3: You can highlight your text and it will add the standard url BBCode on each side of your text. Make sure you add an = if you want to hyperlink the text.

• The palette symbol is the text color tool. You can color text by highlighting your text and then clicking your color of choice.

• The dropdown box that says "Normal" is the size tool. Highlight your text and select a size in the drop-down to change the size of your text.

• S - This is the strikethrough tool. Highlight your text and click the S to strikethrough your text.

• OOC - This is the OOC Bracket tool. Highlight your text and click the OOC tool to add (( )) around your text.

 

*"Relevant tools" references the tools that are used commonly by the average user.

2. Text Styles

Whilst using BBCode, one of the main things you'll be doing is using (you guessed it) text! When using text, there are many ways you can style your words, whether it be a basic thing such as bolding your text or having the text be a link to redirect people to an image or another website.

Text Style:	BBCode:	Output:
Bold	[b]bolded text[/b]	bolded text
Italicized	[i]italicized text[/i]	italicized text
Underlined	[u]underlined text[/u]	underlined text
Strikethrough	[s]strikethrough text[/s]	strikethrough text
Highlighted	[highlight=yellow]highlighted text[/highlight]	highlighted text
Colored	[color=red]colored text[/color] or [color=#FF0000]colored text[/color]	colored text
Text Size	[size=150]large text[/size]   [size=85]smaller text[/size]	Large Text Smaller Text
Quoted Text	[quote]text[/quote] or [quote=AUTHOR]text[/quote]	There are two types of quoted text. The first example will simply put your text in a quote box and the second example will include an author within the quote box. Examples of each quote type can be found here.
Links and Hyperlinks	[url]link[/url] (this will output a raw link) [url=link]EclipseRP Panel[/url] (this will hyperlink the text)	https://eclipse-rp.net/#/ EclipseRP Panel

3. Images

Now knowing the basics on how to style your text, we'll cover the basics of images which can span from posting an image to posting an image with a specific size and/or resizing one.

Function:	BBCode:	Output:
Posting an Image	[img=image link here]
Linking an Image	[url=link to image]Text[/url] (the concept of linking an image is the same as hyperlinking text)	IMAGE
Posting an image with a specific size	[fimg=WIDTH,HEIGHT]image link here[/fimg]

Ranger Pro Tip: It's completely up to you on which image hosting website you prefer to use, but my preferred site is imgur.com as it's a very easy-to-use website and has many options when sharing an image. If you (the user) prefer another site or service, that's fine too!

4. Formatting Tools

Now knowing the basics on how to style your text, there are a few tools you can use to format text such as lists and things like quotes or spoilers.

Format:	BBCode:	Explanation or Output:
Spoiler & Spoil	Spoiler: [spoiler]Content[/spoiler] [spoiler=SPOILER NAME]Content[/spoiler] Spoil: [spoil]Content[/spoil]	The main difference between spoiler and spoil is that you can add a name to spoiler but not to spoil. To add a name to a spoiler you need to add an = sign after "spoiler" as shown in the BBCode. The second difference between the two is how each one is displayed. A preview of each can be seen here.
Lists	Normal list: [list] [*]Item 1 [*]Item 2 [*]Item 3[/list] List w/ sub-lists: [list] [*]Item 1 [list] [*]Item 1a[/list] [*]Item 2 [*]Item 3[/list]	To make a list, you simply type out "list" within brackets. By default, list will add one (1) bullet point. To add more, you must place [*] at the start of a new line. Standard lists as shown in the first two examples will use bullet points by default. There are different variations where you're able to use numbers or letters instead of bullet points. The common variations are list=1, list=a, and list=A. The difference between "a" and "A" is that the text-based bullet point will either be lowercase or uppercase. A preview of each list type can be seen here.
Divbox	Normal Divbox: [divbox=COLOR]Text[/divbox] Custom Colored Divbox: [divbox=#COLOR HEX]Text[/divbox]	Divbox is a function used to add boxes around text to more or less clean up the structure of the content being made. To make a divbox you'll just use the code shown, and for "COLOR" you'll put the color of your choice. For the most part white is the most commonly used divbox color, but you can use any basic color and if you want to use a custom color, you'll put the color's hex code after the =. A preview of a few different divboxes can be seen here. Ranger Pro Tip: A good website for getting custom colors can be found here.

5. Filling out premade BBCode

This portion of the guide will mainly cover the concept of filling out prewritten BBCode this is common when filling out a job application for a Government faction such as the LSPD, LSSD, DOC, SAGOV, SAJB, or the LSEMS.

At first, seeing a large chain of BBCode can be quite concerning if you don't know what you're doing, so the best thing to do is explain what you should edit/change and what you should leave alone whilst filling out these documents. As seen in all of the examples in the sections above, the common trend is that all BBCode starts and ends with a statement in brackets, an example being bolded text as shown below;

[b]This is how you bold text, check out those whacky brackets![/b]

When filling out a form or application it's important to understand that all of the BBCode has been written for you, you're just more or less filling in blanks or adding/replacing content such as adding a photo to a prewritten hyperlink or adding your character's name within the bolded text. With that being said, and with the basics of BBCode being explained in the sections above, you should make sure that when filling out a form you do not remove or add any extra brackets into the prewritten code unless you're adding more. Below is an example of how you should and should not fill out a prewritten form;

The correct way is shown below:

[list=none][b]1.1 - Name[/b]: 
  [LIST=NONE]
  First Name: **ADMIN**
  Surname: **RANGER**
  [/LIST]

Notice how I did not modify any of the prewritten BBCode and only filled in the blanks.

The incorrect way is shown below:

[b]1.3 - Proof of Identification ([url=https://imgur.com/3VOTXMg][i]Example[/i][/url])[/b]:
  [LIST=NONE]
  [url=https://imgur.com/jivYUYlATTACHED DOCUMENTATION[/url]
  [/LIST]

If you look near the url=, you can see that the end bracket was removed which will ruin the code and cause it to display incorrectly when being posted. To fix this you'd add the bracket back where it should be at the end of the link.

 

Thanks for checking out the guide! If you have any questions or need general assistance regarding BBCode that wasn't covered in this guide, feel free to create a ticket in the ECRP Discord. If there are any requests for basic BBCode functions to be added, feel free to send me a forum pm.

[DoTo]

wow, this is an epic guide! finally I know how to fill out my DOC application, thanks!

[JWIT1]

Looks amazing @Ranger!!!

[Ash]

Thanks, i learned a lot from this post great work ranger

[Malinq]

Appreciated. Not useful for me, but I find it fascinating for someone who is not familiar with it! Great job!

[Yputi]

Legend. Will make sure to send this to people who are new to bbcode

[Shwy]

You still haven't given me a guide on how to RP bro please PD is catching on

[Hector2Fingers]

Doing God's work for the people not familiar with it.  Excellent job, Ranger.

[Harveyyy]

Thank you for your contribution!

[Mpache]

ooga booga BBCode!!11!!11

Don't be discouraged from checking out the advanced guide, plenty of intermediate stuff there too!

PS: There may or may not be a couple of easter eggs in the other guide :clueless:

[Valor]

Very epic friend you are very pogger & skibidi toilet!

[britbritxo]

This is unreal!!! SLAY!

[Harley]

ok