BBCode Formatting Guide ((+ New Code :3 ))

Postby Rosy » Mon Dec 12, 2016 3:55 pm

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.
Image



flash
Spoiler: show
Code: Select all
[flash=][/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.

Code: Select all
[flash=350,250]https://www.youtube.com/v/yS8PHdhHmEY[/flash]

ascii
Spoiler: show
Code: Select all
[ascii][/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.
It has a very cool effect on text too.

With ascii:
,'\
_.----. ____ ,' _\ ___ ___ ____
_,-' `. | | /`. \,-' | \ / | | \ |`.
\ __ \ '-. | / `. ___ | \/ | '-. \ | |
\. \ \ | __ | |/ ,','_ `. | | __ | \| |
\ \/ /,' _`.| ,' / / / / | ,' _`.| | |
\ ,-'/ / \ ,' | \/ / ,`.| / / \ | |
\ \ | \_/ | `-. \ `' /| | || \_/ | |\ |
\ \ \ / `-.`.___,-' | |\ /| \ / | | |
\ \ `.__,'| |`-._ `| |__| \/ | `.__,'| | | |
\_.-' |__| `-._ | '-.| '-.| | |
`' '-._|

Without:
,'\
_.----. ____ ,' _\ ___ ___ ____
_,-' `. | | /`. \,-' | \ / | | \ |`.
\ __ \ '-. | / `. ___ | \/ | '-. \ | |
\. \ \ | __ | |/ ,','_ `. | | __ | \| |
\ \/ /,' _`.| ,' / / / / | ,' _`.| | |
\ ,-'/ / \ ,' | \/ / ,`.| / / \ | |
\ \ | \_/ | `-. \ `' /| | || \_/ | |\ |
\ \ \ / `-.`.___,-' | |\ /| \ / | | |
\ \ `.__,'| |`-._ `| |__| \/ | `.__,'| | | |
\_.-' |__| `-._ | '-.| '-.| | |
`' '-._|

imageleft/imageright
Spoiler: show
Code: Select all
[imageleft][/imageleft] & [imageright][/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.


EXAMPLE: show

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:

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
Spoiler: show
Code: Select all
[indent][/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
Spoiler: show
Code: Select all
[spoiler][/spoiler] & [spoiler=title][/spoiler]

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!
example: show
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
Spoiler: show
Code: Select all
[anchor]id[/anchor] & [anchor=id]text[/anchor]

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.

I made an anchor at the top of the post!
Code: Select all
[anchor]up[/anchor]  & 
[anchor=up]I made an anchor at the top of the post![/anchor]

You can also just put: TO THE TOP!
Code: Select all
[anchor=top]texthere[/anchor]
to make it go to the top of the page, it is automatically coded in to do that!


background
Spoiler: show
Code: Select all
[background=color][/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!Image 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!


fonts
Spoiler: show
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]

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!

SOME Websafe Fonts: show
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.


imgur albums
Spoiler: show
Code: Select all
[imgur][/imgur]

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!

Code: Select all
[center][imgur]EvjP9[/imgur][/center]


hr
Spoiler: show
Code: Select all
[hr][/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
Spoiler: show
Code: Select all
[sub] [/sub] & [sup] [/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!
Code: Select all
[sub]text[/sub] look [sup]funky[/sup]!
Rosy
User avatar
 
Posts: 632
Joined: Mon Aug 26, 2013 11:33 am

Postby Mishakiara » Mon Dec 12, 2016 11:18 pm

columns

Code: Select all
[columns][col]column 1[/col][col]column 2[/col][/columns]

Note: You can add as many columns as you want! All your col tags have to be wrapped in a columns tag in order for them to work.

These two codes (columns and col) allow for you to have multiple columns in a post! While the code itself is rather simple, there's a few aspects are worth mentioning. It will also be better to show it outside of a spoiler. They are neat, but they are also a bit finicky. Here's an example with three columns, and below that is some extra information that might help/should be known:

Code: Select all
[columns][col]column 1
this is text that is contained in column 1[/col][col]column 2
some that's in column 2![/col][col]column 3
a third column![/col][/columns]

column 1
this is text that is contained in column 1
column 2
some that's in column 2!
column 3
a third column!

Line breaks between col tags will cause the breaks to go ABOVE the columns! Make sure when you post your columns that you remove any line breaks between cols to avoid extra unwanted space above of it.
- Similarly; any text that is outside of the col tags, but still inside the columns tags, will just go above the columns.

The columns automatically adjust their size to best match their contacts:
- The column(s) with the most text and such will be bigger.
- As can be seen above, if you do not have a lot of text, it will not take up the entire post's width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a arcu ac purus gravida ultrices. Nullam malesuada vulputate cursus. Praesent euismod mauris lacus, id egestas ligula porttitor at. Aenean velit arcu, maximus sit amet efficitur ut, rutrum nec erat. Praesent sit amet turpis sed ligula tempus accumsan convallis in turpis. Quisque consequat volutpat egestas. Mauris feugiat metus non ligula pulvinar laoreet. Ut ac odio odio. Nullam ut vulputate massa.

"But what if I want them to be all even/adjust the table sizes to my liking?"

There is a make-shift way to do this, but no real perfect or easy/clean way. To do this you would have to add filler text at the end of each column to make them about the same length. This can be cluttering and could be seen if highlighted; if you don't want to do that though then you're tough outta luck for this though as there's no other way (that I know of at least). You can add whatever filler text you want, I personally will be using the generic Lorem Ipsum text for mine. You can make your filler text invisible using...

Code: Select all
[color=transparent]filler text[/color]

column 1

this is text that is contained in column 1
Lorem ipsum dolor sit amet.
column 2

some that's in column 2!
Lorem ipsum dolor sit amet, consectetur adipiscing.
column 3

a third column
!Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With more text....
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a arcu ac purus gravida ultrices. Nullam malesuada vulputate cursus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a arcu ac purus gravida ultrices. Nullam malesuadaPraesent euismod mauris lacus, id egestas ligula porttitor at. Aenean velit arcu, maximus sit amet efficitur ut, rutrum nec erat. Praesent sit amet turpis sed ligula tempus accumsan convallis in turpis. Quisque consequat volutpat egestas. Mauris feugiat metus non ligula pulvinar laoreet.Ut ac odio odio. Nullam ut vulputate massa.Praesent euismod mauris lacus, id egestas ligula porttitor at. Aenean velit arcu, maximus sit amet efficitur ut, rutrum nec erat. Praesent sit amet turpis sed ligula tempus accumsan convallis in turpis. Quisque consequat

"Can columns have spoilers/be in spoilers?"

Yes! Trying to put more than one spoiler via columns will break your post though so don't try to do it.

Spoiler: show
Test: show
Looky, a spoiler.
Be careful that you don't break things. I broke it multiple times while messing with this (just for testing reasons, of course).

column 1
This is a spoiler: show
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a arcu ac purus gravida ultrices. Nullam malesuada vulputate cursus. Ut a vehicula turpis. Etiam imperdiet ante ac ante elementum, vitae hendrerit elit maximus. Aliquam semper neque eget lacinia faucibus. Vestibulum quis ipsum at ex varius hendrerit. Ut dignissim non justo consectetur luctus. Vestibulum eget aliquam tortor, ac lacinia leo. Phasellus in blandit risus. Maecenas bibendum a tellus at faucibus.
column 2
test: show
Praesent euismod mauris lacus, id egestas ligula porttitor at. Aenean velit arcu, maximus sit amet efficitur ut, rutrum nec erat. Praesent sit amet turpis sed ligula tempus accumsan convallis in turpis. Quisque consequat volutpat egestas. Mauris feugiat metus non ligula pulvinar laoreet. Maecenas tincidunt quam quam, vel dictum orci semper nec. Sed venenatis lacus mi, id vulputate felis sagittis malesuada. Nam laoreet tellus at diam luctus, vitae accumsan mi sagittis. Morbi sollicitudin malesuada tortor, vel egestas lectus venenatis sit amet. Curabitur tincidunt vulputate libero, nec vestibulum massa vestibulum quis. Aenean placerat egestas lacus, a placerat purus iaculis sed. Suspendisse posuere ullamcorper magna, vel hendrerit ipsum dictum sed. Morbi molestie lorem sed hendrerit gravida. Morbi non velit vitae velit iaculis mattis.
column 3
Praesent euismod mauris lacus, id egestas ligula porttitor at.
Spoiler: show
Nam laoreet tellus at diam luctus, vitae accumsan mi sagittis. Morbi sollicitudin malesuada tortor, vel egestas lectus venenatis sit amet. Curabitur tincidunt vulputate libero, nec vestibulum massa vestibulum quis. Aenean placerat egestas lacus, a placerat purus iaculis sed. Suspendisse posuere ullamcorper magna, vel hendrerit ipsum dictum sed. Morbi molestie lorem sed hendrerit gravida. Morbi non velit vitae velit iaculis mattis.
Image
Mishakiara
User avatar
 
Posts: 568
Joined: Sat Aug 23, 2014 2:55 pm
Location: USA

Postby Rosy » Fri May 19, 2017 1:59 pm



hi
Rosy
User avatar
 
Posts: 632
Joined: Mon Aug 26, 2013 11:33 am


Return to Roleplaying Guides

Who is online

Users browsing this forum: No registered users and 1 guest

cron