Loading...

BBcode guide

A guide for all new and old players. This forum contains a FAQ, Creation Guide, and lots more.
If you see anything missing, wrong or want to include something in it, please message any administrator.
User avatar
Ninpocho Admin
Wanderer
Wanderer
Cash on hand: Locked
Posts: 1882
Joined: Tue Jan 15, 2013 9:02 pm

BBcode guide

Thu Jan 18, 2018 10:56 pm


BBcode GUIDE FOR ALL
Hey everyone, let's talk quickly about BBcode, what is it? How does it work? And what are the protocols with it?
I'll be frank, if you're on a phpbb, or most bulletin boards, you probably know bbcode fairly well. But for you newcomers and newbies in the bulletin board world, let me try and break it down.
BBcode is what's professionally called a "markup language" which is a fancy way of saying it's an effect placement code. By giving a piece of text or url bbcode, you're telling the browser how it should render the text. So when you put in the following bbcode in your text:

Code: Select all

[b]hello world![/b]
You're telling the browsers of everyone looking to render the specified text as being BOLD
This same goes for the majority of all our bbcode. include bold, itallic, underlined, quotes, code, list, img, urls, font colors, strikethrough, collumns, font size, justify, alignments, spoilers, etc. etc.
All it's doing is telling the browser how to render the information you put into it. Does it link to an image? Tell the browser it's supposed to place the image, is it a url to a site? Tell the browser it's supposed to be a link. That's essentially all it boils down to.
bbcode wrote:Fun fact "bbcode" stands for "Bulletin Board Code"
But how do I use it?

It's fairly straightforward, and once you've mastered it, I can assure you, you'll have it way easier to learn other programming languages, like HTML, CSS, Javascript, etc. While bbcode is nowhere as difficult advanced or problematic as any of these, it still helps you establish a grasp of one of the core principles in the syntax (language of a code) which is as follows.
Standard code always an opening. And a closing tag.
What are the opening and closing tags? When you're writing a reply. Try selecting bits of text, and click the bolded B at the top of your reply field. This adds the code at the start and end of your selected text. If you just press the B it'll add both tags without text in the middle of it. It is a fascinatingly simple approach to coding and markup languages by itself.

Code: Select all

