Author Topic: Blockland Forum BBCode Guide  (Read 8681 times)

Blockland Forum BBCode Guide

Welcome to the Blockland Forum BBCode Guide topic.  I've been here for a while and have learned and used quite a lot of BBCode on this forums in my tenure here, so I thought it would be a good idea to compile what I know to help those who want to make their posts fancy.  If you are new to forums or new to this forum in particular, forums often use BBCode.

What is BBCode?
BBCode is a markup language that makes use of tags to modify text appearance or read text and interpret it in a variety of ways.  Each forum uses its own version of BBCode, sometimes removing common tags, and sometimes adding rare or custom tags.

What are tags?
Tags are snippets of code that are surrounded in brackets [] that tell the webpage how the page should be formatted.  Tags, when functioning normally, do not physically appear.  For example, [b]This text is bold.[/b] becomes This text is bold.  Tags usually have an opening tag and a closing tag, which decides when formatting of text starts and ends accordingly.  Tags may also not need a closing tag, such as in the case of [hr], which simply places a horizontal rule on the page.

Can you combine tags?
Absolutely!  For instance, if you want to make something bold and italic, you do [b][i]text[/i][/b] or [i][b]text[/b][/i], which then becomes text.  When you create multiple tags, remember to close the tag you open first last, and the last first.  For example, [tag1][tag2][/tag2][/tag1] is correct, and [tag1][tag2][/tag1][/tag2] is wrong and will not work.



Blockland Forums Tags

Bold  
Makes the text bold.
[b]Blockland[/b]
Blockland

Italics  
Makes the text italicized.
[i]Blockland[/i]
Blockland

Underline  
Makes the text underlined.
[u]Blockland[/u]
Blockland

Strikethrough  
Strikes a line through text horizontally.
[s]Blockland[/s]
Blockland

Pre-formatted Text  
Preserves whitespace by imposing a monospaced font.  Also organizes all text in a single block, meaning that the text will not automatically go to the next line unless you press Enter/Return, thus telling the text to move to the next line.

[pre][i]Name:[/i]  Blockland
[i]Description:[/i]  That game where you build stuff.[/pre]

Name:  Blockland
Description:  That game where you build stuff.


Left-Justified Elements  
Justifies text, images, and tables to the left (default).

[left][i]Name:[/i] Blockland
[i]Description:[/i] That game where you build stuff.[/left]

Name: Blockland
Description: That game where you build stuff.

Centered Elements  
Justifies text, images, and tables to the center.

[center][i]Name:[/i] Blockland
[i]Description:[/i] That game where you build stuff.[/center]

Name: Blockland
Description: That game where you build stuff.

Right-Justified Elements  
Justifies text, images, and tables to the right.

[right][i]Name:[/i] Blockland
[i]Description:[/i] That game where you build stuff.[/right]

Name: Blockland
Description: That game where you build stuff.

Horizontal Rule  
Places a horizontal rule across the page.

[hr]



Sized Text  
Modifies the size of text. Note: Use integers from 1 to 100 only.

[size=30pt]Blockland[/size]

Blockland

Change Font  
Changes the font of the text.  Note: If you are trying to use a font that other users do not have, then it will not display correctly for them.

[font=Georgia]Blockland[/font]

Blockland

Embed Image  
Embeds an image into your post.  Note: Links in image tags need to be hotlinks of images.  If you see the file extension, (.JPG, .JPEG, .PNG, .GIF) at the end, then it is likely the hotlink.  To check, open a new tab and paste the link.  If the image is the only thing you see, (no webpage around it), then the image is a hotlink.

[img]https://forum.blockland.us/Themes/Blockland/images/smflogo.png[/img]



You can also modify the dimensions of the image with the attributes height=X and [width=X], or both, where X is the dimension in pixels.

[img height=40]https://forum.blockland.us/Themes/Blockland/images/smflogo.png[/img] or [img width=100]https://forum.blockland.us/Themes/Blockland/images/smflogo.png[/img] or [img height=100 width=100]https://forum.blockland.us/Themes/Blockland/images/smflogo.png[/img]

or or

Create Hyperlink  
Creates a clickable URL link in your post.

[url]https://forum.blockland.us/index.php[/url] or [url=https://forum.blockland.us/index.php]Blockland Forums[/url]

https://forum.blockland.us/index.php or Blockland Forums

Create Email Link  
Creates a clickable email "mailto:" link in your post.

