Tutorial: BBCodes

Any questions and concerns regarding the forum may be brought to our attention here.

Tutorial: BBCodes

PostPosted by Natsu » Mon Dec 01, 2014 9:04 am

Welcome to my very first tutorial ever made in this place, because in fact I made various in other places. I've been navigating through various threads now and I saw some people have trouble getting used to NSMBX's BBCodes, so I decided to take me time to write a full tutorial regarding how they all work. I actually came with this idea after seeing both Wohlstand trying to post a video and several projects that use manual progress bars or mere numbers, so if you're just not planning to use some of these because you're lazy or whatever feel free to don't do so, not like I have the right to force you anyway.

NOTE: Those who are experienced on the use of forums may know this, though if you're new be aware that the BBCodes only show on the "Full Editor" page, otherwise you'll have to type them manually.

B - Bold:
The B code is to make certain words appear bold.
Code: Select all
[b]text[/b]

i - italics:
The i code is to make certain words italic.
Code: Select all
[i]text[/i]

u - underlined:
The u is to underline certain words.
Code: Select all
[u]text[/u]

Quote:
The "Quote" code serves the purpose of quoting certain phrases. It is also automatically used whenever you click the "Quote" button on a certain post made by someone else.
Code: Select all
[quote]text[/quote]

Adding the following will add to the quote the words " 'name' said:" in the beginning.
Code: Select all
[quote="name"]text[/quote]

Code:
The "Code" code functions the same way as the "Quote" code, although it doesn't have the function of altering it. By default everything that is typed on it appears on Arial green and all other codes display as text.
Code: Select all
[code][/code]

List:
The "List" code can be used to list several phrases or paragraphs of importance. In order to put several phrases on different lines press enter and keep typing.
Code: Select all
[list]text1
text2[/list]

You can also choose a symbol or any other digit to appear before the phrase or paragraph to make it look nicer.
    Some examples:
    The following:
    Code: Select all
    [list]
    [*]text1
    [*]text2
    [*]text3[/list]
    shall display as:
    • text1
    • text2
    • text3

    The following:
    Code: Select all
    [list=a]
    [*]text1
    [*]text2
    [*]text3[/list]
    shall display as:
    1. text1
    2. text2
    3. text3

    The following:
    Code: Select all
    [list=1]
    [*]text1
    [*]text2
    [*]text3[/list]
    shall display as:
    1. text1
    2. text2
    3. text3

NOTE: Depending on which number/letter you type in the list shall start on that letter and go on.

*:
The "*" code is used as a marker. What it displays varies on how it is used. A good example being the former where I have explained the use of the list.

Img - Image:
The "Img" code is used to display an image. Said image has to be uploaded using an image hosting site such as http://www.imgur.com or http://www.photobucket.com.
Code: Select all
[img]goo.gl/wFiSDi[/img]

URL - Uniform Resource Locator:
The "URL" code serves the purpose of serving as a link activator.
Code: Select all
[url]www.google.com[/url]

It can also convert some words into links to other sites.
Code: Select all
[url=www.google.com]goToGoogle[/url]

flash:
The "flash" code is used for animations made on Flash Professional CC and beyond. It sometimes depends on the forum allowing the use of this particular BBCode or not.
Code: Select all
[flash=width,height]SWF Extension File[/flash]

Font size:
The way the following code works is rather simple. Once selected a certain line or paragraph, or even a word you can use it to change the font size of the selected object. You can also select none to add the code to change the size of your desired object upon the typer's position.

Download & Download2:
These two BBCodes are particular codes of this forum but it basically follows the same format as any other download BBCode everywhere else. Any link pasted between the code shall be what you'll be directed to upon clicking the image any of these BBCodes display.
Code: Select all
[Download]goo.gl/dmO2ck[/Download]
Code: Select all
[Download2]goo.gl/dmO2ck[/Download2]