[u][b]Hello world![/b][/u]
[url=https://www.phpbb.com/]I love bbcode![/url]
[img]https://i.imgur.com/zf6APfS.png[/img]
Tip for quick bbcode wrote:as a shortcut try holding Alt + a key on your keyboard with text selected.

Code: Select all

alt + b = bold
alt + i = italized
alt + u = underlined
alt + p = image
alt + L = list
alt + o = list=
alt + y = adds the * marker for lists.
alt + w = url
alt + q = quote
alt + c = code block
alt + s = post/submit
alt + x = quick logout (this works on the whole forum!)
alt + k = Saves your post as a draft
No exceptions! .. However..

All BBcodes has an opening and closing tags. However! Not all has selections of text, or requires specific types of text to make it work properly. Examples like this, includes the fractions code, that makes numbers into fractions as in math, but requires a comma in between (see example A.1) [fraction]3 , 5[/fraction] Another example could be the hr code which simple takes the hr html code with the same name and places it. No text or numbers or anything should be inbetween it, otherwise it doesn't work at all. (see example A.2) Another example that only requires numbers by themselves to function, would be the indent bbcode. This code simple places a set sized margin on the left side making it appear in the text as if it has an indent. This number can essentially be any number, which is what makes it a very creative tool for your text. (see example A.3) Another great and (possibly) overused bbcode that I personally enjoy, and has been used on numerous occasions in this guide is our column code. This code comes in two variants, one has 2 columns, and the other has 3 columns. and it's as simple as using the none-L line as a separator. The problem with me trying to explain it, is that as soon as I place it anywhere within the bbcode the code will think it's a part of the code. So I'll try and explain it in more detail in the code block. (see example A.4) As a final Exception to classic BBcode is the youtube code we have. This is sometimes placed in the signature (requires donator medal!), or in posts to give the reader the opportunity to listen to music, or see a referencial video. Anything of that sort. The way it works is fairly straight forward but usually always requires good ol' fashioned testing. First you open with the youtube tag, then you write the last bits of the url to the video (after the last = symbol) Image Then you add a single line vertical line symbol | then you write the height in pixels, then another | and then finally the width. (see example A.6)

Code: Select all

Example A.1:
[fraction]3 , 5[/fraction]
Basically makes two <sup> tags for each number and replacing the comma with a forward slash.

Example A.2:
[hr][/hr]
Creates a line like if you were writing <hr />

Example A.3:
[indent]10[/indent] 
Makes a left margin at the specified number of pixels.

Code: Select all

Example A.4:
[col]text|text[/col] OR [col3]text|text|text[/col3]
<As perfect an example, you can see that it renders the | symbol as a separator between each column.>

Example A.5:
[size=100]text[/size] and [fontsize="13"]text[/fontsize]

Example A.6:
[youtube]G30xZxJLR8U|250|500[/youtube]
Always specify, always detail!

For the most part BBcode isn't case sensitive, but when it comes to specific bbcode, like the ones previously mentioned will require specific numbers, or specific case-sensitive letters. so take notice of this and consider it in your troubleshooting if you're trying to build something unique. Some few fun details I wish to give you regarding bbcoding is that sometimes a relic from old bbcode might move with us from earlier versions of the site, which gives a unique look into the changes bbcode has gone through. As an example on NC, we have TWO different codes to change the size of the text, and it's fairly personal which you prefer. The only differences of them are the maximum and minimum size changes they provide. One goes from 100 as the base, and goes all the way down to 10. And all the way up to 200. Where-as the other has strangely enough 13 as it's base. But goes all the way down to 1 and to 5000+ (although I do not advise anyone to use anything above 200.) one needs quotation marks to tell it what the number specifications are, and the other doesn't. (An example for these specifics can be seen above in Example A.5)
That quotation mark is what I'm specifically referring to when I say always detail you have to be aware that sometimes a specific bbcode needs quotation marks, others don't. Some needs & symbols, some don't. It can be dreadfully complicated to remember every little detail of all the unique little different bbcodes we have on the site. But never be afraid to ask on Discord or contact an admin. As we are all fairly proficient with this wondrous and powerful forum tool.
Tailored for specialized need

On this site we have some really neat and specialised bbcode that are commonly used in profiles, training or dojo threads. In rare cases you might use them for posts where-in the need might arise, say if you're modding a fight, or you're modding a mission and you need information delivered in a specific way. These BBcodes are not meant to be thrown out and about all willy nilly, so do take that into consideration. Neither does these bbcode have any shortcuts as they were custom and added individually by the administration team.
First example is the divbox. Now there exists two different divbox codes, first has a 1 pixel wide border, and the other doesn't. The purpose of this bbcode is to provide you with the ability to give all of your specified text a background of a specific colour. (and/or a border to separate it from the rest of the site's color if desired.) (see example B.1)
Another one I'll happily provide you assistance with is the tabs bbcode. This one's a bit of a doozy, so stay with me on this. This provides a little menu with tabs, within each tab you have full control of the content and you can write anything within in, and you can add more bbcode inside it. (But be warned, avoid making tabs within tabs!) To make one, it's fairly simple. You start with the tabs code opening. This tells the bbcode to start looking for other tabs within it) Then you start with the tab= code, (notice the lack of the s and the addition of the equals mark =) After the equals mark, write your tab title! This new bbcode basically renders a tab in which you put your content. (profile details, inventory, personality, etc.) Remember to close the tab= code at every tab so they don't overlap! (see example B.2)
The final example is both the most complicated, and yet also the most easy to create. It's our lovely "table" code found at the top of your posting page. It should be a gray box with a box inside of it. Should standout quite a bit. If you press it, a menu opens where you decide on how many columns and rows your table should have. This code is most often used in profiles, training and by battle moderators. You simply replace the "text" fields. (ensure that all [] brackets are present!) Next you can decide fully on your own, if you wish to have a table header, if not, you can remove the thead tag. Those numbers inside of the td and th can also be adjusted to enable 1 row to full up both columns, or customize the width of each column.
(see 1 example B.3 Otherwise click on Show table guidelines above the menu opened by the button.)

Code: Select all

