Post by Deleted on Sept 16, 2023 19:12:04 GMT
How to make your post pretty, quickly.
(a long guide)
- How to use BBCode
- Basic BBCode
- Scarier stuff
- How to use it on the forum
- Tips & more
1. How to?
BBCode (or BBc BBC ect...) is a syntax that uses tags. In simple terms it means anything within a 'box' will be affected by the 'label' of that 'box'. A syntax is a language, and like any language, there is rules to it. Don't worry though, the BBC syntax is very easy. We call adding these tags (sometimes 'properties') formatting your text. Making it prettier!
Note: All coding in this guide will be written
with a space after the first bracket [ and the last bracket ]
as to not confuse the forum. When you use the
coding, do not put spaces in the brackets.
(see example picture at the end of the post)
You start your 'sentence' with two brackets [ ] (I'll refer to it as 'opening') and end it with a slash within brackets [ / ] (I'll refer to it as the 'closing') Anything between these two set of brackets (I'll refer these as 'boxes' for simpler terms) will be affected by the label. The 'tag' (also know as label or command, if you want to look up more of those) is what gives the text it's formatting. So, to make the text bold, I would do this (again, minus the space in the brackets):
[ b ]I want this text bold[ /b ] but not this one.
Anything within the [ ] (box) is bold. You must always close any brackets you open or else, the coding will automatically close it for you at the end of your text.
[ b ]I want this text to be bold, [ b ] but not this one. Even if I tried to make the boxes, it failed so everything is bold now. [ /b ][ /b ]
Yes, it would be 'closed' twice at the end of the text because in this case, you 'opened' two boxes and never 'closed' them. To correct this you would need to delete the last 2 boxes and add / (closing) in the appropriate [] (box)
You may ask, how or when do I input the BBCode?
Honestly, it is up to you when you insert the coding in your text. I usually type my reply and integrate the coding as I go because I know BBC very well. You can type your whole text then add the coding where it is needed, or you can add it directly on the forum (ps: see end of post for further notes), so you can see the formatting right away. If you forget the coding, at any time you can look up on google or switch between the BBCode and Preview tab. The 'preview' has nice little buttons that allows you to format the text without coding. You can switch back and forth while coding, just be aware your coding will be impacted.
2. Basic labels
Here's a quick list of the most used label/what is mostly needed for a forum.
Basic formatting: Simple formatting for your text. Is used the closest to the text, so if you have a 'box' already, these would go in the box. Don't forget these always come in a pair, the 'open' and 'close' box.
[ i ] Italic Text is [ i ]wobbly[ /i ]
[ b ] Bold Text is [ b ]fat[ /b ]
[ u ] Underlined Text is [ u ]poppin'[ /u ]
[ s ] Strike Text changed [ s ]it's mind[ /s ]
[ Center ] This text is center [ /center ] *
[ quote ] This text is a
[ /quote ]
quote
Combining formats: Some labels can be combined/stacked to add multiple effects within the same box. They are like simple sentences that give instructions. I'll show you an easy one now and a bit more advanced one later on.
[ font (...) ] [ /font ] Alone, the tag 'font' doesn't mean anything, it's like saying 'wh'. You need either -at, -ere, - o for it to make sense. For this tag, it's the 'size' and 'color' (there's others but I'd suggest looking it up by yourself or this guide will never end)
Note: No matter the label attached to 'font', the closing bracket is always [ /font ] alone. No need to add /color /size ect
[ font size="X" ] [ /font ] Size is how big your text is. Just putting 'size' doesn't tell the syntax what size the font should be. That's why you equal it (=) to a "value".
[ size="small" ] [ size="5" ]
There is two ways to 'code' a size with BBC
a) Using the default settings "small", "medium", "large"
b) Using the % varying from to "1" to "200" (see picture below for font size example)
[ font color="Name/Hexcode" ] [ /font ] How to make your text red? You add the color tag, then equate (=) it to a "value"
Again, there is 2 ways of putting colour:
a) Using the word for the colour (red, blue, yellow) Those are default colours only, if you type 'blood orange' it's not going to work
b) If you want a precise colour, you need to use the hex code (more about these here) Put the numbers between the value (") and tada! In preview mode, the colour wheel picker shows you the hex number so you can browse colours from there.
[ font face="X" ] [ /font ] the 'face' of your text is the font. (in the reply tab, Font Face is what you select to change the font) Same as colour, fonts that are compatible are limited. I would suggest sticking to the ones supported by the forum (Impact, Comic Sans, Arial, Verdana, ect...)
All of the above can be shoved under the same [ font ] bracket.
[ img src="http://..." ] Add a picture, this one is an exception, no need to close this one. However, once you switch tabs, you should see this instead:
[ img style="max-width:100%;" src="https://..." alt=""] (style is how big the picture will be, src is the source, in this case the url and alt is a description of the picture)
[ a href="" ]link[ /a ] link 'A' is for a link, href is the url of the link that must be place in the "value". Between the brackets, the text is what the link will appear as.
Scarier stuff...
* You might say, hey, what about making my text in the middle? To 'align center' your text, you must create a 'Division' (div). Basic forum coding uses [ center ] [ /center ] but if you check the coding it'll be changed to [ div align= ] If we go back to the Box metaphor, the Division (div) is the 'Depot' where your boxes are stored. Each time you reply in a thread, the new post you create is a new 'Depot'. The Div is always what you start with, sometimes you'll even see that divs were added to your coding even if you didn't add it yourself (more on that later). Now the thing is, these 'Depots' are also 'Departments'.
Think of it on a bigger scale. Your post is tiny in the overall coding of the site. To avoid the 'coding' of your post to be confused with the 'coding' of the rest of the website, a 'Depot' is created for your post. And within that post, you also use the 'div' to create your 'Departments' where your boxes are stored. Phiew. Make it make sense!
(Quick detour: in more 'professional' coding, the depot is 'div' and the department is 'span'. You'll see span in some coding below but for the basic coding they are put under the same umbrella 'div'.)
Here's an example:
If it looks familiar it's because it's this post. Remember when I said the website would add div even if you didn't? If you copy/paste your text then look on the BBCode tab, you'll see your text, with nothing else. As soon as you add colour or bold in your text, if you click on BBCode tab, you'll see a bunch of div added everywhere.
It's tied to that Depot/Division metaphor. Of course, this seems very scary if you don't know what's going on so don't be surprise the first time you click on that BBCode tab to see a bunch of coding you might not have input yourself.
Back to the code above, the first line is the label stating that the text is justified in the center, anything within the 'div' will be in the middle of the post. You can see that each sentence is within a div in the list ( [ ol ][ li ] [ /li ][ /ol ] is the code use for a list**), and the whole thing is within a div. Boxes, within a department, within a depot, within an ocean of depots depot franchise, ect...
[ div align="center" ][ font size="5" face="impact" ]How to make your post pretty, [ /font ][ font size="3" face="impact" ][ i ]quickly[ /i ].[ /font ][ /div ][ div align="center" ][ font face="impact" size="3" ](a long guide)
[ /font ][ /div ]
I said earlier that basic labels are always closest to the text. If we deconstruct the first line of coding:
[ div align="center" ][ font size="5" face="impact" ]How to make your post pretty, [ /font ][ font size="3" face="impact" ][ i ]quickly[ /i ].[ /font ][ /div ][ div align="center" ][ font face="impact" size="3" ](a long guide)
[ /font ][ /div ]
First is the div equating the value center, anything within that 'department' will be in the middle of the post. Then, we have the formatting of the text with font size and face. Then, the 'basic formatting' [ i ] is the closest to the text (in bold). In 'pure coding' terms, this is very messy and you wouldn't repeat the div align so many times but it's how the forum do things.
What about the & amp ; you ask? Coding for either a symbol or a space. Yes, very different things yet it uses the same coding. Don't erase those or it'll mess your text. It can be useful when there's a space somewhere in your coding and you're not sure where.
That covers the very basic on how to use BBCode!
4. How to use it on the forum
You can use coding directly in the quick reply box at the bottom of a thread.
To use BBC after clicking on the 'Reply' button you must click on the 'BBCode' tab. If you code in preview and then switch to BBCode tab, be ready for messy coding.
5. Tips & More
If you see a post with some coding you have never seen, or you want to know how a certain post was format, you can 'quote' it and check the BBCode to reveal it's secret.
Anything after [ quote author= source= timestamp= ] is the coding of the original post. In this example, I used a table to align the name of the mechs with the picture of the 'mood' that goes with them. Don't forget to erase the [ /quote ] at the end if you want to use some of the coding as a base.
**Lists & Tables
Lists and tables use 'two & more' codes. In the earlier example:
[ ol type="decimal" ][ li ][ div ]How to use BBCoding[ /div ][ /li ][ li ]Basic BBCoding[ /li ][ li ]Scarier stuff
[ /li ][ li ]How to use it on the forum[ /li ][ li ]Tips & amp ; more[ /li ][ /ol ]
'OL' dictates that this a list, the 'type' labels that this list will be numbers (there's bullets and other options) and 'LI' is an item in the list. So OL is your 'Department' and each item LI is a 'box' that is open and closed.
It's more or less the same principle for tables but I'll let you look that up if you want to know more about BBCode.
And that covers the basic on how to use BBCode!