BBCODE GUIDE

[TABBY TALES]

TABBY TALES BBCODE GUIDE written & maintained by Floppie​

On Tabby Tales, we have quite a few options available to us that allow us to have spiffy looking profiles, but some of these things can be a bit complicated, or just hard to remember. Here's a guide to help you with all of that stuff!
Basic Code && Advanced Code​

​

 

[TABBY TALES]

---

BASIC CODE​

---

As a basic rule of thumb. . . Toggle BBcode in your text editor by clicking on the '[ ]' next to the save icon. You'll know it's enabled while the fine-text options overhead are greyed out! For certain things like inserting images, tables, etc... you may want to switch to the fine-text editor for the sake of simplicity. Do this with extreme caution as nine times out of ten your code will be completely disrupted once you switch back to the bbcode editor. If you'd like to disable it at anytime, i recommend copy-and-pasting a version of your code to somewhere else beforehand, so you can simply restore the original code and insert whatever you added!

In replacement of [cendiv][w#] ... we now have [BOX] as a custom BBcode! What does [box] do? Essentially, it keeps all of your text within an imaginary box, the size of which, you can change to your liking! It also automatically centers things within the box for you (unless stated otherwise). The smaller the number, the smaller the box!
Note: if you do w#, and then w# again without brackets in between, the width will shrink further.

Input	Output
[box=80%]Turi ip ip ip, ip ip ip iptsha ik.[/box] [box=40%]Turi ip ip ip, ip ip ip iptsha ik.[/box]	Turi ip ip ip, ip ip ip iptsha ik. Turi ip ip ip, ip ip ip iptsha ik.

This is typically used alongside JUSTIFY as well. What justify does is stretches and shrinks the gaps between words, so that they will end up in a uniform box, rather than something that looks... sorta like one.

Input	Output
[box=80%] Let's say, for the sake of argument, hypothetically, I'm a quirked up white boy. And if I was a quirked up white boy- [box=80%][justify] Let's say, for the sake of argument, hypothetically, I'm a quirked up white boy. And if I was a quirked up white boy-	Let's say, for the sake of argument, hypothetically, I'm a quirked up white boy. And if I was a quirked up white boy- Let's say, for the sake of argument, hypothetically, I'm a quirked up white boy. And if I was a quirked up white boy-​

TEXT STYLES

Input	Output
[b]text[/b] [i]text[/i] [u]text[/u] [s]text[/s]	text text text text

FONT STYLES
We really don't know the extent of the fonts usable on TT! Mess around with them!

Input	Output
Hello Bozo [font=arial]Hello Bozo[/font] [font=book antiqua]Hello Bozo[/font] [font=courier new]Hello Bozo[/font] [font=georgia]Hello Bozo[/font] [font=tahoma]Hello Bozo[/font] [font=times new roman]Hello Bozo[/font] [font=trebuchet ms]Hello Bozo[/font] [font=verdana]Hello Bozo[/font]	Hello Bozo Hello Bozo Hello Bozo Hello Bozo Hello Bozo Hello Bozo Hello Bozo Hello Bozo Hello Bozo

Resizing text Can be done in two different ways
– [size=#]text
– [size=#px]text
These are different measurements!

Input	Output
[size=10px]text[/size] [size=10]text[/size]	text text

#px is based off of the pixel size, and can be compared to traditional docs / microsoft word sizes
the value of # without px is... more ambigious
For both values: the higher the number, the bigger the size, though the size increase will be more dramatic without -px

COLORED TEXT Can be achieved with the [color] command, followed by either a hex code, or the name of a color pre-programmed into BBcode. Here's a list of default BBcode colors. When using hex codes, make sure to include the # beforehand!

Input	Output
[color=red]text[/color] [color=#FF0000]text[/color]	text text

OUTLINE and GLOW Can be added to your text as well! their colors function the same way, either being inserted via a name, hex code, or RGB.

Input	Output
[outline=red]text[/outline] [glow=red]text[/glow]	text text

INDENT Will indent your text! Make sure to close it off with a /indent bracket, or the entire post will be scooched to the right from there-on. You can keep adding indents or increase the size of the gap with [indent=#] to make it go further back!

Input	Output
text [indent]text[/indent] [indent][indent]text[/indent][/indent] [indent=3]text[/indent]	text text​ text​ text​

LINKS can be easily added with the use of url! what's inbetween the quotes will determine where the link goes while after the brackets is what words (or images!) contain the link! Additionally, if you'd like to color the link, add a color tag in between it!

Input	Output
[url='swag.com']hell yeah baby[/url] [url='swag.com'][color=blue]gabagoo[/color][/url]	hell yeah baby gabagoo

SPOILERS can be used to condense information! You can chose whether youd like to set a name for it or not by either specifying or leaving things blank! You can also put spoilers inside of eachother, but pay attention as it can quickly become confusion, especially combined with things like box and justify.

Input	Output
[SPOILER=lol]hihi[/spoiler]	Spoiler: lol hihi

ISPOILERS unlike regular spoilers, will blur the text you wish to hide rather than stuffing it in a box.

Input	Output
[ispoiler]HELLO YOUR COMPUTER HAS VIRUS[/ispoiler]	HELLO YOUR COMPUTER HAS VIRUS

QUOTE makes a neat little box for you to put stuff inside of.

Input	Output
[quote]shawty got the uh uh uh[/quote]	shawty got the uh uh uh

CODE can be used to share codes in their raw form

Input	Output
[code][b]hello[/b]	[b]hello[/b]

Tables create... well, tables within the post! TR stands for table row, while TD separates the different sections of the table. It's a bit hard to explain, but with practice you will get the hang of it.

Input	Output
[TABLE][TR][TD]column 1[/TD] [TD]column 2[/TD][/TR][TR] [TD]whatever[/TD] [TD]ayup[/TD][/TR][/table]	column 1 column 2 whatever ayup

IMAGES can be easily added with IMG. simply follow the bracketets by the image address and add a closing bracket, works with gifs as well, They can also be resized!

Input	Output
[img]https://c.tenor.com/r0I_LYohrPUAAAAM/gog-gog-monkey.gif[/img] [img width=100px]https://c.tenor.com/r0I_LYohrPUAAAAM/gog-gog-monkey.gif[/img]

LISTS can either be unordered (bullet points) or numerical!

Input	Output
[list] [*]item 1 [*]item 2 [/list]	item 1 item 2
[list=1] [*]item 1 [*]item 2 [/list]	item 1 item 2

BASIC TEXT ALIGNMENTS

Input	Output
[right]text[/right] [center]text[/center] [left]text[/left]	text​ text​ text​

HR creates a horizontal line across your posts, there are five different styles

Input	Output
[hr=1][/hr] [hr=2][/hr] [hr=3][/hr] [hr=4][/hr] [hr=5][/hr]

​

 

[TABBY TALES]

---

ADVANCED CODES​

HERES the juicy stuff guys woah mama​

---

ABBR allows you to hover over text (or images!) for more information to be displayed on top, a very useful way to make things more compact!

Input	Output
[abbr='more information here']text[/abbr]	text

ACCORDION is a SUPER COOL code that allows you to condense sections into a lil' accordion! The width can also be adjusted! Accordion does not work on mobile

Input	Output
[ACCORDION] [SLIDE_HEADER]tab 1[/SLIDE_HEADER] [SLIDE]HELLL YEAHHHH [/SLIDE] [SLIDE_HEADER]tab 2[/SLIDE_HEADER] [SLIDE]AWOOGAAA[/slide] [/ACCORDION] [ACCORDION=200] [SLIDE_HEADER]tab 1[/SLIDE_HEADER] [SLIDE]HELLL YEAHHHH [/SLIDE] [SLIDE_HEADER]tab 2[/SLIDE_HEADER] [SLIDE]AWOOGAAA[/slide] [/ACCORDION]	tab 1 HELLL YEAHHHH tab 2 AWOOGAAA tab 1 HELLL YEAHHHH tab 2 AWOOGAAA

ARTICLE displays text with an optional source attribution

Input	Output
[ARTICLE=your mother]balls[/ARTICLE]	Article: balls Source: your mother

ENCADRE inserts a text box to the right of text

Input	Output
[ENCADRE]whats up shawty[/ENCADRE] text text [ENCADRE=50]whats up shawty[/ENCADRE]	Encadre: whats up shawty text text Encadre: whats up shawty

FIELDSET i feel as if theres more of a purpose to these, but i cant see it being used for anything besides funny text box <3 width can be adjusted

Input	Output
[fieldset=title]wassup[/fieldset] [fieldset=title|50]wassup[/fieldset]	title wassup title wassup

FLEFT or float left makes text float to the left, this will not work if you are trying to float very large amounts of text!

Input	Output
am i goated with the sauce[fleft]hello bozo[/fleft]	am i goated with the sauce hello bozo

FRIGHT works exactly the same except to the right!

Input	Output
am i goated with the sauce[fright]hello bozo[/fright]	am i goated with the sauce hello bozo

BIMG is a special type of image that works best alongside fleft and fright! While it's designed to be a more easily adjustable image, it's honestly quite... weird, and I don't know the specifics of how it works just yet. i do know that this can be floated, while normal imgs cannot

Input	Output
[fright][bimg]https://c.tenor.com/4tnTIrb74TwAAAAM/cat-kitten.gif[/bimg][/fright]shawty	shawty

SLIDER allows you to make slides, similar to a powerpoint or flashcard! Titles are optional. Sliders are a bit finicky, do not use them with fright or fleft or they will completely freak out.

Input	Output
[SLIDER] [SLIDE=title]content[/slide] [slide=title 2]lesgoo[/slide] [/slider]	title content title 2 lesgoo

TABS TABS!!!!!!!!!! (as of right now the colors cannot be changed!)

Input	Output
][TABS] [slide=TAB 1]HOLY SHIT TABS!!! [/slide] [slide=TAB 2]THE EPIC[/slide] [/tabs]	TAB 1 TAB 2 HOLY SHIT TABS!!! THE EPIC

COLUMNS can be a bit finicky, maybe a lot finicky. But they work! Mess around with the spacing between words to get things how you want them! You can adjust the number of columns with

Input	Output
[columns=2]text text[/columns]	text text

PROGRESS BARS! another very finicky thing, honestly! be careful with what other code you combine with this or it will break! :( control how filled up the progress bar is with percentages!

Input	Output
[progress=50%]yuh[/progress] [progress=80%]WEEEE[/progress]	yuh WEEEE

​