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? [lb][/lb] 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. [lb][/lb] 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:
| 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. [lb][/lb] 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.
|
| 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.[lb][/lb] 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:
|
|
| 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) 
| |
|
Code:
|
Code:
|
| 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) [lb][/lb] 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)[lb2][/lb2] 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)[lb2][/lb2] 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. [lb][/lb] (see 1 example B.3 Otherwise click on Show table guidelines above the menu opened by the button.) |
Code:
Code:
Code:
|
| 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. |
[tbody]
[/tbody]