Hi there! Noiz here (inside Venus' post bubble)! And I'm here to give you all the rundown of basic formatting in BBCode! When I began my literate RP days so long ago (4 years ago), I had no idea what BBCode was or even how to use it. Those little buttons at the top of the post box always confused me. But over the months and with some help from those more knowledgeable, I have become a Master of BBCode!
So have no fear! I'll teach you all about those buttons and even more extras that will make your posts the c**k of the walk!
I'm addressing this one first because this is something HUGE that will make or break your post. There are soooo many things you can do with images here on Gaia. Put 'em in sigs, show off your art, add a visual of your character while roleplaying.
The most basic thing and the first thing to know about images is how to add them.
[img]image url goes here[/img]
It's an easy tag. For the image URL, it has to end with either .jpg, .png, or .gif (.gif is not often used during roleplay, though). There are a few methods that you can, I'll show the method I use with imgur (but the basics will be the same across any image sharing service). First thing's first is to upload your image to your selected service. While viewing this image, it even gives you links off to the side that you can copy and paste between the image tags. You'll want to use the "BBCode" link.
Now that we know how to add images, let's move onto image size! Recently, Gaia has added an image size tag, which I have found to be a life saver. There's a few usable variations to this tag.
To adjust height and keep width in proportion:
[img="height=500"]image url here[/img]
To adjust width and keep height in proportion:
[img="width=300"]image url here[/img]
To adjust height and width separately (and possibly distort the image):
[img="300,500"]image url here[/img] the numbers are set up as "width,height"
For image size in a roleplay area, I suggest going with either a width of 300 pixels or height of 500 pixels, depending on which is larger for the specific image.
Yay! We know how to resize images on Gaia now! An alternate option is to adjust the size on your computer and reupload the adjusted image, but with the tags, I find that a waste of time, space, and energy!
Next is the actual position of where your image will go in your post. There's lots of options here, as well.
To simply add an image into a line of text (and ultimately separate segments of text), just add the simple image tag while typing.
This is an example sentence, purely for the joy of typing example sentences. [img]url goes here[/img] And now we move on to the next part.
This is an example sentence, purely for the joy of typing example sentences. And now we move on to the next part. This image will follow whatever alignment you have for the text. I am using the center tag, which I will explain more in the post about text. You can also add just an alignment tag around the image itself.
The most common image placement in the roleplay are is the imgright and imgleft tags. This completely bypasses the text and will put the image directly on the side of the post. Put these before your text in order to have it directly to the side, otherwise it will look just like an align tag.
[imgleft]url goes here[/imgleft] [imgright]url goes here[/imgright] And then add some text. It looks better with whole paragraphs but I'm not going to write an entire paragraph.
And then add some text. It looks better with whole paragraphs but I'm not going to write an entire paragraph.
> Now that I have given you the basics of images, feel free to experiment with the tags yourself! <
The fun stuff now! The meat of the post! Or maybe the garnish for the meat, since the meat is text... Anyway! Let's now learn how to make your words look as pretty as they sound!
First up, size! This is a super easy tag.
[size=20]text here is font size 20[/size] [size=10]text here is font size 10[/size]
text here is font size 20 text here is font size 10
This literally just determines how large or small your text is. Default Gaia font is size 12. Use larger sizes to show things like titles or names. Use smaller sizes for subtext that isn't nearly as important.
And now! Bolding, underlining, italicizing, and striking!
bold text underlined text italicized text striked text
You can also combine various ones by inserting one set of tags inside another.
[b][u]Bolded and Underlined Text[/u][/b]
Bolded and Underlined Text
Now, colour. There is nearly an infinite amount of colours available on Gaia. And there's 2 different ways to use them. Either with a name:
[color=red]This text is red.[/color]
This text is red.
Or a colour number thing:
[color=#DC143C]This text is still red but a different shade.[/color]
This text is still red but a different shade.
And because I really don't want to type out all the available colours, I'm going to link you over to a friend's post where she already has all the colours; numbers and names. Click Here!
Lastly, let's get to alignment. If you read through the Image post, this is the left, center, and right tags. This determines whether your text is aligned to the right, to the left, or in the middle.
[align=left]This text is aligned to the left. This is also the default alignment and isn't a necessary tag unless you are writing in the middle of another alignment tag. [/align] [align=center]This text is aligned in the middle.[/align] OR [center]you can drop the align part and just use "center".[/center] [align=right]This text is aligned to the right.[/align]
This text is aligned to the left. This is also the default alignment and isn't a necessary tag unless you are writing in the middle of another alignment tag.
This text is aligned in the middle.
OR
you can drop the align part and just use "center".
This text is aligned to the right.
And another fun alignment sorta tag that I only just recently discovered, (I lied when I called the last one last) the list tag!
[list]I need to turn off my alignment for the change to be noticeable. [list]You can also stack lists to make the indent even more. [list]Just be sure to keep up with how many lists you add![/list][/list][/list]
This is a normal, list-free line to use as reference.
I need to turn off my alignment for the change to be noticeable.
You can also stack lists to make the indent even more.
Just be sure to keep up with how many lists you add!
And before I send off this segment, I'll include an example of my format that I am using for this tutorial.
[center][color=darkcyan] [size=15][b][u]> Text Size, Colour, and Alignment <[/u][/b][/size]
Fun middle text. The meat. [i]MEEEEAT[/i].
[size=15][b]> It's fun to play with these tags! These really jazz up a post and occasionally make things easier to see or notice. <[/b][/size] [/color][/center]
> Text Size, Colour, and Alignment <
Fun middle text. The meat. MEEEEAT.
> It's fun to play with these tags! These really jazz up a post and occasionally make things easier to see or notice. <
Next: Quotes, Spoilers, and URLs
Posted: Mon Apr 15, 2019 1:17 pm
> Quotes, Spoilers, and URLs <
Oh my! We're 3 tutorials in and I've used up all my good jokes, so let's just cut to the chase.
Quotes. They quote people. It sends a notification to them to let them know someone is trying to contact them. These are super important in roleplaying here (and a common Gaia courtesy when replying to someone in forums).
[quote="Username"]Something they probably said.[/quote]
Noizless Nightingale
Quoting myself because I don't want to accidentally quote someone else, but you get the point.
They can also be used just to make a box around text.
[quote]Boxed off text.[/quote]
Quote:
Boxed off text.
Spoiler alert!
I'm gonna teach you how to make a spoiler tag!
[spoiler]You clicked a button.[/spoiler]
You clicked a button.
You can hide stuff within spoiler tags to either, literally, hide a spoiler, or hide information that would just take up too much room in a post (like blocks of quoted people or extra info in a roleplay post).
URLs, or hyperlinks, is...well....a site address. You can make a clickable link in your post using a URL tag. It usually opens another tab in your browser.
And I didn't mention it in the title cuz it would have thrown off the flow...but now I'll show you code tags!
[code ]This blocky green text in a grey box.[/ code] Do not use spaces in the actual tag. I used spaces because it's throwing off my formatting in this preview. XD
These show the BBCode behind a line of formatted text, as I have been using the past 3 tutorials. They're really only useful to show examples like this, or to make a long format easy to copy with all the BBCode included.
> And now you know even more about BBCode! Be sure to use these to make your post comfortable to view! < Next: Those Buttons on the Post Editor
These guys. What do they do? Where did they come from? (Well, I can't answer the second one...) And, because I have already explained everything before, you may want to shake me about and scream "Why didn't you just tell me this first?!" Well, young Padawan! I wanted to make sure you knew exactly what you were doing. And, honestly, I never use the buttons. I type all my code.
Starting on the top-left:
[ b ] : This is the bold button. You can highlight the text you want bolded and then click the button. [ i ] : This is the italics button. You can highlight the text you want italicized and then click the button. [ u ] : This is the underline button. You can highlight the text you want underlined and then click the button. [ s ] : This is the strike button. You can highlight the text you want striked and then click the button.
[ quote ] :This is the quote button. Clicking this will just make a quote box. To actually quote a person, you will need to add [="Username"] to the opening quote. [ code ] : This is the code button. It'll make that code box to make BBCode visible. [ url ] : This is the URL button. It'll open a URL tag for you to insert a web address into.
[ a ] : This is the colour button. It'll add the colour tag to the post or selected text. It uses the basic colours that are really not that fun. [ aaa ] : This is the font size button. It only has 5 settings, 2 large, normal, and 2 smaller. Next 3 Buttons: Align Left, Align Center, Align Right (respectively). Create the corresponding alignment tag.
Second Row:
[ img ] : This is the image tag. It creates a simple image tag within your line of text. [ imgleft ] : This is the imgleft tag. It snaps the image to the left side of the post. [ imgright ] : This is the imgright tag. It snaps the image to the right side of the post. [ imgmap ] : A box will pop up and ask for the image URL. It then just adds the image to your line of text.
[ add media ] : Opens your PhotoBucket account so you can add images directly from there. [ youtube ] : Adds a YouTube video to your post that can be watched in the post.
Emojis:
These are (obviously) emojis you can add into your post. I don't remember how many variants you can choose from because I have an upgrade that gives me 7 different emoji groups.
Under the Textbox:
As mentioned above, I have an upgrade installed to my browser that gives me extra goodies for posting. Post Style (first left dropdown box): let's you pick what you want the border of your post to look like. The default is "Say", which is what this guide uses, but there are others that'll add character to your post! Formats (second left dropdown box): this option comes from the upgrade I mentioned earlier. Through the extension, you can save various formats that you can pick from to automatically apply to your post upon clicking "submit". I won't go into explaining how GU works, as their thread about it can do that. Options: Attach Signature: if you have a gaia sig saved (which I'm yet to meet someone who doesn't), this gives you the option to, well, attach it to the bottom of your post. Post Action (right dropdown box): This gives you fun stuff to add onto your post upon "submit" like a dice roll or RNG. I've seen this often used for forum games or RPs that have a DnD style.
[ preview ] : let's you preview your post with all it BBCode glory. Allows you to proofread and make sure your code isn't jank before you hit that submit button. [ submit ] : submits your post for all to see. Be sure to preview it first though!
> Well, that's it for the basics, lovelies. Go and explore your new knowledge of BBCode~! < Next: Extras
Posted: Mon Apr 15, 2019 1:45 pm
> Extras! <
You have the basics down, so now let's get some flare! Now, before we get into this, it does take some practice to get to creating formats that look visually pleasing as well as don't break code.
SO. I'm gonna link you back to my friend's post. She has lot's of stuff here, including unique characters and symbols. Here!
And for names, I really like using pretty fonts, so I like to use CoolText to make fancy nameplates. It makes an image with...text. You can add it to the top of your post format with the image tag. A text version of this is Messletters, which also has tabs for text symbols.
I'll put in a few of my most recent post formats AS EXAMPLES. Please don't outright steal these, as one was actually made for a friend of mine. There are also formats waaaaay at the bottom of my friend's thread. Use these all as examples only!
This is a test of Tsubasa's basic post style. 'This is his inner monologue in which he wonders how he ended up in the castle of half-naked elves pining after the princess.' Tsubasa isn't sure how he ended up anywhere but Hana is cute af. "Here's Tsubasa talking cuz he loves talking, especially to a certain elven princess." Now Tsubasa is gonna awkwardly leave cuz Hana's parents dont like him.
Quote:
Quote:
Quote:
Quote:
Quote:
[imgright="height=500"]https://cdn.discordapp.com/attachments/566056950341828610/566736799255232527/Tsubasa1.png[/imgright] [color=darkgrey] [size=20]𝕋𝕤𝕦𝕓𝕒𝕤𝕒 𝔽𝕦𝕛𝕚𝕥𝕠𝕦[/size] 翼 藤藤 [size=10][list][list][i] 23 yo Avian Beastman Mercenary "Anything to see her smile." [url=https://www.youtube.com/watch?v=XPDp2l2tX-o]Main[/url] | [url=https://www.youtube.com/watch?v=xmJ-HChWi0g]Battle[/url] | [url=https://www.youtube.com/watch?v=8ju4H6fT-1Q]Emotional[/url] | [url=https://www.youtube.com/watch?v=SeInLlD_-7o&list=PL9AbuoyiFOWbodQ-yd3khfYFhRVLuox61&index=2&t=0s]To Hana[/url] [/i][/list][/list][/size] [/color]
[center]This is a test of Tsubasa's basic post style. [color=lightblue][i]'This is his inner monologue in which he wonders how he ended up in the castle of half-naked elves pining after the princess.'[/i][/color] Tsubasa isn't sure how he ended up anywhere but Hana is cute af. [color=royalblue][b]"Here's Tsubasa talking cuz he loves talking, especially to a certain elven princess."[/b][/color] Now Tsubasa is gonna awkwardly leave cuz Hana's parents dont like him.[/center]
Queen of Itomori Necromancer Reptilian Beastman 43 yo "I won't tell you what you want to hear, but instead what you need to hear. It's up to you to listen or not." Main | Battle | Emotional
This is a test for Saya's posting. Saya is the current queen of the beastman kingdom, Itomori. She is an adept necromancer and mostly only enjoys the company of the reanimated Naoki. 'Here's Saya's thoughts, usually about the wellbeing of her people or when she'll have to patch Naoki up again.' Saya loves Naoki and was devastated by her death. "Here Saya talks about how to remain peaceful in a world where war is on the horizon." Saya exits with Naoki.
Quote:
Quote:
Quote:
Quote:
[imgright="height=500"]https://cdn.discordapp.com/attachments/566056950341828610/566838296395644938/klaxosaur_princess_06.png[/imgright] [color=gray][size=17] 𝒮𝒶𝓎𝒶 𝑀𝑜𝓇𝒾𝓂𝑜𝓉𝑜[/size] 小夜 森本 [size=10][list][list][i] Queen of Itomori Necromancer Reptilian Beastman 43 yo "I won't tell you what you want to hear, but instead what you need to hear. It's up to you to listen or not." [url=https://www.youtube.com/watch?v=iE7_jra3uUc]Main[/url] | [url=https://youtu.be/nYdw-CAP9U8]Battle[/url] | [url=https://www.youtube.com/watch?v=WGkiR2Mby6s]Emotional[/url] [/i][/list][/list][/size] [/color]
[center]This is a test for Saya's posting. Saya is the current queen of the beastman kingdom, Itomori. She is an adept necromancer and mostly only enjoys the company of the reanimated Naoki. [color=firebrick][i]'Here's Saya's thoughts, usually about the wellbeing of her people or when she'll have to patch Naoki up again.'[/i][/color] Saya loves Naoki and was devastated by her death. [color=darkred][b]"Here Saya talks about how to remain peaceful in a world where war is on the horizon."[/b][/color] Saya exits with Naoki.[/center]