background:
The "background" code is used to set a certain background colour in the back of certain lines. A good example of this code being used can be seen in the forum rules thread.
Code: Select all
[background=#FF8000]text[/background]

center:
The "center" code is used to centre certain lines when viewed on a post.
Code: Select all
[center]text[/center]

colorslide:
The "colorslide" code is used to display a certain line or text which is displayed with a certain colour and it later on changes to another colour sliding from left to right.
Code: Select all
[colorslide=incrediblyLargeTextUsedForThisSpecificCode]initialColour,lastColour,time (miliseconds)[/colorslide]

font:
The "font" code is used to display certain blocks of texts or specific words on a different font. The amount of fonts at the userbase disposal depends on those installed by the forum founder.
Code: Select all
[font=Cambria]Hello folks![/font]

hr:
The "hr" code is used to display an horizontal line that separates two spaces used for any kind of means. It basically replaces SMBX.org's "line" code.
Code: Select all
[hr][/hr]

NOTE: Even though that it looks like text or image can be put inside based on the notation structure it is not possible.

link2:
The "link2" code functions the same way as the URL, though an interesting difference is that instead of using it for random text you can actually make a button that takes you to a certain site upon clicking it.
Code: Select all
[link2]text,site[/link2]

prog - Progress Bar:
The "prog" code is used to generate a progress bar. It can be used to mark an SMBX project's progress or a certain world's progress.
Code: Select all
[prog=percentage]description[/prog]

right:
The "right" code aligns blocks of texts to the right. Functions the same way as the "center" code.
Code: Select all
[right]text[/right]

scroll:
The "scroll" code is used to generate a block to write a block of text.
Code: Select all
[scroll]blockOfText[/scroll]

spoiler:
The "spoiler" code is used to place all kinds of stuff within it. The spoiler won't display what's inside unless clicked.
Code: Select all
[spoiler]text&image[/spoiler]
You can also add a title to the spoiler.
Code: Select all
[spoiler="title"]text&image[/spoiler]

youtube:
The "youtube" code is used to display YouTube videos. In order to display them correctly the video's URL code has to be pasted within the code instead of the whole URL.
Code: Select all
[youtube]urlCode[/youtube]
E.G: The following:
Code: Select all
[youtube]a1Y73sPHKxw[/youtube]
displays as:
video:


ymusic - YouTube Music:
The "ymusic" code displays a sound-only player for YouTube videos. It is helpful when the author of a thread or a poster wants to post a music video and save the time of waiting for the video to show.
Code: Select all
[ymusic]a1Y73sPHKxw[/ymusic]


Font colour:
The "Font colour" functions in a similar way to the "Font size" and is easily used based upon the same system. Select object, click and let the job be done by itself.

I hope this tutorial helped you know more about the use of BBCodes better. If there are any questions referred to this tutorial that you would like to know be sure to post them below.
Deleting a post doesn't delete an action,
if you did something wrong it shall remain as something you did wrong.
This also applies to sheets of paper, if you wrinkle them,
they won’t go back to it’s previous state no matter what you do.
While that is reality, you can compensate it being better,
not everything is lost, nothing is lost to begin with.
Do everything you can to become a better user, it’s not too late!
User avatar
Natsu
Amazing Flying Hammer Bro.
Amazing Flying Hammer Bro.
 
Posts: 4197
Joined: Mon Aug 27, 2012 5:02 pm
Location: Uruguay

Re: Tutorial: BBCodes

PostPosted by Kyo » Mon Dec 01, 2014 11:30 am

Magnificent tutorial. But I'm pretty sure you mean bold and not blond. =P
User avatar
Kyo
Wiggler
Wiggler
 
Posts: 2127
Joined: Fri Apr 13, 2012 3:20 am

Re: Tutorial: BBCodes

PostPosted by Natsu » Mon Dec 01, 2014 11:34 am

Kyo wrote:Magnificent tutorial.

Why thank you.
Kyo wrote:But I'm pretty sure you mean bold and not blond. =P

SPOILER:
Image
Deleting a post doesn't delete an action,
if you did something wrong it shall remain as something you did wrong.
This also applies to sheets of paper, if you wrinkle them,
they won’t go back to it’s previous state no matter what you do.
While that is reality, you can compensate it being better,
not everything is lost, nothing is lost to begin with.
Do everything you can to become a better user, it’s not too late!
User avatar
Natsu
Amazing Flying Hammer Bro.
Amazing Flying Hammer Bro.
 
Posts: 4197
Joined: Mon Aug 27, 2012 5:02 pm
Location: Uruguay

Re: Tutorial: BBCodes

PostPosted by Mystogan » Mon Dec 01, 2014 11:38 am

Looks good. However is this really needed? Since it gives a discription of them when you hover them. Unless you added hidden ones? Either way, some of these I rather use html for, like the horizontal line.
</hr>
I'm sure it'll be helpful to newbies. :)
Image
User avatar
Mystogan
Dolphin
Dolphin
 
