Guides
Community created guides, helpful strategies, and more.
TOPIC | Crowe's BBcode Compedium!
1 2 3 4 5 6 7 ... 11 12
Crowe's Comprehensive BBcode Compendium

Hello, and welcome to my complete guide on using BBcode on Flight Rising! Below, you'll find lessons on everything BBcode, from the basic toolbar buttons to advanced columns and tag nesting!

I'm starting from the ground up here- even if you know absolutely nothing about programming, you'll be able to pick up BBcoding in no time! If you want to start from the beginning, just scroll down to the next post and I'll be explaining the BBcode toolbar. If you've ever wrote a comment or post here, no doubt you've already seen it! If you already know a little BBcode, check out the Table of Contents below, and find something you find interesting!

What is BBcode?

BBcode stands for "Bulletin Board Code", and it's called this because it's the standard markup language for message boards and forums. A markup language is just fancy programmer-talk for "a way to change the way your text and posts look".

Terminology

This guide will use some words special to BBcoding, and this space is dedicated to defining them. If you're confused about a term I use later in the guide, come back here for clarification!

Tag:
A tag is a marker used to tell the browser where to put BBcode! All code comes with two tags, and you can spot them easily because they're always in brackets, like these here: [tag] [/tag]

Nesting:
Nesting, put simply, means putting tags inside of other tags. this is when you need to change a piece of text in more than one way.

String:
In computer programming, a "string" is any combination of letters, numbers, and special characters. This sentence is a string, the comment you undoubtedly left on this post is a string, everything on this site is a string! Usually, I'll be calling the strings inside of BBcodes just "text" but it's good to know regardless.

URL:
You know the bar at the top of your browser? The one you type "www1.flightrising.com"
into daily? That's where your current URL is! If you need a "link" or a "URL", that's going to be in this bar.



Table of Contents

Here is everything covered in this guide! To jump to a topic, click the topic title in bold.
______________________________
Intro
What is BBcode?
Terminology

Basic Tags
The Toolbar
Bold Text
Italicized Text
Underlined Text
Indented Paragraphs
Left-Aligned Text
Centered Text
Right-Aligned Text
URL Hyperlinks
Images
Ordered Lists
Unordered Lists
Quotes
Code Blocks
Strikethrough
______________________________
Flight Rising Tags
Pings
Player Icons
Items
Skins
Outfits
Dragons

Nesting & Readability
Nesting
Full Closes
Code Readability

Advanced Columns
Making Space
Aligning Columns
Formatting a single line
Formatting an entire column
Column Width
Nesting Columns
______________________________
Projects
Making a dragon frame

Resources
Notepad++
Color Hex
Hex Color Tool
Text Colorizer
Color Fader
Lorem Ipsum

Student Examples
& Badges

Student Links
Badges
Special Thanks




Crowe's Comprehensive BBcode Compendium

Hello, and welcome to my complete guide on using BBcode on Flight Rising! Below, you'll find lessons on everything BBcode, from the basic toolbar buttons to advanced columns and tag nesting!

I'm starting from the ground up here- even if you know absolutely nothing about programming, you'll be able to pick up BBcoding in no time! If you want to start from the beginning, just scroll down to the next post and I'll be explaining the BBcode toolbar. If you've ever wrote a comment or post here, no doubt you've already seen it! If you already know a little BBcode, check out the Table of Contents below, and find something you find interesting!

What is BBcode?

BBcode stands for "Bulletin Board Code", and it's called this because it's the standard markup language for message boards and forums. A markup language is just fancy programmer-talk for "a way to change the way your text and posts look".

Terminology

This guide will use some words special to BBcoding, and this space is dedicated to defining them. If you're confused about a term I use later in the guide, come back here for clarification!

Tag:
A tag is a marker used to tell the browser where to put BBcode! All code comes with two tags, and you can spot them easily because they're always in brackets, like these here: [tag] [/tag]

Nesting:
Nesting, put simply, means putting tags inside of other tags. this is when you need to change a piece of text in more than one way.

String:
In computer programming, a "string" is any combination of letters, numbers, and special characters. This sentence is a string, the comment you undoubtedly left on this post is a string, everything on this site is a string! Usually, I'll be calling the strings inside of BBcodes just "text" but it's good to know regardless.

URL:
You know the bar at the top of your browser? The one you type "www1.flightrising.com"
into daily? That's where your current URL is! If you need a "link" or a "URL", that's going to be in this bar.



Table of Contents

Here is everything covered in this guide! To jump to a topic, click the topic title in bold.
______________________________
Intro
What is BBcode?
Terminology

Basic Tags
The Toolbar
Bold Text
Italicized Text
Underlined Text
Indented Paragraphs
Left-Aligned Text
Centered Text
Right-Aligned Text
URL Hyperlinks
Images
Ordered Lists
Unordered Lists
Quotes
Code Blocks
Strikethrough
______________________________
Flight Rising Tags
Pings
Player Icons
Items
Skins
Outfits
Dragons

Nesting & Readability
Nesting
Full Closes
Code Readability

Advanced Columns
Making Space
Aligning Columns
Formatting a single line
Formatting an entire column
Column Width
Nesting Columns
______________________________
Projects
Making a dragon frame

Resources
Notepad++
Color Hex
Hex Color Tool
Text Colorizer
Color Fader
Lorem Ipsum

Student Examples
& Badges

Student Links
Badges
Special Thanks




| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Basic tags[/center] The easiest way to use BBcode tabs is with the BBcode toolbar. Whenever you're writing a post or bio, or anything that requires text, you'll see all of these buttons here: -----[center] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_bold.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_italic.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_underline.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_indent.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_left.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_center.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_right.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_link.gif[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_image.gif[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_olist.gif[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_ulist.gif[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_quote.gif[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_code.png[/img] [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_strike.png[/img] [/center]----- Clicking almost any of these buttons creates a set of BBcode tags wherever your cursor is. You can then click in between the tags and type away! The only buttons that have special rules are the URL button ([img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_link.gif[/img]) and the Image button ([img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_image.gif[/img]), but we'll get to those soon. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_bold.png[/img] [center][size=5][color=darkblue] [b]Bold text[/center][left] [code][b] This text is bold![/b][/code] [b]This text is bold![/b] ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_italic.png[/img] [center][size=5][color=darkblue] [b]Italicized text[/center][left] [code][i] This text is italicized![/i][/code] [i]This text is italicized![/i] ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_underline.png[/img] [center][size=5][color=darkblue] [b]Underlined text[/center][left] [code][u] This text is underlined![/u][/code] [u]This text is underlined![/u] ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_indent.png[/img] [center][size=5][color=darkblue] [b]Indented paragraphs[/center][left] "Indent" is an odd one, and you'll rarely use it. It simply tabs all of the text inside it to the right. [code][indent]This entire paragraph is indented! The whole thing![/indent] This one, however, is not. How sad.[/code] [indent]This entire paragraph is indented! The whole thing![/indent] This one, however, is not. How sad. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_left.png[/img] [center][size=5][color=darkblue] [b]Left-aligned text[/center][left] [code][left] This text is aligned to the left side of the post![/left][/code] [left]This text is aligned to the left side of the post![/left] Okay, left-aligned is another weird one that you probably won't use very often, if at all. Since text sticks to the left side of your posts already, you almost never need 'left' It can be useful if you're trying to combine it with 'center' and 'right'. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_center.png[/img] [center][size=5][color=darkblue] [b]Centered text[/center][left] [code][center] This text is centered![/center][/code] [center]This text is centered![/center] I use 'center' a lot. It just puts your text right in the middle of the post. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_right.png[/img] [center][size=5][color=darkblue] [b]Right-aligned text[/center][left] [code][right] This text is aligned to the right side of the post![/right][/code] [right]This text is aligned to the right side of the post![/right] I don't quite understand the purpose of right-align, but it exists. Some people use it for poetry, but this is another one you won't see very often. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_link.gif[/img] [center][size=5][color=darkblue] [b]URL hyperlinks[/center][left] [code][url=www1.flightrising.com]If you click this text, it will take you to the Flight Rising homepage![/url][/code] [url=www1.flightrising.com]If you click this text, it will take you to the Flight Rising homepage![/url] Hyperlinks are where things get a little complicated. A hyperlink (usally just called a link) is text you can click that takes you somewhere else on the internet. This site wouldn't function without hyperlinks, so it only makes sense that we can use them in our posts as well! For the purposes of this basics section, I'm only going to explain how to use the "Insert URL Link" toolbar button. Simply write out whatever it is you want your link to say, and then highlight it. Once it's highlighted, click the [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_link.gif[/img] button on the toolbar. A dialog window pops up asking you for a URL. At this point, you can paste a link to another thread or website, and then hit Enter or click "OK". This link will be applied to the highlighted text to automatically make your own hyperlink! It's also important to note that anything inside a 'URL' tag will be clickable. This includes formatted text, and even images! [b]Important side notes: In accordance with the Flight Rising Rules and Guidelines, you are not allowed to link to any other sites that break the rules here on Flight Rising. Read more on that [url=http://flightrising.com/main.php?p=wiki&article=50]here[/url].[/b] ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_image.gif[/img] [center][size=5][color=darkblue] [b]Images[/center][left] [code][img]http://www1.flightrising.com/rendern/portraits/272942/27294153p.png[/img][/code] [img]http://www1.flightrising.com/rendern/portraits/272942/27294153p.png[/img] Images work a lot like hyperlinks, except you don't have to highlight anything! Just click the [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_image.gif[/img] button, and another window will pop up. Simply paste the URL of an image in this window and hit Enter or click "OK" to link the image! If you have an image, but you're not sure how to get the URL from it, simply right click the image and a drop-down menu will appear. Click "Copy image address" (on Chrome. It may be slightly different for other browsers) and then you will have that images URL copied. Now all you have to do is paste it into the image pop-up window and you're all set! ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_olist.gif[/img] [size=5][color=darkblue] [b]Ordered Lists[/center][left] [code][LIST=1] [*] This is the first list item [*] This is the second list item [*] This is the third list item [/LIST][/code] [LIST=1] [*] This is the first list item [*] This is the second list item [*] This is the third list item [/LIST] There are two kinds of lists. In [i]ordered[/i] lists, every entry has a number to it. These are used like top-ten lists where the items have a definitive order. If you click the [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_olist.gif[/img] button, it will generate the list structure for you, and give you a single list item. Type your first list item after the '*', and it will appear with a "1." before it. After that, you must create additional items by copying the '*' on a new line. Every '*' must stay within the 'list' tag, and the 'LIST=1' must remain a '1', or else the list won't work. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_ulist.gif[/img] [center][size=5][color=darkblue] [b]Unordered lists[/center][left] [code][LIST] [*] This is a list item [*] This is another list item [*] This is yet another one [/LIST][/code] [LIST] [*] This is a list item [*] This is another list item [*] This is yet another one [/LIST] Unordered lists behave in the same way as Ordered lists, but they're not numbered and every list item is a bullet. The difference between Ordered lists and Unordered lists is the 'LIST' in the opening tag. 'LIST=1' refers to an ordered list, and 'LIST' is unordered. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_quote.gif[/img] [center][size=5][color=darkblue] [b]Quotes[/center][left] [code][quote]This is a quote![/quote][/code] [quote]This is a quote![/quote] [code][quote=EldritchCrowe]This is a quote that EldritchCrowe said![/quote][/code] [quote=EldritchCrowe]This is a quote that EldritchCrowe said![/quote] [code][quote name=EldritchCrowe date=2017-07-15 19:51:06]reserved[/quote][/code] [quote name=EldritchCrowe date=2017-07-15 19:51:06]reserved[/quote] Quotes look a lot like my Code Blocks here, so pay attention to the title of the text block to be able to see what's what. Quotes will display exactly as they're written, while Code Blocks will show the underlying code instead. This will become more apparent once Code Blocks are explained in the next section. There are three types of quotes. In the first, you simply have to click the [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_quote.gif[/img] button, and the 'quote' tags will appear. The box will only say "Quote:". If you expand the tag to say 'Quote=Person', it will then say "Person wrote:" at the top of the quote box. If you find a post you want to quote directly, you can simply click "Quote" at the top of that post. It will then take that quote and put it in your text editor at the bottom of the page! ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_code.png[/img] [center][size=5][color=darkblue] [b]Code blocks[/center] [code][code]This text is... This will be a hard one to demonstrate.[/code][/code] Okay, this one is hard to explain. If you click the [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_code.png[/img] button, it will create the 'code' tags. Any BBcode typed in these tags will not appear as BBcode. These code boxes are how I'm demonstrating the coding here, so they're a little tricky to explain within themselves. Play around with it a little bit, and I'm sure you'll catch on. ----- [center][img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_strike.png[/img] [center][size=5][color=darkblue] [b]Strikethrough[/center][left] [code][s]This code has been struck out![/s][/code] [s]This code has been struck out![/s] Last, but not least, Strikethrough. This is another simple one that just crosses out text. If you highlight text and click the [img]http://www1.flightrising.com/static/forum_icons/bbcode/forum_strike.png[/img] button, it will cross out the text. This is usually used if you want to remove something from a post, but you want to show it [i]used[/i] to be there. ----- So that covers all of the BBcode toolbar tags, but there are more! Some tags will have to be typed manually, and those will be covered in the next section. -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Basic tags

The easiest way to use BBcode tabs is with the BBcode toolbar. Whenever you're writing a post or bio, or anything that requires text, you'll see all of these buttons here:


forum_bold.png forum_italic.png forum_underline.png forum_indent.png forum_left.png forum_center.png forum_right.png forum_link.gif forum_image.gif forum_olist.gif forum_ulist.gif forum_quote.gif forum_code.png forum_strike.png


Clicking almost any of these buttons creates a set of BBcode tags wherever your cursor is. You can then click in between the tags and type away!
The only buttons that have special rules are the URL button (forum_link.gif) and the Image button (forum_image.gif), but we'll get to those soon.



forum_bold.png

Bold text
Code:
[b] This text is bold![/b]
This text is bold!



forum_italic.png

Italicized text
Code:
[i] This text is italicized![/i]
This text is italicized!



forum_underline.png

Underlined text
Code:
[u] This text is underlined![/u]
This text is underlined!


forum_indent.png

Indented paragraphs

"Indent" is an odd one, and you'll rarely use it. It simply tabs all of the text inside it to the right.
Code:
[indent]This entire paragraph is indented! The whole thing![/indent] This one, however, is not. How sad.
This entire paragraph is indented!
The whole thing!
This one, however, is not.
How sad.



forum_left.png

Left-aligned text
Code:
[left] This text is aligned to the left side of the post![/left]
This text is aligned to the left side of the post!

Okay, left-aligned is another weird one that you probably won't use very often, if at all. Since text sticks to the left side of your posts already, you almost never need 'left' It can be useful if you're trying to combine it with 'center' and 'right'.



forum_center.png

Centered text
Code:
[center] This text is centered![/center]
This text is centered!

I use 'center' a lot. It just puts your text right in the middle of the post.



forum_right.png

Right-aligned text
Code:
[right] This text is aligned to the right side of the post![/right]
This text is aligned to the right side of the post!

I don't quite understand the purpose of right-align, but it exists. Some people use it for poetry, but this is another one you won't see very often.

forum_link.gif

URL hyperlinks
Code:
[url=www1.flightrising.com]If you click this text, it will take you to the Flight Rising homepage![/url]
If you click this text, it will take you to the Flight Rising homepage!

Hyperlinks are where things get a little complicated. A hyperlink (usally just called a link) is text you can click that takes you somewhere else on the internet. This site wouldn't function without hyperlinks, so it only makes sense that we can use them in our posts as well!

For the purposes of this basics section, I'm only going to explain how to use the "Insert URL Link" toolbar button.

Simply write out whatever it is you want your link to say, and then highlight it. Once it's highlighted, click the forum_link.gif button on the toolbar. A dialog window pops up asking you for a URL. At this point, you can paste a link to another thread or website, and then hit Enter or click "OK". This link will be applied to the highlighted text to automatically make your own hyperlink! It's also important to note that anything inside a 'URL' tag will be clickable. This includes formatted text, and even images!

Important side notes: In accordance with the Flight Rising Rules and Guidelines, you are not allowed to link to any other sites that break the rules here on Flight Rising. Read more on that here.



forum_image.gif

Images
Code:
[img]http://www1.flightrising.com/rendern/portraits/272942/27294153p.png[/img]
27294153p.png

Images work a lot like hyperlinks, except you don't have to highlight anything! Just click the forum_image.gif button, and another window will pop up. Simply paste the URL of an image in this window and hit Enter or click "OK" to link the image!

If you have an image, but you're not sure how to get the URL from it, simply right click the image and a drop-down menu will appear. Click "Copy image address" (on Chrome. It may be slightly different for other browsers) and then you will have that images URL copied. Now all you have to do is paste it into the image pop-up window and you're all set!



forum_olist.gif

Ordered Lists
Code:
[LIST=1] [*] This is the first list item [*] This is the second list item [*] This is the third list item [/LIST]
  1. This is the first list item
  2. This is the second list item
  3. This is the third list item

There are two kinds of lists. In ordered lists, every entry has a number to it. These are used like top-ten lists where the items have a definitive order.

If you click the forum_olist.gif button, it will generate the list structure for you, and give you a single list item. Type your first list item after the '*', and it will appear with a "1." before it. After that, you must create additional items by copying the '*' on a new line. Every '*' must stay within the 'list' tag, and the 'LIST=1' must remain a '1', or else the list won't work.



forum_ulist.gif

Unordered lists
Code:
[LIST] [*] This is a list item [*] This is another list item [*] This is yet another one [/LIST]
  • This is a list item
  • This is another list item
  • This is yet another one

Unordered lists behave in the same way as Ordered lists, but they're not numbered and every list item is a bullet. The difference between Ordered lists and Unordered lists is the 'LIST' in the opening tag. 'LIST=1' refers to an ordered list, and 'LIST' is unordered.



forum_quote.gif

Quotes
Code:
[quote]This is a quote![/quote]
Quote:
This is a quote!


Code:
[quote=EldritchCrowe]This is a quote that EldritchCrowe said![/quote]
EldritchCrowe wrote:
This is a quote that EldritchCrowe said!


Code:
[quote name=EldritchCrowe date=2017-07-15 19:51:06]reserved[/quote]
EldritchCrowe wrote on 2017-07-15:
reserved

Quotes look a lot like my Code Blocks here, so pay attention to the title of the text block to be able to see what's what. Quotes will display exactly as they're written, while Code Blocks will show the underlying code instead. This will become more apparent once Code Blocks are explained in the next section.

There are three types of quotes.
In the first, you simply have to click the forum_quote.gif button, and the 'quote' tags will appear. The box will only say "Quote:".

If you expand the tag to say 'Quote=Person', it will then say "Person wrote:" at the top of the quote box.

If you find a post you want to quote directly, you can simply click "Quote" at the top of that post. It will then take that quote and put it in your text editor at the bottom of the page!



forum_code.png

Code blocks
Code:
[code]This text is... This will be a hard one to demonstrate.
[/code]

Okay, this one is hard to explain. If you click the forum_code.png button, it will create the 'code' tags. Any BBcode typed in these tags will not appear as BBcode. These code boxes are how I'm demonstrating the coding here, so they're a little tricky to explain within themselves. Play around with it a little bit, and I'm sure you'll catch on.



forum_strike.png

Strikethrough
Code:
[s]This code has been struck out![/s]
This code has been struck out!

Last, but not least, Strikethrough. This is another simple one that just crosses out text. If you highlight text and click the forum_strike.png button, it will cross out the text. This is usually used if you want to remove something from a post, but you want to show it used to be there.




So that covers all of the BBcode toolbar tags, but there are more! Some tags will have to be typed manually, and those will be covered in the next section.


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Manual Tags[/center] As useful as the BBcode toolbar is, there are some tags it just doesn't provide for us. These tags must be manually typed without the use of a button. Fear not! It's not all that bad! Some people (myself included) actually prefer typing out BBcode manually, even when presented with a toolbar! Play around with it and see what works for you [center][size=5][color=darkblue] [b]Color[/center] [code][color=red] This text is red![/color][/code] [color=red] This text is red![/color] [code][color=b819d1] This text is the color #b819d1![/color][/code] [color=b819d1] This text is the color #b819cd1![/color] [code][color=transparent] This text is transparent![/color][/code] [color=transparent] This text is transparent![/color] (You'll have to highlight transparent text to read it) There are two ways to use color: pre-determined color keywords, or hex codes. There are plenty of lists of supported color keywords out there, but just about anything you can imagine will work! try red, black, tan, darkblue, lightgreen, etc. Transparent works as a keyword, too! Why would you want to do that, you ask? For the most part, you'll never have to use it. I'll explain a few uses for it it later in this guide. If you don't know anything about hex colors, you can still use them! Use an online tool [url=http://www.hexcolortool.com/]like this one[/url] to create your own color, and then simply copy and paste the hex code into the BBcode tag! All you need to look for is the six-character code that starts with #. It doesn't even matter if you include the # in the BBcode tag! ----- [center][size=5][color=darkblue] [b]Text size[/center] [code][size=0] This text is small![/size][/code] [size=0] This text is small![/size] [code][size=4] This text is medium-sized![/size][/code] [size=4] This text is medium-sized![/size] [code][size=7] This text is big![/size][/code] [size=7] This text is big![/size] While the BBcoding on other sites may vary, Flight Rising has 7 different text sizes ranging from 0-7. 'size=0' will make text almost unreadable, while 'size=7' will make the text as big as possible! A word of warning about sizes: If you don't close your size tag, and you use a different size tag, the first one will have an effect on the second! You can vary sizes even more if you combine size tags, but it's much simpler to stick to one 'size' at a time, and close every one after it's done. ----- [center][size=5][color=darkblue] [b]Fonts[/center] [code][font="Comic Sans MS"] This text is trash![/font][/code] [font="Comic Sans MS"] This text is trash![/font] Okay, while it is definitely possible to use different fonts here on Flight Rising, [i]I do not recomend it at all[/i]. Fonts will only work for people who have that font installed on their computer. Otherwise, it won't show up at all. Ideally, you want everyone to see the same thing, regardless of what fonts they have installed. I ask that if you do use fonts in your posts, please keep them simple. Use "Arial" and "Times News Roman"; the ones that almost everyone has installed. ----- [center][size=5][color=darkblue] [b]Rules / Dividers[/center] [code][rule] This text has dividers above and below it! ----- [/code] [rule] This text has dividers above and below it! ----- They're called "rules", but I prefer "divider". Whichever works. The 'rule' tag is one of the few that doesn't require a closing tag. one 'rule' creates a line, and that's all it needs. Alternatively, you can use 5 dashes for the same effect. If you're trying to create space above or below a divider, you may need more than one empty line to space them out a little bit more! ----- [center][size=5][color=darkblue] [b]Subscript & Superscript[/center] [code][sub]This text is a subscript,[/sub] this text is standard, [sup] and this text is a superscript![/sup][/code] [sub]This text is a subscript,[/sub] this text is standard, [sup] and this text is a superscript![/sup] ----- [center][size=5][color=darkblue] [b]Spoilers[/center] [code][spoiler]This text has Game of Thrones season 7 spoilers! Oh no! [/spoiler][/code] [spoiler]This text has Game of Thrones season 7 spoilers! Oh no! [/spoiler] What's that? A black box? Click and drag over the black box to highlight the text and reveal the spoiler! Alternatively, try clicking 2 or 3 times in the box. It should also highlight the spoiler. ----- [center][size=5][color=darkblue] [b]Columns[/center] [code][columns] This text is in column #1! This text is in column #1! This text is in column #1! [nextcol] This text is in column #2! This text is in column #2! This text is in column #2! [nextcol] This text is in column #3! This text is in column #3! This text is in column #3! [/columns][/code] [columns] This text is in column #1! This text is in column #1! This text is in column #1! [nextcol] This text is in column #2! This text is in column #2! This text is in column #2! [nextcol] This text is in column #3! This text is in column #3! This text is in column #3! [/columns] Columns can get tricky fast, so I recomend spacing the columns out and having a new line for each one. I use these [i]all the time,[/i] and I'll get into some detailed tricks later in the guide. For now, just know this is how to create basic columns and you'll be all set. ----- [center][size=5][color=darkblue] [b]Small Dragon Images[/center] Okay, this one isn't [i]exactly[/i] a tag, but it's really useful. You can edit an "img" tag of a dragon to make it really small, like this: [img]http://flightrising.com/rendern/avatars/325407/32540614.png[/img] Here's what a regular dragon image looks like: [code][img]http://flightrising.com/rendern/350/325407/32540614_350.png[/img][/code] And here's the edited one: [code][img]http://flightrising.com/rendern/avatars/325407/32540614.png[/img][/code] If you look closely, you have to make [i]two[/i] changes to the URL. [LIST=1] [*] Change the first "350" in the URL to "avatars" [*] Remove the second "_350" (include the underscore!) at the end of the URL [/LIST] *Thanks to @Swirlixx for this one. I previously thought this was impossible! ----- That's it! If you've reached this point, you know how to use every standard BBcode tag! There are only a few more to learn, and they're all ones specific to Flight Rising. Learn about these Flight Rising only BBcode tags in the next lesson just below! -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Manual Tags

As useful as the BBcode toolbar is, there are some tags it just doesn't provide for us. These tags must be manually typed without the use of a button. Fear not! It's not all that bad! Some people (myself included) actually prefer typing out BBcode manually, even when presented with a toolbar! Play around with it and see what works for you

Color
Code:
[color=red] This text is red![/color]
This text is red!
Code:
[color=b819d1] This text is the color #b819d1![/color]
This text is the color #b819cd1!
Code:
[color=transparent] This text is transparent![/color]
This text is transparent!
(You'll have to highlight transparent text to read it)

There are two ways to use color: pre-determined color keywords, or hex codes.

There are plenty of lists of supported color keywords out there, but just about anything you can imagine will work! try red, black, tan, darkblue, lightgreen, etc. Transparent works as a keyword, too! Why would you want to do that, you ask? For the most part, you'll never have to use it. I'll explain a few uses for it it later in this guide.

If you don't know anything about hex colors, you can still use them! Use an online tool like this one to create your own color, and then simply copy and paste the hex code into the BBcode tag! All you need to look for is the six-character code that starts with #. It doesn't even matter if you include the # in the BBcode tag!




Text size
Code:
[size=0] This text is small![/size]
This text is small!

Code:
[size=4] This text is medium-sized![/size]
This text is medium-sized!

Code:
[size=7] This text is big![/size]
This text is big!

While the BBcoding on other sites may vary, Flight Rising has 7 different text sizes ranging from 0-7. 'size=0' will make text almost unreadable, while 'size=7' will make the text as big as possible!

A word of warning about sizes: If you don't close your size tag, and you use a different size tag, the first one will have an effect on the second! You can vary sizes even more if you combine size tags, but it's much simpler to stick to one 'size' at a time, and close every one after it's done.




Fonts
Code:
[font="Comic Sans MS"] This text is trash![/font]
This text is trash!

Okay, while it is definitely possible to use different fonts here on Flight Rising, I do not recomend it at all. Fonts will only work for people who have that font installed on their computer. Otherwise, it won't show up at all. Ideally, you want everyone to see the same thing, regardless of what fonts they have installed. I ask that if you do use fonts in your posts, please keep them simple. Use "Arial" and "Times News Roman"; the ones that almost everyone has installed.




Rules / Dividers
Code:
[rule] This text has dividers above and below it! -----

This text has dividers above and below it!

They're called "rules", but I prefer "divider". Whichever works.

The 'rule' tag is one of the few that doesn't require a closing tag. one 'rule' creates a line, and that's all it needs. Alternatively, you can use 5 dashes for the same effect. If you're trying to create space above or below a divider, you may need more than one empty line to space them out a little bit more!




Subscript & Superscript
Code:
[sub]This text is a subscript,[/sub] this text is standard, [sup] and this text is a superscript![/sup]
This text is a subscript, this text is standard, and this text is a superscript!




Spoilers
Code:
[spoiler]This text has Game of Thrones season 7 spoilers! Oh no! [/spoiler]
This text has Game of Thrones season 7 spoilers! Oh no!

What's that? A black box?
Click and drag over the black box to highlight the text and reveal the spoiler! Alternatively, try clicking 2 or 3 times in the box. It should also highlight the spoiler.




Columns
Code:
[columns] This text is in column #1! This text is in column #1! This text is in column #1! [nextcol] This text is in column #2! This text is in column #2! This text is in column #2! [nextcol] This text is in column #3! This text is in column #3! This text is in column #3! [/columns]
This text is in column #1!
This text is in column #1!
This text is in column #1!
This text is in column #2!
This text is in column #2!
This text is in column #2!
This text is in column #3!
This text is in column #3!
This text is in column #3!

Columns can get tricky fast, so I recomend spacing the columns out and having a new line for each one. I use these all the time, and I'll get into some detailed tricks later in the guide. For now, just know this is how to create basic columns and you'll be all set.



Small Dragon Images
Okay, this one isn't exactly a tag, but it's really useful. You can edit an "img" tag of a dragon to make it really small, like this:

32540614.png

Here's what a regular dragon image looks like:
Code:
[img]http://flightrising.com/rendern/350/325407/32540614_350.png[/img]
And here's the edited one:
Code:
[img]http://flightrising.com/rendern/avatars/325407/32540614.png[/img]

If you look closely, you have to make two changes to the URL.
  1. Change the first "350" in the URL to "avatars"
  2. Remove the second "_350" (include the underscore!) at the end of the URL

*Thanks to @Swirlixx for this one. I previously thought this was impossible!



That's it! If you've reached this point, you know how to use every standard BBcode tag! There are only a few more to learn, and they're all ones specific to Flight Rising. Learn about these Flight Rising only BBcode tags in the next lesson just below!


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Flight Rising Tags[/center] These are a couple of BBcode tags/functions that only work here on Flight Rising. With these, you can call over certain users, display items, and even show off dragons! ----- [center][size=5][color=darkblue] [b]Pings[/center] [code]@EldritchCrowe[/code] @EldritchCrowe This may or may not be BBcode, but it's incredibly useful for getting someone's attention! If you type someone's username after the @, they will get a notification that they've been pinged, and be able to go straight to your ping! Isn't that cool, @deanazazel? ----- [center][size=5][color=darkblue] [b]Player icons[/center] [code][user=EldritchCrowe][/code] [user=EldritchCrowe] This is one of those tags that don't need a closing tag. Simply put a player's username in the quotation marks, and it creates an image of their user icon, and you can even click it to go straight to their profile! ----- [center][size=5][color=darkblue] [b]Items[/center] [code][item=White Quinoa][/code] [item=White Quinoa] Another one that doesn't need a closign tag. put any item's name in the quotation marks and you'll be able to see it, and even see the item details and hover-text! Try it out! What an item description on that one! [size=1]I'm sorry[/size] Side note: this also works the exact same way with skins! Just make sure to include "Skin:" or "Accent:"! [code][item=Skin: Crowned Bone Priest][/code] [code][item=Accent: Shadow Within][/code] [item=Skin: Crowned Bone Priest] [item=Accent: Shadow Within] Alternatively, you can link to skins and accents with the 'skin' tag. Hover over the skin above. At the bottom, you'll see a skin ID. If you use that skin ID, you can use the 'skin' tag! Like so: [code][skin=8956][/code] [skin=8956] ----- [center][size=5][color=darkblue] [b]Outfits[/center] With the addition of the dressing room, Flight Rising also added the 'outfit' tag for it! [code][outfit=104626][/code] [outfit=104626] While in the dressing room, if you click the share button: [img]http://www1.flightrising.com/static/layout/dressingroom/button_shareoutfit.png[/img] A window will pop up with links to share the outfit. If you click the "Copy to clipboard" button ([img]http://www1.flightrising.com/static/layout/copy.png[/img]) it will copy the image for you, so you only have to paste it! If you click the button next to "URL", it will give you a link to share. Clicking the link will bring you right to the page for the outfit. Just remember that you will have to use 'url' tags to link on the forums! If you click the button next to "Widget", you will get BBcode to make a display like the one I used above. Clicking the preview will still bring you to the page for the outfit though! ----- [center][size=5][color=darkblue] [b]Dragons[/center] [code][url=http://flightrising.com/main.php?dragon=27294153] [img]http://flightrising.com/rendern/350/272942/27294153_350.png[/img] [/url][/code] [url=http://flightrising.com/main.php?dragon=27294153] [img]http://flightrising.com/rendern/350/272942/27294153_350.png[/img] [/url] This one is really useful. If you go to a dragon's page, you'll see a "generate code" button under their details. Click it, and a box will pop up with the BBcode to link to that dragon! Highlight everything under "BBcode:" and paste it into a thread. You'll get an image of the dragon, and if you click it, you're brought straight to that dragon's page! Later on, we'll learn how to use these to create detailed description boxes for dragons for use in sales threads. ----- You've made it! Now you will be able to use any BBcode tag available to us here on Flight Rising! If you'd like, use the comments here to play around with your newfound coding knowledge! -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Flight Rising Tags

These are a couple of BBcode tags/functions that only work here on Flight Rising. With these, you can call over certain users, display items, and even show off dragons!




Pings
Code:
@EldritchCrowe

This may or may not be BBcode, but it's incredibly useful for getting someone's attention! If you type someone's username after the @, they will get a notification that they've been pinged, and be able to go straight to your ping! Isn't that cool, @deanazazel?




Player icons
Code:
[user=EldritchCrowe]


This is one of those tags that don't need a closing tag. Simply put a player's username in the quotation marks, and it creates an image of their user icon, and you can even click it to go straight to their profile!




Items
Code:
[item=White Quinoa]


Another one that doesn't need a closign tag. put any item's name in the quotation marks and you'll be able to see it, and even see the item details and hover-text! Try it out! What an item description on that one!
I'm sorry

Side note: this also works the exact same way with skins! Just make sure to include "Skin:" or "Accent:"!
Code:
[item=Skin: Crowned Bone Priest]
Code:
[item=Accent: Shadow Within]



Alternatively, you can link to skins and accents with the 'skin' tag. Hover over the skin above. At the bottom, you'll see a skin ID. If you use that skin ID, you can use the 'skin' tag! Like so:
Code:
[skin=8956]




Outfits

With the addition of the dressing room, Flight Rising also added the 'outfit' tag for it!
Code:
[outfit=104626]
Bookmark


While in the dressing room, if you click the share button:
button_shareoutfit.png
A window will pop up with links to share the outfit. If you click the "Copy to clipboard" button (copy.png) it will copy the image for you, so you only have to paste it!

If you click the button next to "URL", it will give you a link to share. Clicking the link will bring you right to the page for the outfit. Just remember that you will have to use 'url' tags to link on the forums!

If you click the button next to "Widget", you will get BBcode to make a display like the one I used above. Clicking the preview will still bring you to the page for the outfit though!




Dragons
Code:
[url=http://flightrising.com/main.php?dragon=27294153] [img]http://flightrising.com/rendern/350/272942/27294153_350.png[/img] [/url]

27294153_350.png


This one is really useful. If you go to a dragon's page, you'll see a "generate code" button under their details. Click it, and a box will pop up with the BBcode to link to that dragon! Highlight everything under "BBcode:" and paste it into a thread. You'll get an image of the dragon, and if you click it, you're brought straight to that dragon's page! Later on, we'll learn how to use these to create detailed description boxes for dragons for use in sales threads.




You've made it! Now you will be able to use any BBcode tag available to us here on Flight Rising! If you'd like, use the comments here to play around with your newfound coding knowledge!


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Nesting & Readability[/center] This section will be dedicated to learning good habits for your code, and keeping every strand of hair firmly rooted in your head, free from stressful hair-pulling. Unlesss you're bald, but you should still enjoy this section anyway. ----- [center][size=5][color=darkblue] [b]Nesting[/center] "Nesting" tags just means that you're putting tags inside of other tags. You'll use these principles any time you need to add more than one kind of formatting to something, like so: [code][b] [color=red] This text is bold and red! [/color] [/b] [/code] [color=red] This text is bold and red! [/color] [/b] When nesting, it's important to close the tags in order. Let's use the code block above as an example. See how the 'color' tag is entirely inside the 'bold' tag? That means the 'color' tag is [i]nested[/i] inside the 'bold' one. Alternatively, if your closing tags are mixed together in no particular order, these tags are "tangled". Technically speaking, there's nothing wrong with tangled tags. They function just as well as nested tags. [i]However[/i], if your tags aren't nested properly, it becomes increasingly difficult to make changes. Think of your tags like boxes. The 'color' box is entirely inside of the 'bold' box, and in the smallest box, you find your text. What if you tried to close a big box, and [i]then[/i] tried closing a little box inside of that one? You'd probably have to break some cardboard, and then things get messy. Nobody likes broken cardboard. ----- [center][size=5][color=darkblue] [b]Full Closes[/center] So, what if you had your text in 5 different boxes, and you just closed the big box. Would the text still be [i]in[/i] a fully-contained box? Let's find out: [center] [b] [i] [color=blue] [size=5] This text is overloaded! [/center] This text is outside the big box. This is what I'm calling a "full close". A full close just means that you only have to close your first tag, and all of the other ones nested inside of it close as well. There are actually four ways to make a force close: [LIST=1] [*]Closing a larger tag [*]Rules [*]New columns [*]New list items [/list] A good rule of thumb is that if your code is separated in any way, it will automatically close. Dividing your post with a rule, starting a new column, or starting a new list item will all section off your pieces of code from one another. If you're not really sure whether or not your tag is being closed, test it out by hitting "Preview" and seeing what needs to be closed. ----- [center][size=5][color=darkblue] [b]Code Readability[/center] After this lesson, your code will be getting a lot more complex. In order to maintain control of your code and not get confused, you'll need to get into good habits and make your code as easy to read as possible. Take a look at both of these code blocks: [code][columns]Column 1[nextcol]Column 2[/columns][/code] [code][columns] Column 1 [nextcol] Column 2 [/columns][/code] ----- One of these code blocks is way more compact than the other, but they both look [i]identical[/i] when they're used in a post. It's important to use spaces and new lines liberally to give your code room to breathe. Nothing is worse than trying to edit tangled and cramped coding. All in all, everyone is going to have different ways to organize their code. As long as it's easy to tell what's going on, you're doing great. I like to put most of my coding on one line, and then have the text on the next line. Usually I don't put spaces between my tags, but it could help. Play around with it a little bit and find what works for you. -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Nesting & Readability

This section will be dedicated to learning good habits for your code, and keeping every strand of hair firmly rooted in your head, free from stressful hair-pulling.

Unlesss you're bald, but you should still enjoy this section anyway.




Nesting

"Nesting" tags just means that you're putting tags inside of other tags. You'll use these principles any time you need to add more than one kind of formatting to something, like so:
Code:
[b] [color=red] This text is bold and red! [/color] [/b]

This text is bold and red!

When nesting, it's important to close the tags in order. Let's use the code block above as an example. See how the 'color' tag is entirely inside the 'bold' tag? That means the 'color' tag is nested inside the 'bold' one. Alternatively, if your closing tags are mixed together in no particular order, these tags are "tangled".

Technically speaking, there's nothing wrong with tangled tags. They function just as well as nested tags. However, if your tags aren't nested properly, it becomes increasingly difficult to make changes. Think of your tags like boxes. The 'color' box is entirely inside of the 'bold' box, and in the smallest box, you find your text.

What if you tried to close a big box, and then tried closing a little box inside of that one? You'd probably have to break some cardboard, and then things get messy.

Nobody likes broken cardboard.




Full Closes

So, what if you had your text in 5 different boxes, and you just closed the big box. Would the text still be in a fully-contained box? Let's find out:
This text is overloaded!
This text is outside the big box.

This is what I'm calling a "full close". A full close just means that you only have to close your first tag, and all of the other ones nested inside of it close as well. There are actually four ways to make a force close:
  1. Closing a larger tag
  2. Rules
  3. New columns
  4. New list items

A good rule of thumb is that if your code is separated in any way, it will automatically close. Dividing your post with a rule, starting a new column, or starting a new list item will all section off your pieces of code from one another. If you're not really sure whether or not your tag is being closed, test it out by hitting "Preview" and seeing what needs to be closed.



Code Readability

After this lesson, your code will be getting a lot more complex. In order to maintain control of your code and not get confused, you'll need to get into good habits and make your code as easy to read as possible. Take a look at both of these code blocks:
Code:
[columns]Column 1[nextcol]Column 2[/columns]
Code:
[columns] Column 1 [nextcol] Column 2 [/columns]




One of these code blocks is way more compact than the other, but they both look identical when they're used in a post. It's important to use spaces and new lines liberally to give your code room to breathe. Nothing is worse than trying to edit tangled and cramped coding.

All in all, everyone is going to have different ways to organize their code. As long as it's easy to tell what's going on, you're doing great. I like to put most of my coding on one line, and then have the text on the next line. Usually I don't put spaces between my tags, but it could help. Play around with it a little bit and find what works for you.


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Advanced Columns[/center] Alright, this is it. Columns are easily the most complicated tag to work with, but they're also the most powerful. This will probably be the hardest part of my guide. Stick with it, be patient, and your columns will set you apart from all the other BBcoders out there. ----- [center][size=5][color=darkblue] [b]Making space[/center] If your code is all cluttered together, you'll lose whatever it is you're doing. The most important thing to remember is that you have to be in control of your code, or else it will become a mess quickly. Take a look at these two code blocks: ----- [code][columns]Column 1[nextcol]Column 2[nextcol]Column 3[/columns][/code] [code][columns] Column 1 [nextcol] Column 2 [nextcol] Column 3 [/columns][/code] ----- Of course, one of these sets of columns is way easier to read than the other. That being said, they both look identical when posted. I know I said this in the previous lesson, but it's worth repeating. If you take one thing away from this entire guide, it's this: [center][size=7][b]Always leave enough space to make your code readable!!![/center] This is the #1 way to improve your coding and to make the entire process easier. This will hold especially true in this lesson. ----- [center][size=5][color=darkblue] [b]Aligning Columns[/center] By default, a column's text will be vertically centered based on the entire 'columns' tag. This is much easier to demonstrate than explain, so I'll show you like this: [columns] Column 1 [nextcol] Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 [nextcol] Column 3 Column 3 Column 3 Column 3 Column 3 [/columns] Even if Column 1 is only one line, it will take up as much space as column 2. But what if we want to align all of the text to the top and have 3 top-down style lists? That part, luckily for us, is pretty easy. Blank lines are still take up space as a line does, so that means we just have to make the number of rows in each column the same! Like this: [code][columns] Column 1 [nextcol] Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 [nextcol] Column 3 Column 3 Column 3 Column 3 Column 3 [/columns][/code] [columns] Column 1 [nextcol] Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 [nextcol] Column 3 Column 3 Column 3 Column 3 Column 3 [/columns] Doing this will make tables [i]way[/i] easier to create! It is important to note, however, that I do include a blank line at the end of every column. I do that to separate the columns, but that also means every column has that one blank space at the bottom. Keep that in mind if your lines are offset by a small amount! ----- [center][size=5][color=darkblue] [b]Formatting a single line[/center] Keeping alignment in mind, let's talk about using tags to format the text in each column. If you're trying to keep your table aligned, you'll have to apply the same 'size' tags to your text in each column. If you re-size text in one column but not another, you'll get this: [columns] [size=5]Column 1[/size] Column 1 Column 1 Column 1 Column 1 [nextcol] [size=1]Column 2[/size] Column 2 Column 2 Column 2 Column 2 [/columns] This is an extreme example, but it's only to show how column offsets can occur. It's also important to note that you [i]must[/i] code your lines on the same line as the text. I've mentioned putting code on one line, hitting enter, and then having the text on the next line, but that will create an extra line. Do this: [code][size=5] [b] Column header [/size][/code] and not this: [code][size=5][b] Column header [/size][/code] ----- [center][size=5][color=darkblue] [b]Formatting an entire column[/center] Sometimes, your job is easier than formatting a single line. Sometimes we get lucky and we can paint with broad strokes. When that's the case, you can keep the entire column organized extremely easily by putting all of the formatting on the same line as the 'columns' tag, like so: [code][columns][size=4][color=blue] This text is all formatted! Every line! [nextcol] This column isn't formatted! Remeber, 'nextcol' breaks all tags! [/columns][/code] [columns][size=4][color=blue] This text is all formatted! Every line! [nextcol][i] This column is formatted separately! Remeber, 'nextcol' breaks all tags! [/columns] This is made even easier by the fact that 'nextcol' works as a full close, and you don't need to close the tags at all, as long as the entire column is being formatted! ----- [center][size=5][color=darkblue] [b]Column Width[/center] Usually, columns are only as wide as they need to be. This can cause text from different columns to push right up against each other. Luckily, there's one easy way to widen your columns to give them as much space as you want! Remember the 'color=transparent' from all the way in the beginning? If we create text inside of a column and then make it transparent, we can't see the text, but the column still becomes wide enough to read it! See these two code blocks: [code][columns] Column 1 [nextcol] Column 2 [/columns][/code] [columns] Column 1 [nextcol] Column 2 [/columns] [code][columns][color=transparent] _______________[/color] Column 1 [nextcol][color=transparent] _______________[/color] Column 2 [/columns][/code] [columns][color=transparent] _______________[/color] Column 1 [nextcol][color=transparent] _______________[/color] Column 2 [/columns] You'll notice in the second one, we can't see the long underlines, but they're actually still there! The column becomes exactly as wide as your invisible text! This is an incredibly powerful technique, but it comes with some added complexity. It's not necessary to use underscores, but this is the simplest way to do it for me. If you use another line for the underscores, you can see how much extra room your underline will give you! If you text extends past the underline, you can extend the underscore, or you may have to break your text and create a new line manually, like so: [code][columns][color=transparent] ____________________[/color] This text is longer than the underscore! Oh no! [nextcol] This column is only as wide as this text. [/columns][/code] [columns][color=transparent] ____________________[/color] This text is longer than the underscore! Oh no! [nextcol] This column is only as wide as this text. [/columns] This creates two problems: The underscore becomes pointless, and the column becomes as wide as the text. Also, the underline created a new line, so we have to adjust for that in the other column. Here that is, adjusted to fix those two errors: [code][columns][color=transparent] ____________________[/color] This text is longer than the underscore! Oh no! [nextcol] This column is only as wide as this text. [/columns][/code] [columns][color=transparent] ____________________[/color] This text is longer than the underscore! Oh no! [nextcol] This column is only as wide as this text. [/columns] Pay attention to a few things here: I had to adjust the number of lines in the second column to make up for the underline, but also to make up for breaking column 1's sentence into more lines too! I broke the sentence into a new line whenever it was going to extend past the underline. Putting the underline where I did makes it incredibly easy to figure out where you'll need to break your text! Using these column spacers is a good way to control the size of your columns when you otherwise wouldn't be able to. It takes a little extra work, but you can use them to manipulate columns in any way you want! If you wanted to get creative, you could even hide messages in your spacers, since [i]any[/i] text can be turned transparent! Just remember: click and drag, and you can see the transparent text, just like with a 'spoiler' tag... c; [color=transparent]Like this! You caught on fast![/color] ----- [center][size=5][color=darkblue] [b]Nesting Columns[/center] Okay, this part may be the most confusing part in the guide, so be prepared. Take your time, and don't continue until you're confident you [i]get it[/i]. Columns can be nested just like any other tag, but this gets a little bit confusing. I'm going to make a section for a dragon bio to explain: -----[columns] [columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns] ----- [columns] [color=transparent]______________[/color] + Trait 1 + Trait 2 [nextcol] [color=transparent]______________[/color] - Trait 3 - Trait 4 [/columns] [nextcol] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed rhoncus nisi. Ut vel mollis ipsum. Ut tristique molestie eros, a viverra diam auctor vel. Fusce a ligula tincidunt, feugiat ex sed, rutrum nulla. Sed euismod, urna pulvinar tincidunt ornare, metus nunc hendrerit sem, sit amet laoreet metus odio sit amet arcu. Phasellus sed vestibulum nisi, ac rutrum purus. Suspendisse euismod molestie sagittis. Cras dapibus, lectus sit amet auctor bibendum, nisl leo ullamcorper justo, a pulvinar massa purus sit amet erat. Nullam eget fermentum sem. Nunc pretium dui eget quam imperdiet iaculis. Donec vulputate velit sit amet interdum mollis. Nunc ut varius turpis, ac mattis metus. [/columns]----- This might look a little daunting, so I'm going to try to section it off in Paint first, and we'll do one set of columns at a time. [img]http://i.imgur.com/YLVmHLs.png[/img] The [color=red]red[/color] sections are the first column. The biggest one. In the first red column, we have the [color=blue]blue[/color] columns, and under that, (still inside [color=red]red[/color] but outside of [color=blue]blue[/color]) we have the [color=green]green columns[/color]. We'll start from the inside and work our way out, doing them one at a time. The green columns are simple enough; two columns with equal spacing to give enough room for character traits. [code][columns] [color=transparent]______________[/color] + Trait 1 + Trait 2 [nextcol] [color=transparent]______________[/color] - Trait 3 - Trait 4 [/columns][/code] In the blue columns, I used the "copy image address" on an image of my dragon's head. That was the first blue column. In the second one, I just spaced out enough room for a name and a role for the dragon in its clan: [code][columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns][/code] And then in [color=red]red[/color], I simply put the [color=blue]blue[/color] and [color=green]green[/color] columns inside the first column, and then used some filler text for a backstory or bio in the second column. Since the [color=blue]blue[/color] column was spaced enough for itself, the [color=red]red[/color] columns don't need any additional spacing. So, let's create the [color=red]red[/color] column: [code][columns] [nextcol] -- Filler text goes here! -- [/columns][/code] Easy enough, right? Now we just have to copy/paste our [color=blue]blue[/color] column into [color=red]red's[/color] first column: [code][columns] [columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns] ----- [nextcol] -- Filler text goes here! -- [/columns][/code] I also added a rule to separate the [color=blue]blue[/color] columns from the [color=green]green[/color] ones! Remeber that this rule has to exist in the first [color=red]red[/color] column! After that, we can simply paste the [color=green]green[/color] column just below the [color=blue]blue[/color] one, like so: [code][columns] [columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns] ----- [columns] [color=transparent]______________[/color] + Trait 1 + Trait 2 [nextcol] [color=transparent]______________[/color] - Trait 3 - Trait 4 [/columns] [nextcol] -- Filler text goes here! -- [/columns][/code] And that's all it takes! Remember to piece your code together one 'columns' tag at a time to keep things simple. It's also important to note that since every set of columns is the same tag, you will have to nest them properly. The code knows to close [i]the most recently opened 'columns' tag[/i] when you try to close one, so make sure they're nested properly! ----- If you've made it this far, congratulations! I mean it, really. This can get really complicated really fast, so you're doing good for yourself. If you're still not there yet, try to practice in the comments here. Click "Preview" a lot to see how you're doing, and do little pieces at a time. Keep going piece by piece and you're sure to make whatever you put your mind to! The next few sections are up in the air right now. They could be anything. If you're reading this, my guide isn't complete yet, and I'd like feedback. Am I an awful teacher? Did I miss something? Please let me know if I need to clarify anything in the guide! I'd love to see what kinds of things you're making with this guide, so feel free to show off here! -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Advanced Columns

Alright, this is it. Columns are easily the most complicated tag to work with, but they're also the most powerful. This will probably be the hardest part of my guide. Stick with it, be patient, and your columns will set you apart from all the other BBcoders out there.




Making space

If your code is all cluttered together, you'll lose whatever it is you're doing. The most important thing to remember is that you have to be in control of your code, or else it will become a mess quickly. Take a look at these two code blocks:



Code:
[columns]Column 1[nextcol]Column 2[nextcol]Column 3[/columns]
Code:
[columns] Column 1 [nextcol] Column 2 [nextcol] Column 3 [/columns]




Of course, one of these sets of columns is way easier to read than the other. That being said, they both look identical when posted.

I know I said this in the previous lesson, but it's worth repeating. If you take one thing away from this entire guide, it's this:

Always leave enough space to make your code readable!!!


This is the #1 way to improve your coding and to make the entire process easier. This will hold especially true in this lesson.




Aligning Columns

By default, a column's text will be vertically centered based on the entire 'columns' tag. This is much easier to demonstrate than explain, so I'll show you like this:

Column 1
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 3
Column 3
Column 3
Column 3
Column 3

Even if Column 1 is only one line, it will take up as much space as column 2. But what if we want to align all of the text to the top and have 3 top-down style lists? That part, luckily for us, is pretty easy.

Blank lines are still take up space as a line does, so that means we just have to make the number of rows in each column the same! Like this:
Code:
[columns] Column 1 [nextcol] Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 Column 2 [nextcol] Column 3 Column 3 Column 3 Column 3 Column 3 [/columns]
Column 1









Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 2
Column 3
Column 3
Column 3
Column 3
Column 3







Doing this will make tables way easier to create! It is important to note, however, that I do include a blank line at the end of every column. I do that to separate the columns, but that also means every column has that one blank space at the bottom. Keep that in mind if your lines are offset by a small amount!




Formatting a single line


Keeping alignment in mind, let's talk about using tags to format the text in each column.

If you're trying to keep your table aligned, you'll have to apply the same 'size' tags to your text in each column. If you re-size text in one column but not another, you'll get this:
Column 1
Column 1
Column 1
Column 1
Column 1
Column 2
Column 2
Column 2
Column 2
Column 2


This is an extreme example, but it's only to show how column offsets can occur.

It's also important to note that you must code your lines on the same line as the text. I've mentioned putting code on one line, hitting enter, and then having the text on the next line, but that will create an extra line. Do this:
Code:
[size=5] [b] Column header [/size]

and not this:
Code:
[size=5][b] Column header [/size]




Formatting an entire column

Sometimes, your job is easier than formatting a single line. Sometimes we get lucky and we can paint with broad strokes. When that's the case, you can keep the entire column organized extremely easily by putting all of the formatting on the same line as the 'columns' tag, like so:
Code:
[columns][size=4][color=blue] This text is all formatted! Every line! [nextcol] This column isn't formatted! Remeber, 'nextcol' breaks all tags! [/columns]

This text is all formatted!
Every line!


This column is formatted separately!
Remeber, 'nextcol' breaks all tags!



This is made even easier by the fact that 'nextcol' works as a full close, and you don't need to close the tags at all, as long as the entire column is being formatted!




Column Width

Usually, columns are only as wide as they need to be. This can cause text from different columns to push right up against each other. Luckily, there's one easy way to widen your columns to give them as much space as you want!

Remember the 'color=transparent' from all the way in the beginning? If we create text inside of a column and then make it transparent, we can't see the text, but the column still becomes wide enough to read it! See these two code blocks:
Code:
[columns] Column 1 [nextcol] Column 2 [/columns]

Column 1
Column 2
Code:
[columns][color=transparent] _______________[/color] Column 1 [nextcol][color=transparent] _______________[/color] Column 2 [/columns]

_______________

Column 1

_______________

Column 2

You'll notice in the second one, we can't see the long underlines, but they're actually still there! The column becomes exactly as wide as your invisible text!

This is an incredibly powerful technique, but it comes with some added complexity.

It's not necessary to use underscores, but this is the simplest way to do it for me. If you use another line for the underscores, you can see how much extra room your underline will give you! If you text extends past the underline, you can extend the underscore, or you may have to break your text and create a new line manually, like so:
Code:
[columns][color=transparent] ____________________[/color] This text is longer than the underscore! Oh no! [nextcol] This column is only as wide as this text. [/columns]

____________________

This text is longer than the underscore! Oh no!
This column is only as wide as this text.

This creates two problems:

The underscore becomes pointless, and the column becomes as wide as the text.

Also, the underline created a new line, so we have to adjust for that in the other column. Here that is, adjusted to fix those two errors:
Code:
[columns][color=transparent] ____________________[/color] This text is longer than the underscore! Oh no! [nextcol] This column is only as wide as this text. [/columns]

____________________

This text is longer
than the underscore!
Oh no!

This column is only as wide as this text.


Pay attention to a few things here:

I had to adjust the number of lines in the second column to make up for the underline, but also to make up for breaking column 1's sentence into more lines too!

I broke the sentence into a new line whenever it was going to extend past the underline. Putting the underline where I did makes it incredibly easy to figure out where you'll need to break your text!

Using these column spacers is a good way to control the size of your columns when you otherwise wouldn't be able to. It takes a little extra work, but you can use them to manipulate columns in any way you want! If you wanted to get creative, you could even hide messages in your spacers, since any text can be turned transparent! Just remember: click and drag, and you can see the transparent text, just like with a 'spoiler' tag... c;
Like this! You caught on fast!



Nesting Columns


Okay, this part may be the most confusing part in the guide, so be prepared. Take your time, and don't continue until you're confident you get it.

Columns can be nested just like any other tag, but this gets a little bit confusing. I'm going to make a section for a dragon bio to explain:


33568767p.png _______________
Dragon name
Dragon role

______________
+ Trait 1
+ Trait 2
______________
- Trait 3
- Trait 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed rhoncus nisi. Ut vel mollis ipsum. Ut tristique molestie eros, a viverra diam auctor vel. Fusce a ligula tincidunt, feugiat ex sed, rutrum nulla. Sed euismod, urna pulvinar tincidunt ornare, metus nunc hendrerit sem, sit amet laoreet metus odio sit amet arcu. Phasellus sed vestibulum nisi, ac rutrum purus. Suspendisse euismod molestie sagittis. Cras dapibus, lectus sit amet auctor bibendum, nisl leo ullamcorper justo, a pulvinar massa purus sit amet erat. Nullam eget fermentum sem. Nunc pretium dui eget quam imperdiet iaculis. Donec vulputate velit sit amet interdum mollis. Nunc ut varius turpis, ac mattis metus.



This might look a little daunting, so I'm going to try to section it off in Paint first, and we'll do one set of columns at a time.

YLVmHLs.png

The red sections are the first column. The biggest one. In the first red column, we have the blue columns, and under that, (still inside red but outside of blue) we have the green columns.

We'll start from the inside and work our way out, doing them one at a time.


The green columns are simple enough; two columns with equal spacing to give enough room for character traits.
Code:
[columns] [color=transparent]______________[/color] + Trait 1 + Trait 2 [nextcol] [color=transparent]______________[/color] - Trait 3 - Trait 4 [/columns]


In the blue columns, I used the "copy image address" on an image of my dragon's head. That was the first blue column. In the second one, I just spaced out enough room for a name and a role for the dragon in its clan:
Code:
[columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns]


And then in red, I simply put the blue and green columns inside the first column, and then used some filler text for a backstory or bio in the second column. Since the blue column was spaced enough for itself, the red columns don't need any additional spacing.

So, let's create the red column:
Code:
[columns] [nextcol] -- Filler text goes here! -- [/columns]

Easy enough, right?

Now we just have to copy/paste our blue column into red's first column:
Code:
[columns] [columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns] ----- [nextcol] -- Filler text goes here! -- [/columns]

I also added a rule to separate the blue columns from the green ones! Remeber that this rule has to exist in the first red column!

After that, we can simply paste the green column just below the blue one, like so:

Code:
[columns] [columns] [img]http://www1.flightrising.com/rendern/portraits/335688/33568767p.png[/img] [nextcol] [color=transparent]_______________[/color] Dragon name Dragon role [/columns] ----- [columns] [color=transparent]______________[/color] + Trait 1 + Trait 2 [nextcol] [color=transparent]______________[/color] - Trait 3 - Trait 4 [/columns] [nextcol] -- Filler text goes here! -- [/columns]

And that's all it takes! Remember to piece your code together one 'columns' tag at a time to keep things simple.

It's also important to note that since every set of columns is the same tag, you will have to nest them properly. The code knows to close the most recently opened 'columns' tag when you try to close one, so make sure they're nested properly!




If you've made it this far, congratulations! I mean it, really. This can get really complicated really fast, so you're doing good for yourself. If you're still not there yet, try to practice in the comments here. Click "Preview" a lot to see how you're doing, and do little pieces at a time. Keep going piece by piece and you're sure to make whatever you put your mind to!

The next few sections are up in the air right now. They could be anything. If you're reading this, my guide isn't complete yet, and I'd like feedback. Am I an awful teacher? Did I miss something? Please let me know if I need to clarify anything in the guide! I'd love to see what kinds of things you're making with this guide, so feel free to show off here!


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Making a dragon frame[/center] In this lesson, we're going to create something practical: a dragon frame! You can use these to sell dragons, or just to show them off. A dragon frame has the dragon's picture, and could have their genes, colors, prices, or anything else you may want. I made the frame below for our example here, and we're going to be re-creating it! [quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img] [/url] [nextcol][center] [color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/color] ----- [center][b]Ice Bar Mulberry Butterfly Red Underbelly ----- [b]Price: [img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img][b]: 999,999,999,999,999 [img]http://www1.flightrising.com/static/layout/icon_gems.png[/img][b]: 999,999,999,999,999[/b] [/columns][/quote] ----- We'll start by laying out the frame. This particular dragon frame is two columns inside of a quote, and the quote is named after the dragon. Here's the layout: [code][quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img][/url] [nextcol] [/columns] [/code] [quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img][/url] [nextcol] [/columns][/quote] ----- Next, we can start the sections on the right. In my example, I use the transparent column expander trick combined with 'center' tags to put the text directly in the middle of the remaining space. After this, I added some simple color and formatting code. Here is the new piece of code: [code][center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center][/code] You may have to play around with the underlines. If you have too many, it will create a scroll bar. If that happens, just remove one and click "Preview" again, and continue until the bar disappears. Added to the old code, we now have: [code][quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img] [/url] [nextcol][center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center][/code] ----- The second column isn't all that much. Just a center and bold tag. For now, I'm not displaying the new column, just the code. [code][center][b]Ice Bar Mulberry Butterfly Red Underbelly[/code] ----- The past part has one interesting technique I thought I would share. If you see the dragon frame I displayed at the top, it had a coin ([img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img]) and a gem ([img]http://www1.flightrising.com/static/layout/icon_gems.png[/img]) straight from Flight Rising. That's because there are plenty of images and buttons on websites that are just an image link! If you scroll to the top of this page, right click the gem or coin icon and click "Copy image address", you can use an 'image' tag to use Flight Rising's own images! The last section must also include a closing 'quote' tag to finish out the frame. You [i]could[/i] include a '/columns' tag as well, but the '/quote' will end the entire thing (see Advanced nesting). [code][b]Price: [img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img][b]: 999,999,999,999,999 [img]http://www1.flightrising.com/static/layout/icon_gems.png[/img][b]: 999,999,999,999,999[/b][/quote][/code] (but of course, put a reasonable price. My Lilith will never be sold. She's just my example model) ----- Now to put everything together! Combine all the pieces of code, and add a few spacing dividers, and you get all of this: [code][quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img] [/url] [nextcol][center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center] ----- [center][b]Ice Bar Mulberry Butterfly Red Underbelly ----- [b]Price: [img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img][b]: 999,999,999,999,999 [img]http://www1.flightrising.com/static/layout/icon_gems.png[/img][b]: 999,999,999,999,999[/b][/quote][/code] Which, when posted, looks like... [quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img] [/url] [nextcol][center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center] ----- [center][b]Ice Bar Mulberry Butterfly Red Underbelly ----- [b]Price: [img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img][b]: 999,999,999,999,999 [img]http://www1.flightrising.com/static/layout/icon_gems.png[/img][b]: 999,999,999,999,999[/b][/quote] -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Making a dragon frame

In this lesson, we're going to create something practical: a dragon frame! You can use these to sell dragons, or just to show them off. A dragon frame has the dragon's picture, and could have their genes, colors, prices, or anything else you may want. I made the frame below for our example here, and we're going to be re-creating it!

Lilith wrote:

24082901_350.png

___________________________
Lilith
Lv. 25 female fae
Arcane





Ice Bar
Mulberry Butterfly
Red Underbelly





Price:
icon_treasure.png: 999,999,999,999,999
icon_gems.png: 999,999,999,999,999




We'll start by laying out the frame. This particular dragon frame is two columns inside of a quote, and the quote is named after the dragon. Here's the layout:
Code:
[quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img][/url] [nextcol] [/columns]
Lilith wrote:




Next, we can start the sections on the right. In my example, I use the transparent column expander trick combined with 'center' tags to put the text directly in the middle of the remaining space. After this, I added some simple color and formatting code.

Here is the new piece of code:
Code:
[center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center]

You may have to play around with the underlines. If you have too many, it will create a scroll bar. If that happens, just remove one and click "Preview" again, and continue until the bar disappears.

Added to the old code, we now have:
Code:
[quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img] [/url] [nextcol][center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center]




The second column isn't all that much. Just a center and bold tag. For now, I'm not displaying the new column, just the code.
Code:
[center][b]Ice Bar Mulberry Butterfly Red Underbelly




The past part has one interesting technique I thought I would share. If you see the dragon frame I displayed at the top, it had a coin (icon_treasure.png) and a gem (icon_gems.png) straight from Flight Rising. That's because there are plenty of images and buttons on websites that are just an image link! If you scroll to the top of this page, right click the gem or coin icon and click "Copy image address", you can use an 'image' tag to use Flight Rising's own images!

The last section must also include a closing 'quote' tag to finish out the frame. You could include a '/columns' tag as well, but the '/quote' will end the entire thing (see Advanced nesting).
Code:
[b]Price: [img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img][b]: 999,999,999,999,999 [img]http://www1.flightrising.com/static/layout/icon_gems.png[/img][b]: 999,999,999,999,999[/b][/quote]

(but of course, put a reasonable price. My Lilith will never be sold. She's just my example model)




Now to put everything together! Combine all the pieces of code, and add a few spacing dividers, and you get all of this:
Code:
[quote=Lilith][columns] [url=http://flightrising.com/main.php?dragon=24082901] [img]http://flightrising.com/rendern/350/240830/24082901_350.png[/img] [/url] [nextcol][center][color=transparent]___________________________ [color=purple][b][size=5]Lilith[/size] [size=4]Lv. 25 female fae Arcane[/center] ----- [center][b]Ice Bar Mulberry Butterfly Red Underbelly ----- [b]Price: [img]http://www1.flightrising.com/static/layout/icon_treasure.png[/img][b]: 999,999,999,999,999 [img]http://www1.flightrising.com/static/layout/icon_gems.png[/img][b]: 999,999,999,999,999[/b][/quote]

Which, when posted, looks like...
Lilith wrote:

24082901_350.png

___________________________
Lilith
Lv. 25 female fae
Arcane



Ice Bar
Mulberry Butterfly
Red Underbelly





Price:
icon_treasure.png: 999,999,999,999,999
icon_gems.png: 999,999,999,999,999


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Troubleshooting[/center] Having trouble with your code? Here's how you can fix it! ----- [center][size=5][color=darkblue] [b]CTRL+F[/center] [color=transparent]tomatoes[/color] If you're on windows, you can press CTRL and F at the same time, and a window pops up in the corner of your browser. On other operating systems, it's command/feature/etc. + F. Search for the word: "tomatoes". Go try it and come back! You can use this search function to figure out where your broken code is. If you see a [b]]spare bracket, or a tag without a closing tag, you can search for that specific part and delete it! If you searched for "[b]]", you'd find exactly where my error was in the post, and you could fix or delete it accordingly. ----- [center][size=5][color=darkblue] [b]Compounding sizes[/center] Have your text sizes gone rampant? That's a pretty common error, and it's because of compounding size tags. If you don't close a size tag, and you add another size tag, it changes the size based on the already-changed size! Observe: [code][size=4] This text is size 4! [size=5] This text is size (4+) 5![/size][/size] [size=5]This text is actually size 5![/size][/code] [size=4] This text is size 4! [size=5] This text is size (4+) 5![/size][/size] [size=5]This text is actually size 5![/size] If you search for "[size", look how many results are shown. Search "[/size", they should be the same amount (unless you've used full closes). This is a good way to figure out where your errors are exactly. ----- [center][size=5][color=darkblue] [b]Misaligned Columns[/center] Columns are tricky. They never work when you need them to, but we can fix them! [code][columns]This is line 1 This is line 2 This is line 3 [nextcol] This is line 1 This is line 2 This is line 3 [nextcol] [/columns][/code] Think about this one: Since I put Line 1 on the same line as the 'columns' tag in column 1, but I started Line 1 below 'columns' in the second column, would they be aligned? Let's find out: [columns]This is line 1 This is line 2 This is line 3 [nextcol] This is line 1 This is line 2 This is line 3 [nextcol] [/columns] They're perfectly aligned! This is the only time column lines don't add up. Keep your columns consistent just to be safe. If your columns are still misaligned, count how many lines there are before the 'nextcol' or '/columns'. Make sure these match in [i]every column[/i]. If the columns still don't line up, try to search for 'size' tags. Any size tags must match up size tags in other columns, or it'll offset the entire column! ----- If all else fails, ping me with a code block and I'll fix it. I like coding. I like helping. Gimme a challenge. -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] -----
Troubleshooting

Having trouble with your code? Here's how you can fix it!




CTRL+F
tomatoes
If you're on windows, you can press CTRL and F at the same time, and a window pops up in the corner of your browser. On other operating systems, it's command/feature/etc. + F. Search for the word: "tomatoes". Go try it and come back!

You can use this search function to figure out where your broken code is. If you see a ]spare bracket, or a tag without a closing tag, you can search for that specific part and delete it! If you searched for "]", you'd find exactly where my error was in the post, and you could fix or delete it accordingly.





Compounding sizes

Have your text sizes gone rampant? That's a pretty common error, and it's because of compounding size tags. If you don't close a size tag, and you add another size tag, it changes the size based on the already-changed size! Observe:
Code:
[size=4] This text is size 4! [size=5] This text is size (4+) 5![/size][/size] [size=5]This text is actually size 5![/size]

This text is size 4! This text is size (4+) 5!
This text is actually size 5!

If you search for "[size", look how many results are shown. Search "[/size", they should be the same amount (unless you've used full closes). This is a good way to figure out where your errors are exactly.




Misaligned Columns

Columns are tricky. They never work when you need them to, but we can fix them!
Code:
[columns]This is line 1 This is line 2 This is line 3 [nextcol] This is line 1 This is line 2 This is line 3 [nextcol] [/columns]

Think about this one: Since I put Line 1 on the same line as the 'columns' tag in column 1, but I started Line 1 below 'columns' in the second column, would they be aligned? Let's find out:

This is line 1
This is line 2
This is line 3
This is line 1
This is line 2
This is line 3

They're perfectly aligned! This is the only time column lines don't add up. Keep your columns consistent just to be safe.

If your columns are still misaligned, count how many lines there are before the 'nextcol' or '/columns'. Make sure these match in every column.

If the columns still don't line up, try to search for 'size' tags. Any size tags must match up size tags in other columns, or it'll offset the entire column!




If all else fails, ping me with a code block and I'll fix it. I like coding. I like helping. Gimme a challenge.


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
Resources

Here you'll find a list of helpful tools or programs specifically for BBcode! I'll be updating this list whenever I find another tool, or if anyone brings one to this thread




Notepad++:
An upgraded version of the regular ol' notepad. I like this because you can keep a bunch of different text documents open, it wraps text for you, and you can even split the view to see two text files at once! This guide was written almost entirely inside of Notepad++




color-hex.com:
A useful site that has tons of colors for you to pick from. You can search by color name, make & browse palettes, and more. It's really useful to find a certain color for your text.




hexcolortool.com:
This is better for making your own colors, rather than picking from other peoples'. If you play around with the color sliders, you can make whatever color you want, and you'll get the hex code for that same color.




stuffbydavid.com/textcolorizer:
A useful tool if you want to add a ton of color to your text. You can use it to make gradients like this one, or this one!




text color fader:
This is like the one before it, but a little more in-depth. It can color multiple lines, you can pick any number of colors, or just use pre-made faders. Just make sure to set "Output Code" to "Standard Forum Code"!




Lorem Ipsum:
Lorem Ipsum is filler text. You may recognize it from the "Advanced Columns" section, where I used it to demonstrate a dragon bio. People usually use filler text (usually Lorem Ipsum) for layouts when they don't want to (or don't have) actual text to fill the spaces yet. If you need to see how some code will work out, try using some Lorem Ipsum!


Resources

Here you'll find a list of helpful tools or programs specifically for BBcode! I'll be updating this list whenever I find another tool, or if anyone brings one to this thread




Notepad++:
An upgraded version of the regular ol' notepad. I like this because you can keep a bunch of different text documents open, it wraps text for you, and you can even split the view to see two text files at once! This guide was written almost entirely inside of Notepad++




color-hex.com:
A useful site that has tons of colors for you to pick from. You can search by color name, make & browse palettes, and more. It's really useful to find a certain color for your text.




hexcolortool.com:
This is better for making your own colors, rather than picking from other peoples'. If you play around with the color sliders, you can make whatever color you want, and you'll get the hex code for that same color.




stuffbydavid.com/textcolorizer:
A useful tool if you want to add a ton of color to your text. You can use it to make gradients like this one, or this one!




text color fader:
This is like the one before it, but a little more in-depth. It can color multiple lines, you can pick any number of colors, or just use pre-made faders. Just make sure to set "Output Code" to "Standard Forum Code"!




Lorem Ipsum:
Lorem Ipsum is filler text. You may recognize it from the "Advanced Columns" section, where I used it to demonstrate a dragon bio. People usually use filler text (usually Lorem Ipsum) for layouts when they don't want to (or don't have) actual text to fill the spaces yet. If you need to see how some code will work out, try using some Lorem Ipsum!


| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
[center][size=6][color=darkblue][b]Students & Badges[/center] This space is dedicated to users who have put this guide to good use! You'll find examples and inspiration from people who learned from this guide too! -----[center] [center][size=5][color=darkblue] [b]Student Links[/center] [url=http://www1.flightrising.com/forums/baz/2221763]TwinkleToe's Twinkle in Her Eye hatchery [img]http://i.imgur.com/pqb0hWE.png[/img][/url] [url=http://www1.flightrising.com/forums/baz/2436821]maiathehealer's XXX hatchery for coatls & wildclaws [img]https://orig00.deviantart.net/40a2/f/2018/175/c/0/maias_hatchery_signature_by_angeldragonisa-dcf9yn9.png[/img][/url] ----- [center][size=5][color=darkblue] [b]Badges[/center] [left]If you want to create a badge, I'm more than happy to pay for them! I [i]won't[/i] be providing code to copy and paste for the badges. If you've gotten this far, I'm sure you'll know what to do! (It wouldn't hurt to wrap the image in a URL tag leading to this guide, though c;) [img]https://i.imgur.com/bPXKWNK.png[/img] Fake achievement provided by @OrcaTheUltimate [url=http://www1.flightrising.com/forums/art/2207264/1]Click here and you get get your own too![/url] ----- If you'd like to submit an example, let me know here! I'm subscribed to this thread, but it won't hurt to ping me too, just to be sure. It can be a thread, dragon bio, signature, whatever! -----[center][color=darkblue][b] | || Quick Jump || | [/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_2235393]Intro[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360340]Basic Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360344]Manual Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360347]Flight Rising Tags[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393/1#post_28360351]Nesting & Readability[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360354]Advanced Columns[/url] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360355]Projects[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360360]Troubleshooting[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360362]Resources[/url] [b][color=darkblue]|[/b] [url=http://www1.flightrising.com/forums/gde/2235393#post_28360364]Students & Badges[/url] ----- [center][size=5][color=darkblue] [b]Special Thanks[/center][left] @Starrlight for adding the 'outfit', 'skin', and 'transparent' tags @PixelSpiral for showing me that tags don't require "double quotes" for item or user names @Starrlight (again) for adding the 'br' line break tags. @Deluxe for showing me the smallest text size is, in fact, 0. Not 1. @Swirlixx for showing me how to shrink dragon images down to an avatar-sized image
Students & Badges

This space is dedicated to users who have put this guide to good use! You'll find examples and inspiration from people who learned from this guide too!




Student Links

TwinkleToe's Twinkle in Her Eye hatchery
pqb0hWE.png


maiathehealer's XXX hatchery for coatls & wildclaws
maias_hatchery_signature_by_angeldragonisa-dcf9yn9.png




Badges

If you want to create a badge, I'm more than happy to pay for them!

I won't be providing code to copy and paste for the badges. If you've gotten this far, I'm sure you'll know what to do!

(It wouldn't hurt to wrap the image in a URL tag leading to this guide, though c;)

bPXKWNK.png
Fake achievement provided by @OrcaTheUltimate
Click here and you get get your own too!





If you'd like to submit an example, let me know here! I'm subscribed to this thread, but it won't hurt to ping me too, just to be sure. It can be a thread, dragon bio, signature, whatever!



| || Quick Jump || |

Intro | Basic Tags | Manual Tags | Flight Rising Tags | Nesting & Readability | Advanced Columns
Projects | Troubleshooting | Resources | Students & Badges



Special Thanks

@Starrlight for adding the 'outfit', 'skin', and 'transparent' tags

@PixelSpiral for showing me that tags don't require "double quotes" for item or user names

@Starrlight (again) for adding the 'br' line break tags.

@Deluxe for showing me the smallest text size is, in fact, 0. Not 1.

@Swirlixx for showing me how to shrink dragon images down to an avatar-sized image
| Crowe's BBCode Compendium |
- - - Click here to learn everything (and more) about BBCoding! - - -

| ||
Dragon bios | Signatures | Hatcheries || |
1 2 3 4 5 6 7 ... 11 12