BBCode Formatting Guide ((+ New Code :3 ))
Posted: Mon Dec 12, 2016 3:55 pm
by Rosy
We do have a small guide on formatting right [HERE], but it doesn't cover nearly everything! I'll walk you through some of the more advanced tags! Please read the F.A.Q page linked earlier for the basics first if you have any confusion with the basics, or ask here! I'll start with some of these on the toolbar before going into the secret codes. If you hover over them they'll give you a tool tip, but I'll still go through them.
→ flash
Flash, used for linking to YouTube videos! It is quite easy, you just have to follow the way it works.
https://www.youtube.com/watch?v=yS8PHdhHmEY Putting in this link won't work, you have to change the: watch?v= part into /v/ and then you're good to go!
You can change the 350,250 to change the width, height of the box.
→ ascii
If you ever looked at a gamefaqs guide, you probably saw the fancy art made out of text at the top! Well we don't need ascii art here since we can use images, but in case you still want to post some, you'd have to use this code to make sure it formats properly, or else you'll end up a mess.
,'\
_.----. ____ ,' _\ ___ ___ ____
_,-' `. | | /`. \,-' | \ / | | \ |`.
\ __ \ '-. | / `. ___ | \/ | '-. \ | |
\. \ \ | __ | |/ ,','_ `. | | __ | \| |
\ \/ /,' _`.| ,' / / / / | ,' _`.| | |
\ ,-'/ / \ ,' | \/ / ,`.| / / \ | |
\ \ | \_/ | `-. \ `' /| | || \_/ | |\ |
\ \ \ / `-.`.___,-' | |\ /| \ / | | |
\ \ `.__,'| |`-._ `| |__| \/ | `.__,'| | | |
\_.-' |__| `-._ | '-.| '-.| | |
`' '-._|
→ imageleft/imageright
One of my favorite codes! Basically it places and image either at the far left or right, and text conform to it. Put it at the beginning of any long strings of text, and not at the end to get a more desirable result.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat lacinia lacus, eu varius diam tristique vitae. Nulla sed ipsum vel tortor vestibulum ullamcorper. Pellentesque posuere risus id velit porta, vitae rutrum sapien egestas. Praesent quis dolor quis ligula luctus lobortis. In tempus mattis nibh, finibus bibendum diam imperdiet nec. Nulla a nibh malesuada, tempus nibh nec, convallis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec suscipit odio. Praesent id ultrices massa. Fusce leo diam, faucibus in turpis ac, interdum lacinia ante. Nullam sed nulla eget felis malesuada pellentesque. Phasellus non aliquam nunc. Maecenas posuere varius lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat lacinia lacus, eu varius diam tristique vitae. Nulla sed ipsum vel tortor vestibulum ullamcorper. Pellentesque posuere risus id velit porta, vitae rutrum sapien egestas. Praesent quis dolor quis ligula luctus lobortis. In tempus mattis nibh, finibus bibendum diam imperdiet nec. Nulla a nibh malesuada, tempus nibh nec, convallis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec suscipit odio. Praesent id ultrices massa. Fusce leo diam, faucibus in turpis ac, interdum lacinia ante. Nullam sed nulla eget felis malesuada pellentesque. Phasellus non aliquam nunc. Maecenas posuere varius lacinia. Donec viverra mattis velit ut lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia, tortor sed dapibus malesuada, sapien arcu tincidunt dolor, sed convallis dui enim in dui. Ut at justo est. Etiam porta arcu a est congue, at efficitur nisl ornare. Aliquam orci neque, dapibus sit amet dignissim et, laoreet ac leo. Ut at ullamcorper metus, at aliquam ex. Donec velit nisi, aliquet sit amet neque consequat, vestibulum dictum arcu.
This is with the image codes at the end! This can be a bit glitchy and clip through spoiler boxes, as you can see, but sometimes it can have a cool effect.
→ indent
This is a simple one! It just puts in a empty space inplace of it. It is counted in pixels. For this I used 25 to give me a good indent that signifies the start of a paragraph. It helps readability A LOT and breaks up the wall of text! Using whitespace characters also works, but this is more controlled.
→ spoilers
This is what we've been using this whole time. Normally you cannot put a spoiler inside of a spoiler, but you can put a second named spoiler IN a spoiler!
We also have a lot of unlisted tags more recently added!:
→ anchors
Anchors are bits of code that you can use to set up links to specific parts of a thread/post; this can be used to set up a link leading to a middle of a post. Also, if you're linking to an anchor on the same page, it will scroll down instead of reloading the page. An example of it in use can be seen in the forum's FAQ where it uses anchors for each of the questions.
You can also just put: to make it go to the top of the page, it is automatically coded in to do that!
→ background
Another simple one! This is just to add a background color to your text to make sort of a highlighted effect! Pleaseeee don't abuse this to make eye-burning posts!
texthere! Works with code too! coolstuff!
→ fonts
This is what it looks like if they don't have it installed.
Here is a list of common fonts people may have at the default size, I'd recommend sizing it up if you do use fonts - which I do not recommend using heavily!
→ imgur albums
Great for showing off screenshots, art, skins, and whatever else! After making your album of images on imgur, try to make the first image something smaller - as the size of the entire thing scales with it! Usually it is bigger, but because it is in a spoiler box it is limited.
http://imgur.com/a/EvjP9<--- Use this bit inside the code!
→ hr
A really simple one, just add it in to make a horizontal line, exactly the same as the one that separates a post from a signature. Don't type anything in between them, just leave it as is!
→ sub/sup
A fun one that just makes your text look funky! It is called superscript & subscript, used mostly for formulas and such. It's quite fun to play with though!
→ flash
Code: Select all
[flash=][/flash]
https://www.youtube.com/watch?v=yS8PHdhHmEY Putting in this link won't work, you have to change the: watch?v= part into /v/ and then you're good to go!
You can change the 350,250 to change the width, height of the box.
Code: Select all
[flash=350,250]https://www.youtube.com/v/yS8PHdhHmEY[/flash]
Code: Select all
[ascii][/ascii]
With ascii:It has a very cool effect on text too.
Without:,'\ _.----. ____ ,' _\ ___ ___ ____ _,-' `. | | /`. \,-' | \ / | | \ |`. \ __ \ '-. | / `. ___ | \/ | '-. \ | | \. \ \ | __ | |/ ,','_ `. | | __ | \| | \ \/ /,' _`.| ,' / / / / | ,' _`.| | | \ ,-'/ / \ ,' | \/ / ,`.| / / \ | | \ \ | \_/ | `-. \ `' /| | || \_/ | |\ | \ \ \ / `-.`.___,-' | |\ /| \ / | | | \ \ `.__,'| |`-._ `| |__| \/ | `.__,'| | | | \_.-' |__| `-._ | '-.| '-.| | | `' '-._|
,'\
_.----. ____ ,' _\ ___ ___ ____
_,-' `. | | /`. \,-' | \ / | | \ |`.
\ __ \ '-. | / `. ___ | \/ | '-. \ | |
\. \ \ | __ | |/ ,','_ `. | | __ | \| |
\ \/ /,' _`.| ,' / / / / | ,' _`.| | |
\ ,-'/ / \ ,' | \/ / ,`.| / / \ | |
\ \ | \_/ | `-. \ `' /| | || \_/ | |\ |
\ \ \ / `-.`.___,-' | |\ /| \ / | | |
\ \ `.__,'| |`-._ `| |__| \/ | `.__,'| | | |
\_.-' |__| `-._ | '-.| '-.| | |
`' '-._|
Code: Select all
[imageleft][/imageleft] & [imageright][/imageright]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat lacinia lacus, eu varius diam tristique vitae. Nulla sed ipsum vel tortor vestibulum ullamcorper. Pellentesque posuere risus id velit porta, vitae rutrum sapien egestas. Praesent quis dolor quis ligula luctus lobortis. In tempus mattis nibh, finibus bibendum diam imperdiet nec. Nulla a nibh malesuada, tempus nibh nec, convallis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec suscipit odio. Praesent id ultrices massa. Fusce leo diam, faucibus in turpis ac, interdum lacinia ante. Nullam sed nulla eget felis malesuada pellentesque. Phasellus non aliquam nunc. Maecenas posuere varius lacinia.
VS:
This is with the image codes at the end! This can be a bit glitchy and clip through spoiler boxes, as you can see, but sometimes it can have a cool effect.
Code: Select all
[indent][/indent]
Code: Select all
[spoiler][/spoiler] & [spoiler=title][/spoiler]
You can't put a spoiler inside a spoiler inside yet another spoiler though, and you cannot put two spoilers inside of one. It is a shame, but what ah, C'est la Vie
Code: Select all
[spoiler=example]TEXTHERE[/spoiler]
We also have a lot of unlisted tags more recently added!:
→ anchors
Code: Select all
[anchor]id[/anchor] & [anchor=id]text[/anchor]
Code: Select all
[anchor]up[/anchor] &
[anchor=up]I made an anchor at the top of the post![/anchor]
Code: Select all
[anchor=top]texthere[/anchor]
Code: Select all
[background=color][/background]
texthere! Works with code too! coolstuff!
Code: Select all
[background=#CFDDE8]texthere![/background]
- Background can also be used to make censor-spoiler bars, which you need to highlight to see.
Like this! SPOILERS, KC is a SNUB! Just set the background to black!
Code: Select all
[font=fontname][/font]
Please use fonts responsibly, posts made of all Comic Sans might 'glitch' out and disappear .
Fonts can really give a big impact or sinful look to your post, and they're fairly easy to use! There is only a small amount of fonts that is safe to use - as in that everybody has them installed. If you use a font that the computer does not have installed, it will default to Arial.This is what it looks like if they don't have it installed.
Code: Select all
[font=poop]This is what it looks like if they don't have it installed.[/font]
Arial
Fake Font
Arial Black
Arial Narrow
Book Antiqua
Calibri
Cambria
Candara
Century
Century Gothic
Comic Sans MS
Consolas
Constantia
Copperplate
Corbel
Courier New
Curlz MT
Cursive
Fantasy
Fixedsys
Franklin Gothic Medium
Gabriola
Garamond
Garton
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Microsoft Sans Serif
Mistral
Monospace
Monotype Corsiva
Optima
Palatino Linotype
Papyrus
Symbol
System
Tahoma
Times New Roman
Trebuchet MS
Verdana
Webdings
Wingdings
These are the ones that work for me, as you can see, a lot of them just look normal. I stole this from a Flight Rising post though~ thanks.
Fake Font
Arial Black
Arial Narrow
Book Antiqua
Calibri
Cambria
Candara
Century
Century Gothic
Comic Sans MS
Consolas
Constantia
Copperplate
Corbel
Courier New
Curlz MT
Cursive
Fantasy
Fixedsys
Franklin Gothic Medium
Gabriola
Garamond
Garton
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Microsoft Sans Serif
Mistral
Monospace
Monotype Corsiva
Optima
Palatino Linotype
Papyrus
Symbol
System
Tahoma
Times New Roman
Trebuchet MS
Verdana
Webdings
Wingdings
These are the ones that work for me, as you can see, a lot of them just look normal. I stole this from a Flight Rising post though~ thanks.
Code: Select all
[imgur][/imgur]
http://imgur.com/a/EvjP9<--- Use this bit inside the code!
[imgur]EvjP9[/imgur]
Code: Select all
[center][imgur]EvjP9[/imgur][/center]
Code: Select all
[hr][/hr]
Code: Select all
[sub] [/sub] & [sup] [/sup]
Code: Select all
[sub]text[/sub] look [sup]funky[/sup]!