[email]Support@blockland.us[/email] or [email=Support@blockland.us]Blockland Support Email[/email]

Support@blockland.us or Blockland Support Email

(Please do not spam these emails.  Doing so may result in a ban.)

Create FTP Link  
Creates a clickable ftp link in your post.  Note that the examples below do not include any working links.  Credentials such as username and password may be required.

[ftp](non-functioning ftp link)[/ftp] or [ftp=(non-functioning ftp link)]Some FTP Server[/ftp]

(non-functioning ftp link) or Some FTP Server

Tables
Creates a table which auto-aligns text in blocks.

Table  
Makes a table block.
Table Row  
Makes a row within the table block.
Table Cell  
Makes a cell within a table row.

I use tables all the time, and while they are tricky, they can really help to make things aesthetically-pleasing.  Additionally, it can help repair some odd formatting problems that tend to appear.

[table][tr][td][b]Name:[/b][/td][td]Blockland[/td][/tr][tr][td][b]Description:[/b][/td][td]That game where you build stuff.[/td][/tr][/table]

Name:Blockland
Description:That game where you build stuff.

Note that if it helps you, you can use Enter/Return keys to make your tables easier for you and others to read in case you plan on editing your post.  Our example above can become the following if you choose, however, be mindful that there is a limit of 20,000 characters per post, and tables already hog a lot of characters on their own.

[table]
[tr][td][b]Name:[/b][/td][td]Blockland[/td][/tr]
[tr][td][b]Description:[/b][/td][td]That game where you build stuff.[/td][/tr]
[/table]

And it will still come out the same!

Superscript  
Changes the font to superscript.

x[sup]2[/sup]

x2

You can also stack  them

Subscript  
Changes the font to subscript.

x[sub]a[/sub]

xa

And yes, you can stack these, too

Teletype Font  
Converts the text to a monospaced typewriter-type text format.

[tt]Blockland[/tt]

Blockland

Code  
Puts the text in a code block.  BBCode will not work within a code block, and nothing is parsed.

[code][b]Blockland[/b][/code] or [code=Example Text][b]Blockland[/b][/code]

Code: [Select]
[b]Blockland[/b] or
Code: (Example Text) [Select]
[b]Blockland[/b]
Quotes  
Puts the text in a quote block.

[quote]Blockland[/quote]

Quote
Blockland

Note: Quotes also have the ability for you to provide further information with fields inside of the tag such as author, link and date.

In any case, it's best to just click the button when you're on the topic or scroll down from the posting menu and click on the Insert Quote link to the top right side of the corresponding post you want to quote.

Lists  
Creates a list with bullet points.

[list]
[li]Blockland[/li]
[li]That game where you build stuff.[/li]
[/list]

  • Blockland
  • That game where you build stuff.

Note that you can also substitute li for #, as long as each [#] line is separated by a line break (Return/Enter).