Posts: 1089
Joined: Fri Nov 14, 2014 10:10 am
Location: Canada
Current Project: Super Metroid: ______

Re: Tutorial: BBCodes

PostPosted by Natsu » Mon Dec 01, 2014 11:39 am

That's the point, to help those that are new to forums or just don't get the hang of certain BBCodes. Besides, some descriptions are also difficult to understand at times, that's why I made this tutorial.
Deleting a post doesn't delete an action,
if you did something wrong it shall remain as something you did wrong.
This also applies to sheets of paper, if you wrinkle them,
they won’t go back to it’s previous state no matter what you do.
While that is reality, you can compensate it being better,
not everything is lost, nothing is lost to begin with.
Do everything you can to become a better user, it’s not too late!
User avatar
Natsu
Amazing Flying Hammer Bro.
Amazing Flying Hammer Bro.
 
Posts: 4197
Joined: Mon Aug 27, 2012 5:02 pm
Location: Uruguay

Re: Tutorial: BBCodes

PostPosted by Mystogan » Mon Dec 01, 2014 11:45 am

Natsu wrote:That's the point, to help those that are new to forums or just don't get the hang of certain BBCodes. Besides, some descriptions are also difficult to understand at times, that's why I made this tutorial.

Yeah. And if you're wondering, html doesnt seem to work on prophpbb forums, so :P
Image
User avatar
Mystogan
Dolphin
Dolphin
 
Posts: 1089
Joined: Fri Nov 14, 2014 10:10 am
Location: Canada
Current Project: Super Metroid: ______

Re: Tutorial: BBCodes

PostPosted by Natsu » Mon Dec 01, 2014 12:07 pm

I know, so?
Deleting a post doesn't delete an action,
if you did something wrong it shall remain as something you did wrong.
This also applies to sheets of paper, if you wrinkle them,
they won’t go back to it’s previous state no matter what you do.
While that is reality, you can compensate it being better,
not everything is lost, nothing is lost to begin with.
Do everything you can to become a better user, it’s not too late!
User avatar
Natsu
Amazing Flying Hammer Bro.
Amazing Flying Hammer Bro.
 
Posts: 4197
Joined: Mon Aug 27, 2012 5:02 pm
Location: Uruguay

Re: Tutorial: BBCodes

PostPosted by Mystogan » Mon Dec 01, 2014 12:57 pm

Natsu wrote:I know, so?

So thats why it didnt work.
Image
User avatar
Mystogan
Dolphin
Dolphin
 
Posts: 1089
Joined: Fri Nov 14, 2014 10:10 am
Location: Canada
Current Project: Super Metroid: ______

Re: Tutorial: BBCodes

PostPosted by Natsu » Mon Dec 01, 2014 1:05 pm

They should work. I tried all examples myself.
Deleting a post doesn't delete an action,
if you did something wrong it shall remain as something you did wrong.
This also applies to sheets of paper, if you wrinkle them,
they won’t go back to it’s previous state no matter what you do.
While that is reality, you can compensate it being better,
not everything is lost, nothing is lost to begin with.
Do everything you can to become a better user, it’s not too late!
User avatar
Natsu
Amazing Flying Hammer Bro.
Amazing Flying Hammer Bro.
 
Posts: 4197
Joined: Mon Aug 27, 2012 5:02 pm
Location: Uruguay

Re: Tutorial: BBCodes

PostPosted by Mystogan » Mon Dec 01, 2014 1:24 pm

Natsu wrote:They should work. I tried all examples myself.
I was referring to the html. I know bbcodes work, but html isnt supported in posting.
Image
User avatar
Mystogan
Dolphin
Dolphin
 
Posts: 1089
Joined: Fri Nov 14, 2014 10:10 am
Location: Canada
Current Project: Super Metroid: ______


Return to Forum Discussion

Who is online

Users browsing this forum: No registered users and 0 guests