BBCODE GUIDE

Status
Not open for further replies.

TABBY TALES

Official TT Account
moderator
Jun 7, 2022
43
73
18
DC5rr5t.png
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
 
Last edited:

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.

InputOutput
Code:
[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.
InputOutput
Code:
[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-
Code:
[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
InputOutput
Code:
[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!
InputOutput
Code:
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!

InputOutput
Code:
[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!
InputOutput
Code:
[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.
InputOutput
Code:
[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!
InputOutput
Code:
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!
InputOutput
Code:
[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.
InputOutput
Code:
[SPOILER=lol]hihi[/spoiler]
hihi

ISPOILERS unlike regular spoilers, will blur the text you wish to hide rather than stuffing it in a box.
InputOutput
Code:
[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.
InputOutput
Code:
[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
InputOutput
Code:
[code][b]hello[/b]
Code:
[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.
InputOutput
Code:
[TABLE][TR][TD]column 1[/TD]
[TD]column 2[/TD][/TR][TR]
[TD]whatever[/TD]
[TD]ayup[/TD][/TR][/table]
column 1column 2
whateverayup

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!
InputOutput
Code:
[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]
gog-gog-monkey.gif

gog-gog-monkey.gif

LISTS can either be unordered (bullet points) or numerical!
InputOutput
Code:
[list]
[*]item 1
[*]item 2
[/list]
  • item 1
  • item 2
Code:
[list=1]
[*]item 1
[*]item 2
[/list]
  1. item 1
  2. item 2

BASIC TEXT ALIGNMENTS
InputOutput
Code:
[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
InputOutput
Code:
[hr=1][/hr]
[hr=2][/hr]
[hr=3][/hr]
[hr=4][/hr]
[hr=5][/hr]





 
Last edited:

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!
InputOutput
Code:
[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
InputOutput
Code:
[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
InputOutput
Code:
[ARTICLE=your mother]balls[/ARTICLE]
Article:
balls
Source: your mother

ENCADRE inserts a text box to the right of text
InputOutput
Code:
[ENCADRE]whats up shawty[/ENCADRE] text text
[ENCADRE=50]whats up shawty[/ENCADRE]
text text

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
InputOutput
Code:
[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!
InputOutput
Code:
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!
InputOutput
Code:
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
InputOutput
Code:
[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.
InputOutput
Code:
[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!)
InputOutput
Code:
][TABS]
[slide=TAB 1]HOLY SHIT TABS!!!
[/slide]
[slide=TAB 2]THE EPIC[/slide]
[/tabs]
  • 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

InputOutput
Code:
[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!
InputOutput
Code:
[progress=50%]yuh[/progress]
[progress=80%]WEEEE[/progress]
yuh

WEEEE

 
Last edited:
Status
Not open for further replies.