[list]
[#]Blockland
[#]That game where you build stuff.
[/list]

  • Blockland
  • That game where you build stuff.

If you want to justify your list, you can, but note the following instructions.

If you try to simply, justify a list like [center][list][li]Blockland[/li][li]That game where you build stuff.[/li][/list][/center], you get the following:

  • Blockland
  • That game where you build stuff.

This does not look good because your bullet points are still located to the left, and your text is far away to the center.  So instead, use a table.  Tables break formatting outside.  The inside of a table cell is treated as a different environment.  So when you do [center][td][list][li]Blockland[/li][li]That game where you build stuff.[/li][/list][/td][/center], you get the following:

  • Blockland
  • That game where you build stuff.

Now everything is fixed!  Note, however, that although I only used the td tag, it is better to surround them with the appropriate row and table body tags.  Doing so is good practice and prevents your code from being broken.

But that's not all!  Lists can also be nested.

[list]
[li]Blockland[/li]
[li]That game where you[list]
[li]build[/li]
[li]stuff[/li]
[/list][/li]
[/list]

  • Blockland
  • That game where you
    • build
    • stuff

Nesting can occur as many times as you want to, or as much as the page will allow.

Change Text Color  (Dropdown with "Change Color" on it)
Changes the color of text.  Note, in the first example, you can choose from the list of colors in the dropdown menu to get a pre-defined color.  In the second example, you can enter a Hexadecimal Color Code, or simply hex code, to get a specific color.  In the third example, you can use a three-digit color code to get a specific color, which works like hex codes, except it assumes each value is followed by a zero, so #E52 would be also read as #E05020.

[color=red]Blockland[/color] or [color=#538996]Blockland[/color] or [color=#C74]Blockland[/color]

Blockland or Blockland or Blockland

Additionally, you can make text transparent, which works on some platforms to create spoilers.  Do "[color=transparent]Wow, cool spoilers![/color]"

"Wow, cool spoilers!"

Quotation marks used only to display that text is there.  It is not in any way necessary to the formatting of transparent color tags.

Create Internal Hyperlink
Creates a clickable URL link that does not open another tab or window, but opens the url within the same window.

[iurl]https://forum.blockland.us/index.php[/iurl] or [iurl=https://forum.blockland.us/index.php]Blockland Forum[/iurl]

https://forum.blockland.us/index.php or Blockland Forum

Anchors
Creates an anchor within the page that can be referred to by a url or an iurl link.  Note: Anchors cannot contain spaces, use underscores instead.

[anchor=testanchor]Test Anchor Here

Wanna test it?  Click [iurl=#testanchor]here[/iurl].

Test Anchor Here

Wanna test it?  Click here.

Note that if you place an iurl tag like iurl=# followed by the tag name, it can only work if you are on the same page as the anchor.  If you want to refer to the anchor from a different page, click whatever link will lead you to the anchor and copy the address in your url bar.

Hover Text/Abbreviations
Makes text appear over an area when you hover your mouse over it.  Note that formatting, line breaks, and tabbed spacing will not work within hidden text.

[abbr=That game where you make stuff.]Blockland[/abbr]

Blockland

User Actions
Performs an action as you (can be modified to something else).

/me performs an action.

* SWAT One performs an action.

This transforms into [me=SWAT One]performs an action.[/me], which you then can manipulate to [me=Badspot]performs an action.[/me].

* Badspot performs an action.

No BBCode
Ever wondered how I was making tags not parse in this post?  This is how.

[nobbc][b]Blockland[/b][/nobbc]

[b]Blockland[/b]



If you have any questions or contributions, please let me know so I can add it to the OP or address it in a reply below.
« Last Edit: August 31, 2016, 05:54:54 AM by SWAT One »

~reserved~
jk but in all seriousness i never knew some of these
i remember when i did that abbreviation wrong and looked like an idiot

Wow! A very good guide! I can use tables now, and other stuff too! Thanks for writing this up!

You should also include that you can use 'height' and/or 'width' with the image tags


I thought I wouldn't need this thread since I thought I already knew them all but those tags I never really knew about seem really useful. Thank you OP! But this might have to be moved to O.T, I'm not sure.

You should also include that you can use 'height' and/or 'width' with the image tags
Can't believe I forgot about that.  Thanks for reminding me!

I thought I wouldn't need this thread since I thought I already knew them all but those tags I never really knew about seem really useful. Thank you OP! But this might have to be moved to O.T, I'm not sure.
You're welcome!  Yeah, typically these threads belong in OT, but first-time users tend to visit General Discussion first.  It's kind of a hub for anything Blockland, so putting a helpful "How to use the Forum" guide would fit well here.

I may be doing guides on how to use the Forum.



Although I work with BBCode a lot, some examples of where I've used it can be found in Forum Games, where even though the information I need to give would surpass the character limit, organizing the information in a smart way helps users navigate the topic better.

https://forum.blockland.us/index.php?topic=267621.0 (Look at the first and second reply posts)
https://forum.blockland.us/index.php?topic=292200.0
https://forum.blockland.us/index.php?topic=294362.0 (While the heading alert was melodramatic, I a lot of work went into this header)


Added User Actions, or /me, AKA [me=""] tags.


Good work on the guide, maybe it will get stickied.

Include a part about how you can use the transparent color to hide spoilers

spoiler: snape kills dumbledore

Good work on the guide, maybe it will get stickied.

Include a part about how you can use the transparent color to hide spoilers
Woops, forgot.

Thanks, will do!
Done!
« Last Edit: August 31, 2016, 04:53:38 AM by SWAT One »

True Type Font 
Converts the text to TrueType format.

[tt]Blockland[/tt]

Blockland

This definitely isn't right. If anything, all the text is already TrueType. I'm pretty sure tt stands for something like 'typewriter text'.

This definitely isn't right. If anything, all the text is already TrueType. I'm pretty sure tt stands for something like 'typewriter text'.
The image name is tele.gif so I don't know.  I'll change it to what you said unless I get a definitive source on it.