Example B.1:
With border: [divbox=#000000]text[/divbox]
Without border: [divboxnb=#000000]text[/divboxnb]
borders without background colors: [divbox=nb]text[divbox]
<Both examples above provides a black background. The border is a 1px black border (please note on the light forum theme, the text is black, and the text is white on the darker theme. So generally avoid too dark or too light colors.)>

Example B.2:
[tabs][tab=battle details]<insert stats here>[/tab][tab=pictures]<insert images here>[/tab][/tabs]
<This creates a simple tab menu with the titles "battle details" and "pictures">

Code: Select all

Example B.3:
<The following is a markup for a table with a title, a header of 2x rows, and then 1x row of 2x tables.>
[size=130]Table Title[/size]
[table=30,null]
	[thead]
		[tr=textleft]
			[th=50,null]Title1[/th]
			[th=50,null]Title2[/th]
		[/tr]
	[/thead]
	[tbody]
		[tr=bg2]
			[td=null,1]Text1[/td]
			[td=null,1]Text2[/td]
		[/tr]
	[/tbody]
[/table]

Example B.4:
[quote="My First Website!"][b]Hello [u]internet![/u]
<MISSING closing tag!>

Code: Select all

Example B.5:
[spoiler][quote][quote][spoiler]
[/spoiler][/quote][/quote][/spoiler]
<notice that there are double quotes, within a spoiler and then a spoiler within those two quotes. Most likely this will not work! Don't do it!>

Example B.6:
[spoiler][quote]
[/spoiler][/quote]
<Notice that that the quote tag ends outside of the spoiler! This would render the code incapable to work properly>
IMPORTANT NOTE ON TABLES wrote:Tables will not render your linebreaks!
In order to add linebreaks. Please use a combining of lb, lb2, and lb3 they all work differently, so experiment your way.

Code: Select all

[lb][/lb] is added inbetween your lines to add a small <div> with 1px high. (looks like a regular linebreak.
[lb2][/lb2] like lb1, but makes a div at 12px instead of 1px
Troubleshooting!

So, now that you know the basics, let me get down to some fundamental troubleshooting of your bbcode. The most common problem everyone experiencing at some point is the not closing their tags properly. (see Example B.4) I.e Having the both of you opening and the closing tags in the code for EACH of them. Nesting code within code can be a risky move. Like say, placing a quote within a quote. Or placing a quote within a spoiler. Take note, I am not saying it's impossible. But you risk it breaking, especially if you go beyond a certain point of tags. That specific point is sometimes unsure, but as a general rule, only try to do it once. (see example B.5) Similar to nesting, it's important to take note of your coding order. As in, if you have a spoiler, and a quote, if open the quote tag within the spoiler, you also must close the quote tag within the spoiler! This includes the majority of all bbcode tags. So make sure you close them properly and in the correct place. (see Example B.6) An issue we have seen a few times on NC is that someone messed up their bbcode, and suddenly all subsequent posts underneath the post with the error (worse is if it's in the individual's signature) made them look weird, messed up somehow. The culprit has usually always been a misplaced closing/opening tag, or a too-deep nested tag. So please be aware of these kinds of issues. And double check your code always.
Image
User avatar
Santaru Yoshi
Site Founder
Site Founder
Head Admin
Cloud Jounin
Cash on hand: Locked
Bank: Locked
Location: Kumogakure
Posts: 4874
Joined: Thu Oct 25, 2012 2:29 am
Donater
Event

Re: BBcode guide

Mon Feb 05, 2018 10:10 am

Below I have attached the whole above post in the code bbcode. In order to allow you all to see and analyze how I made it.
Note that I used a td=null,2 (not td=null,1) and removed the second td tag underneath, in order to make one row fill up all the whole row.

Code: Select all

[center][anchor=index]index[/anchor]
[goto=howto]How to use[/goto] - [goto=except]Exceptions[/goto] -  [goto=spec]Specifics[/goto] - [goto=needs]Specialised needs[/goto] - [goto=trouble]Troubleshooting[/goto][/center]


[color=#800000][b][fontsize="20"]BBcode GUIDE FOR ALL[/fontsize][/b][/color]
[table=100,null]
	[tbody]
		[tr=bg2]
			[td=null,1]Hey everyone, let's talk quickly about BBcode, what is it? How does it work? And what are the protocols with it? 
I'll be frank, if you're on a phpbb, or most bulletin boards, you probably know bbcode fairly well. But for you newcomers and newbies in the bulletin board world, let me try and break it down.

BBcode is what's professionally called a "markup language" which is a fancy way of saying it's an effect placement code. By giving a piece of text or url bbcode, you're telling the browser how it should render the text. So when you put in the following bbcode in your text:
[-code][b]hello world![/b][/-code][/td]
			[td=null,1]You're telling the browsers of everyone looking to render the specified text as being [b]BOLD[/b]
This same goes for the majority of all our bbcode. include bold, itallic, underlined, quotes, code, list, img, urls, font colors, strikethrough, collumns, font size, justify, alignments, spoilers, etc. etc.
All it's doing is telling the browser how to render the information you put into it. Does it link to an image? Tell the browser it's supposed to place the image, is it a url to a site? Tell the browser it's supposed to be a link. That's essentially all it boils down to.
[quote="bbcode"]Fun fact "bbcode" stands for "Bulletin Board Code"[/quote][/td]
		[/tr]
		[tr=bg1]
			[td=null,1][anchor=howto] [/anchor][color=#800000][b][fontsize="20"]But how do I use it?[/fontsize][/b][/color]
It's fairly straightforward, and once you've mastered it, I can assure you, you'll have it way easier to learn other programming languages, like HTML, CSS, Javascript, etc. While bbcode is [u]nowhere[/u] as difficult advanced or problematic as any of these, it still helps you establish a grasp of one of the core principles in the syntax (language of a code) which is as follows.
Standard code [u]always[/u] an opening. And a closing tag.
What are the opening and closing tags? When you're writing a reply. Try selecting bits of text, and click the bolded [b]B[/b] at the top of your reply field. This adds the code at the start and end of your selected text. If you just press the [b]B[/b] it'll add both tags without text in the middle of it. It is a fascinatingly simple approach to coding and markup languages by itself.

[-code][u][b]Hello world![/b][/u]
[url=https://www.phpbb.com/]I love bbcode![/url]
[img]https://i.imgur.com/zf6APfS.png[/img][-/code][/td]
			[td=null,1][quote="Tip for quick bbcode"]as a shortcut try holding Alt + a key on your keyboard with text selected.
[-code]alt + b = bold
alt + i = italized
alt + u = underlined
alt + p = image
alt + L = list
alt + o = list=
alt + y = adds the * marker for lists.
alt + w = url
alt + q = quote
alt + c = code block
alt + s = post/submit
alt + x = quick logout (this works on the whole forum!)
alt + k = Saves your post as a draft
[-/code][/quote][/td]
		[/tr]
		[tr=bg2]
			[td=null,2][anchor=except] [/anchor][color=#800000][b][fontsize="20"]No exceptions! .. However..[/fontsize][/b][/color]
[b]All BBcodes has an opening and closing tags.[/b] However! Not all has selections of text, or requires specific types of text to make it work properly. Examples like this, includes the fractions code, that makes numbers into fractions as in math, but requires a comma in between (see example A.1) [fraction]3 , 5[/fraction] Another example could be the [u]hr[/u] code which simple takes the hr html code with the same name and places it. No text or numbers or anything should be inbetween it, otherwise it doesn't work at all. (see example A.2) Another example that [b]only[/b] requires numbers by themselves to function, would be the indent bbcode. This code simple places a set sized margin on the left side making it appear in the text as if it has an indent. This number can essentially be any number, which is what makes it a very creative tool for your text. (see example A.3) Another great and (possibly) overused bbcode that I personally enjoy, and has been used on numerous occasions in this guide is our column code. This code comes in two variants, one has 2 columns, and the other has 3 columns. and it's as simple as using the none-L line as a separator. The problem with me trying to explain it, is that as soon as I place it anywhere within the bbcode the code will think it's a part of the code. So I'll try and explain it in more detail in the code block. (see example A.4) As a final Exception to classic BBcode is the [b]youtube[/b] code we have. This is sometimes placed in the signature (requires donator medal!), or in posts to give the reader the opportunity to listen to music, or see a referencial video. Anything of that sort. The way it works is fairly straight forward but usually always requires good ol' fashioned testing. First you open with the youtube tag, then you write the last bits of the url to the video (after the last = symbol) [img]https://i.gyazo.com/d49e40902220786228c690182f6c7590.png[/img] Then you add a single line vertical line symbol [b]|[/b] then you write the height in pixels, then another [b]|[/b] and then finally the width. (see example A.6)
[/td]
		[/tr]
		[tr=bg1]
			[td=null,1][-code]
Example A.1:
[fraction]3 , 5[/fraction]
Basically makes two <sup> tags for each number and replacing the comma with a forward slash.

Example A.2:
[hr][/hr]
Creates a line like if you were writing <hr />

Example A.3:
[indent]10[/indent] 
Makes a left margin at the specified number of pixels.
[-/code][/td]
			[td=null,1][-code]Example A.4:
[col]text|text[/col] OR [col3]text|text|text[/col3]
<As perfect an example, you can see that it renders the | symbol as a separator between each column.>

Example A.5:
[size=100]text[/size] and [fontsize="13"]text[/fontsize]

Example A.6:
[youtube]G30xZxJLR8U|250|500[/youtube][/-code][/td]
		[/tr]
		[tr=bg2]
			[td=null,2][anchor=spec] [/anchor] [color=#800000][b][fontsize="20"]Always specify, always detail![/fontsize][/b][/color]
For the most part BBcode isn't case sensitive, but when it comes to specific bbcode, like the ones previously mentioned will require specific numbers, or specific case-sensitive letters. so take notice of this and consider it in your troubleshooting if you're trying to build something unique. Some few fun details I wish to give you regarding bbcoding is that sometimes a relic from old bbcode might move with us from earlier versions of the site, which gives a unique look into the changes bbcode has gone through. As an example on NC, we have [b]TWO[/b] different codes to change the size of the text, and it's fairly personal which you prefer. The only differences of them are the maximum and minimum size changes they provide. One goes from 100 as the base, and goes all the way down to 10. And all the way up to 200. Where-as the other has strangely enough 13 as it's base. But goes all the way down to 1 and to 5000+ (although I do not advise [i]anyone[/i] to use anything above 200.) one needs quotation marks to tell it what the number specifications are, and the other doesn't. (An example for these specifics can be seen above in Example A.5)
That quotation mark is what I'm specifically referring to when I say always [i]detail[/i] you have to be aware that sometimes a specific bbcode needs quotation marks, others don't. Some needs & symbols, some don't. It can be dreadfully complicated to remember every little detail of all the unique little different bbcodes we have on the site. But never be afraid to ask  on Discord or contact an admin. As we are all fairly proficient with this wondrous and powerful forum tool.[/td]
		[/tr]
		[tr=bg1]
			[td=null,1][anchor=needs] [/anchor][color=#800000][b][fontsize="20"]Tailored for specialized need[/fontsize][/b][/color]
On this site we have some really neat and specialised bbcode that are commonly used in profiles, training or dojo threads. In rare cases you might use them for posts where-in the need might arise, say if you're modding a fight, or you're modding a mission and you need information delivered in a specific way. These BBcodes are not meant to be thrown out and about all willy nilly, so do take that into consideration. Neither does these bbcode have any shortcuts as they were custom and added individually by the administration team.
First example is the divbox. Now there exists two different divbox codes, first has a 1 pixel wide border, and the other doesn't. The purpose of this bbcode is to provide you with the ability to give all of your specified text a background of a specific colour. (and/or a border to separate it from the rest of the site's color if desired.) (see example B.1)

Another one I'll happily provide you assistance with is the tabs bbcode. This one's a bit of a doozy, so stay with me on this. This provides a little menu with tabs, within each tab you have full control of the content and you can write anything within in, and you can add more bbcode inside it. (But be warned, avoid making tabs within tabs!) To make one, it's fairly simple. You start with the tabs code opening. This tells the bbcode to start looking for other tabs within it) Then you start with the tab= code, (notice the lack of the [b]s[/b] and the addition of the equals mark =) After the equals mark, write your tab title! This new bbcode basically renders a tab in which you put your content. (profile details, inventory, personality, etc.) Remember to close the tab= code at every tab so they don't overlap! (see example B.2)

The final example is both the most complicated, and yet also the most easy to create. It's our lovely "table" code found at the top of your posting page. It should be a gray box with a box inside of it. Should standout quite a bit. If you press it, a menu opens where you decide on how many columns and rows your table should have. This code is most often used in profiles, training and by battle moderators. You simply replace the "text" fields. (ensure that all [] brackets are present!) Next you can decide fully on your own, if you wish to have a table header, if not, you can remove the [b]thead[/b] tag. Those numbers inside of the [b]td[/b] and [b]th[/b] can also be adjusted to enable 1 row to full up both columns, or customize the width of each column.
(see 1 example B.3 Otherwise click on [b]Show table guidelines[/b] above the menu opened by the button.)
[/td]
			[td=null,1][-code]Example B.1:
With border: [divbox=#000000]text[/divbox]
Without border: [divboxnb=#000000]text[/divboxnb]
borders without background colors: [divbox=nb]text[divbox]
<Both examples above provides a black background. The border is a 1px black border (please note on the light forum theme, the text is black, and the text is white on the darker theme. So generally avoid too dark or too light colors.)>

Example B.2:
[tabs][tab=battle details]<insert stats here>[/tab][tab=pictures]<insert images here>[/tab][/tabs]
<This creates a simple tab menu with the titles "battle details" and "pictures">[-/code][-code]Example B.3:
<The following is a markup for a table with a title, a header of 2x rows, and then 1x row of 2x tables.>
[size=130]Table Title[/size]
[table=30,null]
	[thead]
		[tr=textleft]
			[th=50,null]Title1[/th]
			[th=50,null]Title2[/th]
		[/tr]
	[/thead]
	[tbody]
		[tr=bg2]
			[td=null,1]Text1[/td]
			[td=null,1]Text2[/td]
		[/tr]
	[/tbody]
[/table]

Example B.4:
[quote="My First Website!"][b]Hello [u]internet![/u]
<MISSING closing tag!>[-/code][-code]Example B.5:
[spoiler][quote][quote][spoiler]
[/spoiler][/quote][/quote][/spoiler]
<notice that there are double quotes, within a spoiler and then a spoiler within those two quotes. Most likely this will not work! Don't do it!>

Example B.6:
[spoiler][quote]
[/spoiler][/quote]
<Notice that that the quote tag ends outside of the spoiler! This would render the code incapable to work properly>
[-/code][/td]
		[/tr]
[tr=bg2]
			[td=null,2][anchor=trouble] [/anchor][color=#800000][b][fontsize="20"]Troubleshooting![/fontsize][/b][/color]
So, now that you know the basics, let me get down to some fundamental [u]troubleshooting[/u] of your bbcode. The most common problem everyone experiencing at some point is the not closing their tags properly. (see Example B.4) I.e Having the both of you opening and the closing tags in the code for [b]EACH[/b] of them. [b]Nesting code[/b] within code can be a risky move. Like say, placing a quote within a quote. Or placing a quote within a spoiler. Take note, I am [b]not saying[/b] it's impossible. But you risk it breaking, especially if you go beyond a certain point of tags. That specific point is sometimes unsure, but as a general rule, only try to do it once. (see example B.5) Similar to nesting, it's important to take note of your coding order. As in, if you have a spoiler, and a quote, if open the quote tag within the spoiler, you also [b]must close the quote tag within the spoiler![/b] This includes the majority of all bbcode tags. So make sure you close them properly and in the correct place. (see Example B.6) An issue we have seen a few times on NC is that someone messed up their bbcode, and suddenly all subsequent posts underneath the post with the error (worse is if it's in the individual's signature) made them look weird, messed up somehow. The culprit has usually always been a misplaced closing/opening tag, or a too-deep nested tag. So please be aware of these kinds of issues. And double check your code always.[/td]
		[/tr]
	[/tbody]
[/table]

[center][goto=index]To the top[/goto][/center]
[right][url=https://www.ninpocho.com/memberlist.php?mode=viewprofile&u=242]This guide was written by Yoshi[/url][/right]
• Doesn't follow directions •
~Head Admin & Owner - PM if you need anything~
Image
Image
~Sig and ava made by Izumi~

Return to “New Player Guide”