Guides

[center][img]https://media.discordapp.net/attachments/759622347237097472/759625667024650240/bannerbbcode.png[/img][/center] [rule] [columns][color=transparent]___________[/color][nextcol][size=4]Welcome Welcome, all flights, to Plague's BBCode school! In spirit of Arcane's festival, we will all be learning for this week! Please sit down and grab your materials. BBCode is the coding language used in the Flight Rising Forums to format posts. Don't worry, it's simpler than it sounds! In this- Jeremy, please stop throwing paper balls. In this course, we'll break it down bit by bit over 6 lessons, until you can master advanced post coding! Every lesson we will get a little deeper into it, with a different challenge every day - and a chance to earn cool badges! [center][emoji=arcane rune size=1][emoji=plague rune size=1] [font=Impact][size=6]So, are you ready to learn?[/center] [nextcol][color=transparent]____________[/color][/columns] [center]| [url=https://www1.flightrising.com/forums/frd/2913381/1#post_44770599]Push HUB [/url]| [url=https://www1.flightrising.com/forums/gde/2913485#post_44773052]pt.1: The basics[/url] | [url=https://www1.flightrising.com/forums/gde/2913485#post_44773053]pt.2:Hidden codes[/url] | | [url=https://www1.flightrising.com/forums/gde/2913485#post_44773055]pt.3:FR Codes [/url]| [url=https://www1.flightrising.com/forums/gde/2913485#post_44773057]pt.4:Columns[/url] | [url=https://www1.flightrising.com/forums/gde/2913485#post_44773058]pt.5:Layouting[/url] | [url=https://www1.flightrising.com/forums/gde/2913485#post_44773060]pt.6: Design tips[/url] |[/center] [Quote] [font=Impact][size=5]Pinglist:[/size][/font] [size=0]@Katsuji @Disillusionist @DuskofDawn12 @Tarany @Helva @Texere @Reynette @Wardove @jbapple @AWB @Mistbird @Barrdwing @Stonecutter @Medievalredragon @Autumnus @FlyingFangz @myriadofstars @betty @InobiYoPo @Cerberus38 @YviJoy @smellybelly10 @tigressRising @Psychosis @wishwood @gravitycon @crowvidae @sockmonkeygerald @Kaijeu @Siraiceshine @Polymathema @Beansoupbruh @TonoAlokei @Starwindrider @NostalgicBreeze @acrylicdog13 @Hinumi @ErraticPulse @EternalRamen @InTheDarke @jazzghost @Xylitol @WanderingTurtle @Silverbolt1159 @Snowwall @SolarSam @Bezonox [/size] [/quote] [size=5][color=maroon]It's the end...[/size] We been avoiding it so vehemently, we have feared it, but we cannot delay it any longer... it's time to say goodbye. [size=0]In reality the whole final post got lost yesterday in a poorly planned series of cut-paste and I had to remake it entirely from scratch, but we got it![/size] [b]The final lesson is posted down below![/b] It's all about actual design tips to make your layouts shine like a thousand suns. Surprisingly, we got no pings yesterday, which is probably a good sign (no questions means everyone understands, right?), but you guys can still ping us any time. You can read through the lesson and scoop up the final badge, no homework this time! We really hope you enjoyed taking part in this and that you learned a lot of nice things that you'll take with you from here on out. See you guys around FR (hopefully making great use of bbcode)! [right]—Amayai and @Holoquest[/right]

[img]https://media.discordapp.net/attachments/759622347237097472/759895759750692864/bannerbasics.png[/img] So, what is BBCode? It stands for Bulletin Board Code, and it's a series of tags used to format posts in many forums, including Flight Rising's! It's not complicated, so it's not like you have to learn coding, but in case you want to, it shares a few similarities with html! [b]It works with start tags [tag] and end tags [/tag].[/b] When writing a post or bio, [b]each of the white boxes above the text box shortcuts to a bbcode command[/b]. Highlighting a sentence and clicking one of the shortcuts will apply the tag to each side, or you can click it and write between tags. [color=maroon][Size=6][font=impact]Let's see what each button does, shall we?[/size][/font][/color] [list] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_bold.png[/img] [b]The b tags are for bolding![b] [Code][b]The b tags are for bolding![/b][/code] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_italic.png[/img] [i]The I tag is for italicizing[/i] [code][i]The I is tag for italicizing[/i][/code] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_underline.png[/img] [u]The U tag is for underlining[/u] [code][u]The U tag is for underlining[/u][/code] [/list] [rule] [color=maroon][b]Now for alignments![/b] Both the start and end tags will break the paragraph and start a new one, so they must be used at the start and end of your paragraph![/color] [rule] [list] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_indent.png[/img] The "indent" tag will make your whole paragraph indented. [indent]Like this![/indent] [code][indent]Like this![/indent][/code] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_left.png[/img] The "left" tags align left. [left]Like this! [/left] [code][left]Like this! [/left][/code] [color=maroon](Left is the default alignment, but the tag can be useful when you want your whole post centered and only one paragraph with left alignment!)[/color] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_center.png[/img] "Center" tag for center align [center]Like this![/center] [code][center]Like this![/center][/code] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_right.png[/img] "Right" tag to align right [right]Like this![/right] [code][right]Like this![/right][/code] [/list] [rule] [color=maroon][b]Now the url codes![/b][/color] [rule] [list] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_link.gif[/img] [url=https://www.youtube.com/watch?v=SQoA_wjmE9w]The url tags turn a text or image into a link.[/url] [code][url=https://www.youtube.com/watch?v=SQoA_wjmE9w]The url tags turn a text or image into a link.[/url][/code] [color=maroon]Pasting a URL will also let you navigate to it, but if you want to make a link out of an image or text, use this format![/color] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_image.gif[/img] Putting an url between img tags adds an image, like this! [img]https://www1.flightrising.com/static/layout/revamp/banners/plague_small.png[/img][code][img]https://www1.flightrising.com/static/layout/revamp/banners/plague_small.png[/img][/code] [color=maroon]To use it, you can't copy paste the image, you need the image address off your browser. This means it has to be uploaded to the internet already.[/color] [/list] [emoji=rainbow star 1 size=1][size=6]Tip[/size] [b]If there is any image you want to grab, you can right click it and copy image address![/b] You may also right click and open image in a new tab, then copy the url that shows on your address bar. [list][*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_emoji.gif[/img] This one adds an emoji! It is not native to bbcode and only applies to FR, so we'll talk more about it later! [/list] [rule] [color=maroon][b]Finally, the formatting tags.[/b][/color] [rule] [list] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_olist.gif[/img] Numbered list! [LIST=1] [*] Makes a [*] numbered/ordered [*] list! [/LIST] [code][LIST=1] [*] Makes a [*] numbered/ordered [*] list! [/LIST][/code] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_ulist.gif[/img] Makes a bullet point list! [LIST] [*] Dot dot dot [*] This is a [*] Bullet list! [/LIST] [code][LIST] [*] Dot dot dot [*] This is a [*] Bullet list! [/LIST][/code] [color=maroon]So is each of these topics! Here my bullets are white because they are bullets within bullets! Try and experiment with nesting tags! ;) [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_quote.gif[/img] These will add a quote box! [Quote] it looks like this! [/quote] [Code][Quote] it looks like this! [/quote][/code] [/list] [img]https://www1.flightrising.com/static/layout/forum/forum-icon-quote.png[/img][size=6]Tip[/size] [b]You can quote other people's posts to see their code![/b] That blue quote button on the top right of published posts will copy their post, fully coded, as a quote in your text box. This can be used to respond to that specific post, sure, but if you see really cool bbcode, use it to take a peek at how it was written! [list] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_code.png[/img] This is the code box that allows me to write code examples without applying them to the text! Unfortunately this means I can't show them to you with a code box, but it goes: [b]{code} content of the code {/code} [/b] in square [ brackets instead. Code boxes also have a known issue of being a fixed size, not going down when the paragraph is indented or on a list, that’s why they clip in some formatting. [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_strike.png[/img] [s]Finally, the s tag makes text strikethrough![/s] [code][s]Finally, the s tag makes text strikethrough![/s][/code] [/list] [rule] [color=maroon][Size=6][font=impact]Homework time![/size][/font][/color] As the first homework, you can only have this badge if you manage to grab it and code it to link back to this thread on click. Up for a challenge? Put it in a quote that says "Simon wrote" at the top instead of "quote", then put it in a dragon’s bio and post the dragon's name as a link in this thread. [center][img]https://media.discordapp.net/attachments/739220177912070224/759992288947994635/badge_laptop.png[/img][/center] Next lesson we'll reveal the answer, and then we'll get into all the hidden tags that you can use to format your posts beyond the basic buttons!

[img]https://media.discordapp.net/attachments/759622347237097472/759895768147820574/bannerhidden.png[/img] [Rule][quote] [font=impact][size=6][color=maroon]Homework answers[/font][/size][/color] [Color=maroon][List] [*]Copy the image url as said in the tip, then click the image button over your text box and paste the address there. You have the badge code! [*]To link it to the thread, copy the address bar up until the end of the thread ID. It should look like this! https://www1.flightrising.com/forums/gde/2913485[/list] [emoji=rainbow star 1 size=1][size=6]Tip[/size] [b]If your url has /1 at the end[/b], after the post ID, it links to the first page. With that addition you can link to your desired page, but here we don't need that part of the code, as the first page is the default! [b]If it has /1#post_2913485 at the end[/b], it's linking to the first post of the first page! You can get each post's specific link with the chain icon on the top right of a post. Here we don't need it, but it's useful to know! [list] [*]Highlight your image code [b]including the img tags[/b], then click the url button and paste the thread address there. Done, your badge links here! [*]Finally, to link to your dragon from their name, copy the url from the address bar in your dragon's page, then write their name, highlight it, click the link button and paste that address there![/list] Now for the challenge! [font=impact][size=6][color=maroon]Name Quotes[/font][/size][/color] [List] [*] You can change the quote to name who wrote it![quote=yourname]content[/quote] To do so, use either of these codes! [Code][quote=yourname]content[/quote][/code] [Code][quote name=yourname]content[/quote][/code] [*]You can also add a date to go with the name if you use this format: [quote name=yourname date=datehere]content[/quote] [Code][quote name=yourname date=datehere]content[/quote][/code] You can write whatever you want on the name and date as long as there are no spaces! [*]To add a space in the date or name, you need to put them between quotes. If you quote someone's post, it comes with the name, date and hour of posting. The hour is just part of the "date=" box, separated by a space! Like this: [quote name="your name" date="date and time"]content[/quote] [Code][quote name="your name" date="date and time"]content[/quote][/code] [/color][/list][/quote] [Rule] Now it's time to tackle the secret tags! These are BBCode tags that don't show in any buttons, so [b]you have to know them to use them![/b] The first one is making [color=maroon][b]name quotes[/b][/color], which we learned with the homework. Here are the others! [font=impact][size=6][color=maroon]Font Sizes[/font][/size][/color] [List] [*]BBCode has a system of font sizes that is similar to html's. [b]It goes from 0 to 7, and 3 is the default.[/b] To use it, put your text between size tags with your desired number: [size=5]Cool text![/size] [Code][size=5]Cool text![/size][/code] [*][Size=0]The[/size][size=1] Sizes[/size][size=2] Cover[/size] A pretty [size=4] Good[/size][size=5] Range[/size][size=6] I'd[/size][size=7] Say[/size] But if you need them bigger or smaller, you can nest sizes to make [Size=7][size=7]Huge text[/size][/size] [code][Size=7][size=7]Huge text[/size][/size][/code] [Size=0][size=0]Or teeny tiny text[/size][/size] [code][Size=0][size=0]Or teeny tiny text[/size][/size][/code][/list] [font=impact][size=6][color=maroon]Font Styles[/font][/size][/color] [List] [*]You can change the font of your text with the font=fontname tags! [Font=Times new roman]Fancy text![/font] [Code][Font=Times new roman]Fancy text![/font][/code] [Font=Papyrus]NYEHEHE![/font] [Code][Font=Papyrus]NYEHEHE![/font][/code] [*][url=https://www1.flightrising.com/forums/gde/1444848]Here is a thread showcasing a bunch of fonts you might use![/url] [*]Unfortunately most fonts are only visible on a computer because computers come with a wide variety of those preinstalled. Very few can be seen on mobile. You can probably install those fonts in your phone with an app if you want to see and use them, though![/list] [font=impact][size=6][color=maroon]Font Color[/font][/size][/color] [List] [*]You can also change the font color with color tags! [Color=blue]I'm blue da ba dee da ba daa[/color] [Code][Color=blue]I'm blue da ba dee da ba daa[/color][/code] [*]These work in two ways: with a few color names or with the color's hex value. (A 6 digit number that indicates the color's exact RGB value). The names are limited, but you can display text in any color you wish if you use their hex value! [Color=9927AC]Look at my custom color![/color] [Code][Color=9927AC]Look at my custom color![/color][/code] Or [Code][Color=#9927AC]Look at my custom color![/color][/code] [*][url=https://www1.flightrising.com/forums/gde/2498653] Here is a thread showcasing all color names supported by FR and their hex value![/url] [*]There’s plenty of resources besides photoshop to find a color’s hex. [url=https://color.adobe.com/pt/create/color-wheel]Adobe Color[/url] is an easy way to get a pallet and the hex values, but my personal favorite is [url=https://htmlcolorcodes.com/] HTMLColorCodes[/url]. It has a big and visual color picker, and lots of extra resources, including a short explanation of what each number in the value does. [/list] [emoji=rainbow star 1 size=1][size=6]Tip[/size] [b]You can simulate gradients on your texts by making each letter a different color! [/b]This is a lot of work, but fortunately there are resources that can do that for you! Just be careful, some of what I’ve found are unsafe sites. [url=http://patorjk.com/text-color-fader/]Patorjk seems to work![/url] Just input your color and make sure the output language is set to “Standard Forum Code”. Then just copy paste the code! [font=impact][size=6][color=maroon]Rule[/font][/size][/color] [List] [*] You can add a line to break up parts of your post! [rule] [code][rule][/code] It will also automatically end all font specific tags even if you haven’t put [/end tags]. This means color, size, font, bold, italic, or underline tags will stop if you add a rule tag. [quote][right][list][*][color=red][size=5][font=comic sans ms][b]See, the alignment, list and quote will stay [rule] [*]but all other text formatting will be gone.[/quote][/list][/right] [font=impact][size=6][color=maroon]Spoiler[/font][/size][/color] [List] [*]You can use a spoiler tag to hide parts of your text! To reveal the spoiler, simply highlight the text with your mouse. [spoiler]Thanos snaps![/spoiler] [code][spoiler]Thanos snaps![/spoiler][/code][/list] [font=impact][size=6][color=maroon]Sub-/superscript[/font][/size][/color] [List] [*]This one is really obscure, but you can make text [b]subscript[/b] with sub tags Hey buddy! [sub]Well hello there![/sub] [code]Hey buddy! [sub]Well hello there![/sub][/code] [*]And [b]superscript[/b] with sup tags! Sup, bro? [sup]Hey man, I'm good![/sup] [code]Sup, bro? [sup]Hey man, I'm good![/sup][/code][/list] [font=impact][size=6][color=maroon]Columns[/font][/size][/color] [List] [*]Columns allow you to place elements side by side in columns! Start with the columns tag, add content, and use the nextcol tag every time you want to move to a new column. Then end with the /columns tag. [columns] It works like this! Start with the tag [nextcol] [emoji=achievement size=1] [nextcol] Use nextcol every time you want a new column [/columns] [code][columns] It works like this! Start with the tag [nextcol] [emoji=achievement size=1] [nextcol] Use nextcol every time you want a new column [/columns][/code] [*] Don’t worry, these will be addressed *THOROUGHLY* further down the line, because they are probably the tag you can get the most creative use out of! Right now you know the basics![/list] [rule] [color=maroon][Size=6][font=impact]Homework time![/size][/font][/color] Today’s homework is to take a dragon’s bio and have at least 3 very different fonts in it, as well as at least 5 different tags! And if you’re up for a challenge, try to make a font size that is [b]bigger than size 5, but smaller than size 6.[/b] Can you figure it out? Link your dragon by the name on the thread to earn today’s badge, or just work on the dragon you've already linked for last homework! [center] [url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/760386598851575828/badge_notebook2.png[/img][/url][/center] [code][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/760386598851575828/badge_notebook2.png[/img][/url][/code] Next lesson we’ll address the final bunch of tags you need to know, but no spoilers! [spoiler] It’s all the Flight Rising tags! [/spoiler]. Stay tuned!

[img]https://media.discordapp.net/attachments/759622347237097472/759895766318710804/bannerfrcodes.png[/img] [Rule][quote] [font=impact][size=6][color=maroon]Homework answers[/font][/size][/color] [List] [*]This one is pretty straightforward: between font, size, color and bold/italic/underline/strikethrough, you can make a great variety of fonts. [*]The best way to organize many tags on a single piece of text is to keep them within each other. That way if you start with a color tag, your last end tag should be color.[/list] [Code][color=red][font=arial][size=4][b]Like this![/b][/size][/font][/color][/code] [list] [*]If you add an alignment tag, remember to keep it at the start and end of your phrase or paragraph! Like we said, alignment tags make a paragraph break, so if you put it in the middle of your other text tags, the paragraph will ignore all tags before it.[/list] [color=red][font=arial][size=4][center][b]Only the bold tag works here[/b][/center][/size][/font][/color] [code][color=red][font=arial][size=4][center][b]Only the bold tag works here[/b][/center][/size][/font][/color][/code] [center][color=red][font=arial][size=4][b]This works![/b][/size][/font][/color][/center] [Code][center][color=red][font=arial][size=4][b]This works! [/b][/size][/font][/color][/center][/code] [list] [*]Using 5 tags on text alone should be easy peasy, but if you apply others like lists, columns, rule and quotes, you can make a lot of stuff![/list] [emoji=rainbow star 1 size=1][size=6]Tip[/size] Did you try to use [font=comic sans ms]Comic Sans[/font] but [s]had a bad time[/s] had a different font showing instead? That’s because you must write “Comic Sans MS” for it to show up! That is the font's full name. The [font=cadwd]weird font[/font] you were getting instead is the default display font for when the one you just tried to use is unavailable. (Or if you type rubbish into the font tag). [font=comic sans ms] I'm comic sans! [/font] [code][font=comic sans ms] I'm comic sans! [/font][/code] [font= adsfasfd] what?? [/font] [code][font= adsfasfd] what?? [/font][/code] Now the challenge! [font=impact][size=6][color=maroon]Size nesting[/font][/size][/color] [List] [*]Did you figure out how to create font sizes that are in between set numbers? There's not a lot of them, but you can work it out with nesting sizes![/list] [Size=4][size=4]Remember me?[/size][/size] [Code][Size=4][size=4]Remember me?[/size][/size][/code] [list] [*]Sizes work with scaling: every size below 3 shrinks the size by a set amount, and every size above 3 enlarges it by a set amount. When you nest sizes, you are reapplying that shrink or enlargement over the previously resized font. With that in mind, font sizes will look different when you nest them than when you use the next available size. [size=2]This is size 2 [/size] [size=2][size=2]This is two size 2, nested[/size][/size] [size=1]This is size 1[/size][/list] [code][size=2]This is size 2 [/size] [size=2][size=2]This is two size 2, nested[/size][/size] [size=1]This is size 1[/size] [/code] [list] [*]If you nest size 6 with size 2, you will shrink Size 6 at the same amount that 2 reduces from the default. The result is bigger than size 5, but smaller than size 6![/list] [size=6]Six, [size=2]Goal!, [/size=2][/size=6][size=5]Five[/size=5] [code][size=6]Six, [size=2]Goal!, [/size=2][/size=6][size=5]Five[/size=5][/code] [list] [*]Here I'm also making sure of where each size ends by adding the size number to the end tag as well! This can help you keep organized when your text gets a lot of tags. [/quote] [rule] Now we address the FR codes! These are tags that [b]can only be used on the Flight Rising Forums[/b] because they are linked to game items, users and mechanics. [b]FR codes usually work with only one tag[/b], instead of start and end brackets. So if you see a tag that [looks like this], it's probably not native to BBCode, only to Flight Rising! [font=impact][size=6][color=maroon]Items[/font][/size][/color] [list] [*]This one is the most obvious, you can use an item tag to insert the icon of any item in game. They're pretty straightforward for any food, materials, apparel, familiars, battle items and trinkets. [item=Plague Bat][item=Squirrel Skull][item=Carapace Arm] [code][item=Plague Bat][item=squirrel skull][item=Carapace arm][/code] [item=Plague Sprite][item=eliminate][item=all-seeing shroom] [code][item=Plague Sprite][item=eliminate][item=all-seeing shroom][/code] [*]Gene names need to be written in full, including the ":" and “( )“. [item=primary gene: iridescent][item=Primary Gene: Chevron (Banescale)] [code][item=primary gene: iridescent][item=Primary Gene: Chevron (Banescale)][/code] [*] Upper or lower case doesn't matter. All you have to make sure is to write the name correctly, with proper spelling and punctuation (like apostrophes!). In doubt, you can reference the [url=https://www1.flightrising.com/game-database]Game Database[/url]. [columns][img]https://www1.flightrising.com/static/layout/game-database/button-share.png[/img][nextcol]Besides knowing the correct spelling of an item, you can click the share button and the icon code will be ready to grab with one click![/list] [font=impact][size=6][color=maroon]Skins[/font][/size][/color] [list] [*]This one warrants a separate topic because there's two ways to link skins and accents. The first is with the item tag. Be sure to include the full name! [item=accent: exossein][item=skin: acid bath] [code][item=accent: exossein][item=skin: acid bath][/code] [*]The second way to do it is with the dedicated skin tag! This one requires the skin's ID, which you can find on the bottom left of their tooltip after "Itemid". Accents will also use the skin tag, as it stands for the item tab, not the item name. [skin=32053][skin= 28205] [code][skin=32053][skin= 28205][/code][/list] [font=impact][size=6][color=maroon]Game Database[/font][/size][/color] [list] [*]Not very commonly used, but with the implementation of the game database we also got a new tag! It links directly to a game database article and can also be obtained from the share button in the database page. [gamedb item=1987] [code][gamedb item=1987][/code] [/list] [font=impact][size=6][color=maroon]Emoji[/font][/size][/color] [list] [*][img]https://www1.flightrising.com/static/forum_icons/bbcode/forum_emoji.gif[/img] Here we are again, talking about the emoji button. Not much to say here, besides the fact that the emoji tag is also FR exclusive. We have this awesome button showing the emoji visually, so there's no need to learn any by heart, but in any case here's what the code looks like! [emoji=mirror tongue][emoji=mirror tongue size=2] [code][emoji=mirror tongue][emoji=mirror tongue size=2][/code] or [code][emoji=mirror tongue size=1][emoji=mirror tongue size=2][/code] [/list] [font=impact][size=6][color=maroon]User[/font][/size][/color] [list] [*]You can link to user profiles with the user tag! It will display their icon and link to their profile. (you can even link to deities!) [user=undel] [user=amayai] [user=plaguebringer] [code][user=undel] [user=amayai] [user=plaguebringer] [/code] [/list] [font=impact][size=6][color=maroon]Bonus: Dragons[/font][/size][/color] [list] [*]Ok, this one is not a tag, but very useful! As you know, we can link dragons with what we've already learned: an IMG and an URL tag. This link can also be obtained from the share button on the dragon's profile. [url=https://www1.flightrising.com/dragon/61275214][img]https://www1.flightrising.com/rendern/350/612753/61275214_350.png[/img][/url] [code][url=https://www1.flightrising.com/dragon/61275214][img]https://www1.flightrising.com/rendern/350/612753/61275214_350.png[/img][/url][/code] You might like to know that there is a way to [b]change the image to different renditions of the dragon across the site[/b]. This way the dragon image will display differently. It all works from the original image url. You can take it from the widget code or right click the dragon and copy image url. Mine looks like this: [b]https://www1.flightrising.com/rendern/350/612753/61275214_350.png[/b] [*][size=5][color=maroon]Small dragon[/size][/color] [b]https://www1.flightrising.com/rendern/[color=red]350[/color]/612753/61275214[color=red]_350[/color].png[/b] [b]https://www1.flightrising.com/rendern/avatars/612753/61275214.png[/b] Replace the first "350" with "avatars". Then remove the _350 from the end. [img]https://www1.flightrising.com/rendern/avatars/612753/61275214.png[/img] [code][img]https://www1.flightrising.com/rendern/avatars/612753/61275214.png[/img][/code] [*][size=5][color=maroon]Coli portrait[/size][/color] [b]https://www1.flightrising.com/rendern/[color=red]350[/color]/612753/61275214[color=red]_350[/color].png[/b] [b]https://www1.flightrising.com/rendern/coliseum/portraits/612753/61275214.png[/b] Replace the first "350" with "coliseum/portraits". Then remove the _350 from the end. [img]https://www1.flightrising.com/rendern/coliseum/portraits/612753/61275214.png[/img] [code][img]https://www1.flightrising.com/rendern/coliseum/portraits/612753/61275214.png[/img][/code] [*][size=5][color=maroon]Profile image[/size][/color] [b]https://www1.flightrising.com/rendern/[color=red]350[/color]/612753/61275214[color=red]_350[/color].png[/b] [b]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/b] Replace the first "350" with "portraits". Then replace "_350" at the end with "p". [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [code][img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img][/code] [/list] [rule] [color=maroon][Size=6][font=impact]Homework time![/size][/font][/color] Today’s homework is simple! In your dragon’s bio, place your own user profile and the Flameforger’s accent “from the ashes”. [center][skin= 19329][/center] Here’s the catch: there’s two skins called “from the ashes”. Make sure it’s the festival skin! Try to do it without looking it up in the game database or quoting this post (That’s cheating!). As for today's badge: [center][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/760721067223285790/badge_calculus.png[/img][/url][/center] [code][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/760721067223285790/badge_calculus.png[/img][/url][/code] If you’re feeling adventurous, here’s a big challenge: [b]code a 3x2 table in your dragon’s bio.[/b] On the first row, put your profile, the accent, and a square profile image of your dragon. On the second row, make [b]a numbered list, a letter list, and a roman numeral list![/b]. By now you know all the BBCode tags on FR, so treat yourself to a cup of your preferred warm beverage. Next time we’ll start applying the tags to ~create~!

[img]https://media.discordapp.net/attachments/759622347237097472/759895761751900180/bannercolumns.png[/img] [Rule][quote] [font=impact][size=6][color=maroon]Homework answers[/font][/size][/color] [List] [*]Getting your user is quite simple with the user tag, right? In any case, you can always generate a square profile image of the dragon you have as your avatar and use the url tag to manually link it to your profile. There’s often multiple ways to accomplish something! [*]To make the correct skin show, you need to add it by the id with the skin tag! [*]While you can usually get the ID from the tooltip, a few skins have a bug where the ID will be replaced by a treasure value. Try hovering over this one. [skin=34622] To get the ID on skins like this, click them to go to the preview window. On the very top, you can obtain the id from the window description: [color=maroon]Preview Skin #34622[/color][/list] Now the challenge! [font=impact][size=6][color=maroon]Tables and lists[/font][/size][/color] [List] [*]As some have noticed, the [url=https://www.bbcode.org/examples/?id=14]official BBCode has a table code[/url] in place, but it’s not usable in the Flight Rising forums. So the solution here is to [b]make creative use of what we have: the columns tag![/b] [*]You may have noticed that the numbered list uses a "list=1" tag. To list your items with letters or roman numerals, you can replace the 1 with the first point of your desired list! [columns] [LIST=A] [*]big [*]letters [*]list! [/LIST] [nextcol] [LIST=a] [*]small [*]letters [*]list! [/LIST] [nextcol] [LIST=i] [*]small [*]roman [*]numerals! [/LIST] [nextcol] [LIST=I] [*]big [*]roman [*]numerals! [/LIST][/columns] [code][list=A] [list=a] [list=i] [list=I][/code] And their respective starting codes! These will replace the start tag of the list code, which we've [url=https://www1.flightrising.com/forums/gde/2913485#post_44773052]previously seen.[/url][/list] So your final thing should be... [columns] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list][/columns] [code][columns] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list][/columns][/code] (Don't be afraid to compensate the text placement with extra spaces or paragraph breaks!) [/quote] [rule] After two very long lessons, we can finally get a shorter one, and this one is solely dedicated to columns! Columns are the base on which every pretty bio template you’ve ever seen is built, so it’s only fair that we address it with the depth it deserves. In our homework we’ve already coded a table, so you know how to make one! But columns have a serious problem:[b] they get wider according to the content[/b], so you can’t control their size… Or can you? [font=impact][size=6][color=maroon]Transparent[/font][/size][/color] [list] [*]It’s time to introduce your next best friend: [b]Transparent color![/b] You can make text invisible by using the color tag with the name "transparent". You can still highlight it with your mouse to see it. [color=transparent]shhh, it's a secret![/color] <- it's here [code][color=transparent]shhh, it's a secret![/color][/code] [*]Now here's why transparent is so uselful: [b]you can use it to control the size of columns and positioning of elements.[/b] [/list] [font=impact][size=6][color=maroon]Column size[/font][/size][/color] [list] [*]The simplest way to control column size is to break up the text with enter every time a line gets too big. But that's not always possible. [*]Two other ways you can control a column's size. You already know about [b]transparent text[/b], the second way is with a [b]transparent image[/b]. [*]Take these columns: [quote] [columns] [item=honeybee][item=stingless bee] [item=perdita bee][item=sugarbee][nextcol] According to all known laws of aviation, there is no way a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway because bees don't care what humans think is impossible. Yellow, black. Yellow, black. Yellow, black. Yellow, black. Ooh, black and yellow! Let's shake it up a little. Barry! Breakfast is ready! Ooming! Hang on a second. Hello? - Barry? - Adam? - Can you believe this is happening? - I can't. I'll pick you up. Looking sharp. Use the stairs. Your father paid good money for those. Sorry. I'm excited. Here's the graduate. We're very proud of you, son.[/columns] [/quote] This doesn't use any extra tags. Just the plain old items, nextcol and text. But there's a problem, [b]I want the items to show in a square, 2x2. [/b] [*]First, [b]let's understand why it doesn't look like that already[/b]. I placed my items in a 2x2 square in the code, but the other column is so big that my items get adjusted to occupy the smallest size. The text has no enter breaks (paragraph breaks), so it fills up left to right nonstop. Because of this, the column stretches as far as it can, [b]only making an automatic line break when it's pressed against the smallest element in the adjacent column: one item box. [/b] [*]This is where transparent comes in handy. By placing a transparent placeholder text on top of the fist column with no spaces, [b]the smallest item in the adjacent column becomes the placeholder text. [/b] [*]The easiest way to make placeholder text is with a series of underbars: [code][color=transparent]_____________________________[/color][/code] So if I copy these and put them on top of the first column.... [quote] [columns] [color=transparent]_____________________________[/color] [item=honeybee][item=stingless bee] [item=perdita bee][item=sugarbee] [nextcol] According to all known laws of aviation, there is no way a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway because bees don't care what humans think is impossible. Yellow, black. Yellow, black. Yellow, black. Yellow, black. Ooh, black and yellow! Let's shake it up a little. Barry! Breakfast is ready! Ooming! Hang on a second. Hello? - Barry? - Adam? - Can you believe this is happening? - I can't. I'll pick you up. Looking sharp. Use the stairs. Your father paid good money for those. Sorry. I'm excited. Here's the graduate. We're very proud of you, son.[/columns] [/quote] My column now adjusts to the size of the underbar line, which is slightly bigger than two items placed side by side. Success! [code][columns] [color=transparent]_____________________________[/color] [item=honeybee][item=stingless bee] [item=perdita bee][item=sugarbee] [nextcol] According to all known laws of aviation, (...)[/columns][/code] [*]You can also do this by [b]creating a 1 pixel high transparent image[/b] with the width that you need and placing it on top of the column. An image will take up less code space, but it's way less flexible, as you'd need a different image for every different length you want.[/list] [font=impact][size=6][color=maroon]Small Quotes[/font][/size][/color] [List] [*]Here's a fun one! Unlike the code boxes, quotes adjust to column size (as well as to indents and lists). So if you make a small column, you can make a small quote! [columns][quote]I am baby[/quote][/columns] [code][columns][quote]I am baby[/quote][/columns][/code] Or a series of them! [columns][quote=J]I am baby[/quote][nextcol][quote=G]...Jeremy you're a 357 year old grown dragon.[/quote][nextcol][quote=J]I AM BABY.[/quote][/columns] [code][columns][quote=J]I am baby[/quote][nextcol][quote=G]...Jeremy you're a 357 year old grown dragon.[/quote][nextcol][quote=J]I AM BABY.[/quote][/columns][/code][/list] [rule] [color=maroon][Size=6][font=impact]Homework time![/size][/font][/color] Your homework today is to take the previous table you made (the one with the lists) and make the three columns an equal size, taking up the whole bio space! If your list has long texts, you can also remove your paragraph breaks and leave it to the automatic line break, now that your columns have a fixed size! (It'll yield you some colorful stationery!) [center][url=https://www1.flightrising.com/forums/gde/2913485/][img]https://media.discordapp.net/attachments/739220177912070224/760734894946517002/badge_stationery.png[/img][/url][/center] [code][url=https://www1.flightrising.com/forums/gde/2913485/][img]https://media.discordapp.net/attachments/739220177912070224/760734894946517002/badge_stationery.png[/img][/url][/code] And the challenge for today is this: Make a new table. This one has only two columns, and in each column is a quote box with some text. But this time, you have to [b]make your columns no wider than two item icons side by side, and center your table in the bio[/b] box. [columns][quote][item=plague sprite][item=plague sprite][/quote] [nextcol] <-This is the max width.[/columns] Find a way to center your two columns it in the bio box, leaving space to the sides. Then, in one of the columns, I want you to place the same item in four different lines (stacked on top of each other), with each instance of the item moved a little more to the right. The final instance of the item should be completely aligned with the right side of the quote! Next time we'll start making actual layouts! Be sure to know your tags by then, because we will be mixing and matching them a lot! [emoji=special eyes size=1][emoji=special eyes size=1]

[img]https://media.discordapp.net/attachments/759622347237097472/761750988049612830/bannerlayout.png[/img] [Rule][quote] [font=impact][size=6][color=maroon]Homework answers[/font][/size][/color] [List] [*]So, making all columns the same size in your list from lesson 3! This can be accomplished with a transparent line placed on top of each column![/list] [columns] [color=transparent]__________________________[/color] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [color=transparent]__________________________[/color] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [color=transparent]__________________________[/color] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list] [/columns] [code][columns] [color=transparent]__________________________[/color] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [color=transparent]__________________________[/color] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [color=transparent]__________________________[/color] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list] [/columns][/code] [list] [*]Don't forget you can highlight these columns with your mouse to see the transparent placeholders! They will appear as barely noticeable white lines on top of each column. [*]To control column size, you must always keep in mind that [b]columns will always expand to fill up the post/bio space. [/b] This means that if you want them truly equal, you must adjust your placeholder transparents to fill up the entire bio space. [*]It takes [b]lots of trying and previewing to get them the right size[/b]. If your placeholders are too small the columns won't be spaced out evenly, and if they are too big your columns will "break".[/list] [columns] [color=transparent]____________________[/color] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [color=transparent]____________________[/color] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [color=transparent]____________________[/color] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list] [/columns] [indent]These placeholders are too small. they don't fill up the space. This looks fine as with the small text I currently have, but if we were to make the text longer without paragraph breaks, [b]the columns would keep expanding[/b], as they haven't filled up the whole post space yet. Automatic line breaks will only happen when there's no space left for the column to expand![/indent] [columns] [color=transparent]___________________________________[/color] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [color=transparent]___________________________________[/color] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [color=transparent]___________________________________[/color] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list] [/columns] [indent]These placeholders are so big, they're breaking my layout! In here they are going off the screen, but in a dragon bio your columns would start to move to the line below and completely mess up the layout.[/indent] [list] [*]So, be sure to test out the sizes until you can achieve the right one! [*]Another advantage of using transparent images instead of transparent text is that you don't have to keep testing out sizes: their size is fixed![/list] Now the challenge! [font=impact][size=6][color=maroon]Center+Columns[/font][/size][/color] [list] [*]To center my two columns inside of the post, I can't just use center tags because they don't work around columns. So, [b]I will push my columns with content to the center using an "empty" column before them![/b] [*] My empty column will have a transparent placeholder to push the other columns to the right. On the next two columns I will add my content.[/list] [columns][color=transparent]___________________[/color] [nextcol] [quote]content[/quote] [nextcol] [quote]content[/quote] [/columns] [code][columns][color=transparent]___________________[/color] [nextcol] [quote]content[/quote] [nextcol] [quote]content[/quote] [/columns][/code] [list] [*]But if we try to fill up the content with text...[/list] [columns][color=transparent]___________________[/color] [nextcol] [quote]Interior crocodile alligator I drive a Chevrolet movie theater Interior crocodile alligator I drive a Chevrolet movie theater[/quote] [nextcol] [quote]content[/quote] [/columns] [code][columns][color=transparent]___________________[/color] [nextcol] [quote]Interior crocodile alligator I drive a Chevrolet movie theater Interior crocodile alligator I drive a Chevrolet movie theater[/quote] [nextcol] [quote]content[/quote] [/columns][/code] [list] [*]This happens because as we said, columns will always expand to fill the entire post space. So I add text, and the column expands until it's squeezed against the other two elements (My transparent placeholder and the other quote). [*]To prevent the column from expanding more than we want it to, [b]we must add a placeholder to the other side. [/b] With no space left to expand, it'll stay a fixed size - and make automatic line breaks! [/list] [columns][color=transparent]___________________[/color] [nextcol] [quote]Interior crocodile alligator I drive a Chevrolet movie theater Interior crocodile alligator I drive a Chevrolet movie theater[/quote] [nextcol] [quote]content[/quote] [nextcol] [color=transparent]___________________[/color] [/columns] [code][columns][color=transparent]___________________[/color] [nextcol] [quote]Interior crocodile alligator I drive a Chevrolet movie theater Interior crocodile alligator I drive a Chevrolet movie theater[/quote] [nextcol] [quote]content[/quote] [nextcol] [color=transparent]___________________[/color] [/columns][/code] [list] [*]And if you want these columns to be the same witdh? [b]By placing transparents on top of each column you can dictate the column width.[/b] Mine is the first thing inside of the quote, but they could be anywhere on the length of the column.[/list] [columns][color=transparent]___________________[/color] [nextcol] [quote] [color=transparent]________________[/color] Interior crocodile alligator I drive a Chevrolet movie theater Interior crocodile alligator I drive a Chevrolet movie theater[/quote] [nextcol] [quote] [color=transparent]________________[/color] content[/quote] [nextcol] [color=transparent]___________________[/color] [/columns] [code][columns][color=transparent]___________________[/color] [nextcol] [quote] [color=transparent]________________[/color] Interior crocodile alligator I drive a Chevrolet movie theater Interior crocodile alligator I drive a Chevrolet movie theater[/quote] [nextcol] [quote] [color=transparent]________________[/color] content[/quote] [nextcol] [color=transparent]___________________[/color] [/columns][/code] [list] [*]Always preview to make sure your placeholders are taking up the length of the posting space or nearly the full length. Again, if they are too small they won't regulate the column size, and if they are too big your layout will get all out of place. Your placeholders, side by side, should fill up the length of the post:[/list] [color=maroon](____________)(Column 1 placeholder)(Column 2 placeholder)(____________)[/color] [list] [*]Of course you don't need to use placeholders on everything. You can let the content regulate the size, or only add them strictly where needed. I'm just explaining all the details.[/list] [columns][color=transparent]_____________________[/color] [nextcol] [quote]I am a perfectly good alternative[/quote] [nextcol] [quote]It's your code, you can make it as you wish![/quote] [/columns] [code][columns][color=transparent]_____________________[/color] [nextcol] [quote]I am a perfectly good alternative[/quote] [nextcol] [quote]It's your code, you can make it as you wish![/quote] [/columns][/code] [list] [*]Like we just did with the columns, you can push an image or item to the right by placing transparents before them. Do that to place our item a little bit further to the right on each of the 4 lines! [*]Here's what my end product looks like on a forum size![/list] [columns][color=transparent]_______[/color] [nextcol] [quote] [color=transparent]____________________________[/color] [item=plague sprite][item=plague sprite] I'm a quote that can fit exactly two item icons! And look at that, I have automatic line break, because I can't expand any further. Nice![/quote] [nextcol] [quote] [color=transparent]____________________________[/color] [item=plague sprite][item=plague sprite] [item=plague runestone] [color=transparent]_____[/color][item=plague runestone] [color=transparent]___________[/color][item=plague runestone] [right][item=plague runestone][/right] [/quote] [nextcol] [color=transparent]_______[/color][/columns] [code][columns][color=transparent]_______[/color] [nextcol] [quote] [color=transparent]____________________________[/color] [item=plague sprite][item=plague sprite] I'm a quote that can fit exactly two item icons! And look at that, I have automatic line break, because I can't expand any further. Nice! [/quote] [nextcol] [quote] [color=transparent]____________________________[/color] [item=plague sprite][item=plague sprite] [item=plague runestone] [color=transparent]_____[/color][item=plague runestone] [color=transparent]___________[/color][item=plague runestone] [right][item=plague runestone][/right] [/quote] [nextcol] [color=transparent]_______[/color][/columns][/code] [/quote] [rule] WHEW!! That was a lot!! These codes are getting very complex! In this lesson, we are going to look at all sorts of creative uses we can make of the tags that we have learned to insert and to control. [b]At this point you could have all sorts of trouble you don't know how to solve, so you are welcome to ping @Amayai or @Holoquest with questions if you have them![/b] Without further ado, here's more stuff on how to make a layout. [font=impact][size=6][color=maroon]Organization[/font][/size][/color] [List] [*]As your code gets bigger, it's harder to keep track of each part and easier to get lost. So it's important to make your code organized! [*]Most of the spaces between tags won't account for paragraph breaks, so make use of them to keep your code intelligible! [code][columns][user=amayai][list=1][*]Hi[*]Hello[*]Howdy[/list][nextcol][skin=19329][list=a][*]It's-a[*]me [*]Mario[/list][nextcol][img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png [/img][list=I][*]Julius[*]Ceasar[*]Salad[/list][/columns][/code] [code] [columns] [user=amayai] [list=1] [*]Hi [*]Hello [*]Howdy [/list] [nextcol] [skin=19329] [list=a] [*]It's-a [*]me [*]Mario [/list] [nextcol] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img] [list=I] [*]Julius [*]Ceasar [*]Salad [/list] [/columns][/code] [*]These are the same code. They will produce the exact same table. The first one is a mess because I just added everything back to back, and the places where I *did* make a paragraph were mid-element. [*]The second one, however, has clearly defined columns, and the elements within each col are distributed as they will show up in the thread: one under the other. [*]You can always compromise if you don't want to make your code take up this much space. For example, adding a paragraph break whenever you move to a new column! [code][columns] [user=amayai][list=1][*]Hi[*]Hello[*]Howdy[/list] [nextcol] [skin=19329][list=a][*]It's-a[*]me[*]Mario[/list] [nextcol] [img]https://www1.flightrising.com/rendern/portraits/612753/61275214p.png[/img][list=I][*]Julius[*]Ceasar[*]Salad[/list] [/columns][/code] [*][b]What matters is that you have a system that works for you.[/b] It's your code![/list] [font=impact][size=6][color=maroon]Column nesting[/font][/size][/color] [list] [*]You can nest nearly anything in bbcode. [list][*]like[list][*]lists[/list][/list] [quote][quote][quote]or quotes.[/quote][/quote][/quote] [*]Here's one that wasn't explicitly mentioned before, but will come in real handy when you are layouting: You can make columns within columns. [*]This is especially useful when making frames, or a layout with layers.[/list] [columns] [img]https://s3.postimg.cc/wcfpcudpv/Vertical2.png[/img] [nextcol] [center][img]https://s3.postimg.cc/dswtlg4qb/divider.png[/img][/center] [columns] Shrek: Layouts are like onions. Donkey: They stink? Shrek: Yes. No. Donkey: Oh, they make you cry. Shrek: No. Donkey: Oh, you leave em out in the sun, they get all brown, start sproutin’ little white hairs. [nextcol] Shrek: No. Layers. Onions have layers. Layouts have layers. Onions have layers. You get it? We both have layers. Donkey: Oh, you both have layers. Oh, you know, not everybody likes onions. [/columns] [center][img]https://s3.postimg.cc/dswtlg4qb/divider.png[/img][/center] [nextcol] [img]https://s3.postimg.cc/wcfpcudpv/Vertical2.png[/img] [/columns] [code][columns] [img]https://s3.postimg.cc/wcfpcudpv/Vertical2.png[/img] [nextcol] [center][img]https://s3.postimg.cc/dswtlg4qb/divider.png[/img][/center] [columns] Shrek: Layouts are like onions. Donkey: They stink? Shrek: Yes. No. Donkey: Oh, they make you cry. Shrek: No. Donkey: Oh, you leave em out in the sun, they get all brown, start sproutin’ little white hairs. [nextcol] Shrek: No. Layers. Onions have layers. Layouts have layers. Onions have layers. You get it? We both have layers. Donkey: Oh, you both have layers. Oh, you know, not everybody likes onions. [/columns] [center][img]https://s3.postimg.cc/dswtlg4qb/divider.png[/img][/center] [nextcol] [img]https://s3.postimg.cc/wcfpcudpv/Vertical2.png[/img] [/columns][/code] [center][url=https://www1.flightrising.com/forums/cc/2257922]Link to resources :)[/url][/center] [font=impact][size=6][color=maroon]Pixel sizes[/font][/size][/color] [list] [*]If you want to make images, either for your layout or as transparent placeholders, it's very useful to know the pixel width of different parts of the site! [*][size=5][color=maroon]Forums[/size][/color] The forum posts are [b]525 pixels[/b] wide. To split two columns exactly down the middle of a forum post, each should have a placeholder that is 262 pixels wide. [size=2](I myself have an image that is 262x1 pixels that I use to split a thread into two columns!)[/size] [*][size=5][color=maroon]Bios[/size][/color] Dragon bios are[b] 640 pixels[/b] wide. Here's a lifesaver: (click for source!) [url=https://task-fr.tumblr.com/post/137437669870/shahenor-dragonstothemax-im-working-on-bio][img]https://64.media.tumblr.com/2fae124e4ea018b00c57cbcdb6fa5db0/tumblr_o12bo2eunu1tew8vdo1_1280.png[/img][/url] [*]Before the profile revamps, bios had a horizontal scroll bar for elements that were too big. Today, thank the deities, they will automatically resize big images to fit the 640 pixel width! [*][b]With a vista,[/b] bios become [b]515 pixels[/b] wide. A little smaller than a thread, but conveniently close enough to practice or prepare a forum post in! You can halve this with 257x1 pixel placeholders. [*][size=5][color=maroon]Clan Profiles[/size][/color] These are [b]430 pixels wide and max 190 pixels tall[/b] before the scroll bar activates. You will lose 17 pixels to the [b]scroll bar[/b], making the profile [b]413 pixels[/b] wide. [*][size=5][color=maroon]Signatures[/size][/color] Signatures are [b]525 pixels wide and max 100 pixels tall[/b] Speak of, let's talk about them....[/list] [font=impact][size=6][color=maroon] Signatures[/font][/size][/color] [list] [*]You might have seen a few signatures around that clip on the bottom (they cut off the lower part of images). Maybe it's yours. But then you look at the image dimensions and it's 100 pixels tall. Why is it clipping? [*]Remember how the columns tag adds a line break? [b]If you use columns in your signature, the content will be pushed down a line[/b] - so if your content is the exact height of a bio, it will clip at the bottom. [*]To fix this either don't use columns and just add things side by side, or keep your bio images 90 to 95 pixels tall to compensate for the extra line. [rule] [*]What about those fancy image signatures that link to different things on different parts of the image? [*]That's day 2 code! It's [b]one image split into parts, and each part links to one thing.[/b] Like our push's gorgeous signature banner![/list] [emoji=rainbow star 1 size=1][size=6]Tip[/size] Using columns will also leave a while line between each column, so if you place images on your signature that you want to seamlessly connect, refrain from using columns and just place them side by side! [center][url=https://www1.flightrising.com/forums/frd/2913381/1#post_44770599][img]https://i.imgur.com/ScQ5BJt.png[/img][/url][url=https://www1.flightrising.com/forums/fd2/2913060][img]https://i.imgur.com/sIjijx6.png[/img][/url][url=https://www1.flightrising.com/forums/raf/2913062#post_2913062][img]https://i.imgur.com/bO13FlQ.png[/img][/url] [code][url=https://www1.flightrising.com/forums/frd/2913381/1#post_44770599][img]https://i.imgur.com/ScQ5BJt.png[/img][/url][url=https://www1.flightrising.com/forums/fd2/2913060][img]https://i.imgur.com/sIjijx6.png[/img][/url][url=https://www1.flightrising.com/forums/raf/2913062#post_2913062][img]https://i.imgur.com/bO13FlQ.png[/img][/url][/code] [size=6][font=vivaldi]Yeah Babey![/font][/size][/center] [columns][url=https://www1.flightrising.com/forums/frd/2913381/1#post_44770599][img]https://i.imgur.com/ScQ5BJt.png[/img][/url][nextcol][url=https://www1.flightrising.com/forums/fd2/2913060][img]https://i.imgur.com/sIjijx6.png[/img][/url][nextcol][url=https://www1.flightrising.com/forums/raf/2913062#post_2913062][img]https://i.imgur.com/bO13FlQ.png[/img][/url] [/columns] [code][columns][url=https://www1.flightrising.com/forums/frd/2913381/1#post_44770599][img]https://i.imgur.com/ScQ5BJt.png[/img][/url] [nextcol] [url=https://www1.flightrising.com/forums/fd2/2913060][img]https://i.imgur.com/sIjijx6.png[/img][/url] [nextcol] [url=https://www1.flightrising.com/forums/raf/2913062#post_2913062][img]https://i.imgur.com/bO13FlQ.png[/img][/url] [/columns][/code] [center][size=6][font=Papyrus][b]No Babey![/b][/font][/size][/center] [font=impact][size=6][color=maroon]Visual resources![/font][/size][/color] [list] [*]THE FUN PART IS HERE! The best part about layouting is using beautiful visual resources to fancy up your post! [*][emoji=rainbow star 1 size=1][url=https://www1.flightrising.com/forums/gde/1777871]This thread is a masterlist of all free to use visual resources, ever. [/url] Bookmark it!! [*][emoji=rainbow star 1 size=1][url=https://www1.flightrising.com/forums/gde/2135618]This one has nearly all images that can be extracted from Flight Rising![/url] I know these can seem daunting, so if you're feeling intimidated and don't know where to start, I recommend trying to make a layout with [url=https://postimg.cc/gallery/TdH3LKv]these candles[/url]. The same ones I used for the shrek- I mean, layered layout. The source thread is also liked above![/list] [rule] [font=impact][size=6][color=maroon]Homework time![/font][/size][/color] You might have guessed it: Today's homework is to [b]create a full bio layout![/b] It doesn't have to be big - it can be as small and simple as the examples I have in this post. You have total creative freedom this time, so we're looking forward to what you'll do! Reminding you again that you can ping me or Holoquest if you can't figure out how to make something work, or if you have a question about something that wasn't clear. If it's about a specific problem, don't forget to include your code in the post or in a code box in the bio so we can see it! And this week's homework is totally deserving of two badges, so please enjoy our little confused friends! [center][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/761444317465542696/badge_confus.png[/img][/url][/center] [code][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/761444317465542696/badge_confus.png[/img][/url][/code] [center][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/761444431508275230/badge_confus2.png[/img][/url][/center] [code][url=https://www1.flightrising.com/forums/gde/2913485][img]https://media.discordapp.net/attachments/739220177912070224/761444431508275230/badge_confus2.png[/img][/url][/code] (Now you must be thinking, what could we possibly have left for lesson 6? I guess you'll have to stay and find out! [emoji=special eyes size=1])

[img]https://media.discordapp.net/attachments/759622347237097472/759895763857178634/bannerdesign.png[/img] [Rule] You guys made such nice layouts for the last homework! Surprisingly, we got no pings with questions, which I guess is a pretty good sign! What could be left for today? Well it's one thing to make a layout. It's another thing to make a *pretty* layout. So in this final lesson I'm going to drop a few design tips so you can make your layouts [b]neat, organized, readable and not tiring to the eye![/b] Ready? Let's go! [font=impact][size=6][color=maroon]Alignment[/font][/size][/color] [List] [*]Do you know why left alignment is the default, and not center alignment? One of the biggest consensus in graphic design is that blocks of text are easier to read when every line starts at the same point. This is especially true for large blocks of text. [*]Here's why: When you finish reading one line, your eyes have to move all the way back to find the start of the next line. If you've gotten lost in a big text before, you know what I'm talking about: you start reading the next line and realize you are on the same line you just read. Or maybe the phrase doesn't make sense and you realize you skipped a line. [*][b]When you align left[/b], all lines start at the same point, and your eyes don't have to scan the page looking for where the next line starts. [b]This makes reading easier, faster and uninterrupted.[/b] [quote][columns] I really wanted to fill this text with the lyrics to Never Gonna Give You Up but I realized you guys yould probably glaze over it without a read. So here's the lyrics to another awesome 80s song. [nextcol][color=transparent]________________[/color][nextcol] [right]Welcome to your life, there's no turning back, even while we sleep, we will find you, acting on your best behaviour, turn your back on mother nature, everybody wants to rule the world. It's my own design, it's my own remorse, help me to[/right] [/columns][/quote] [*]Do you notice how the left align is a faster read? You know where every line starts so your eyes skip right to it. The same happens with [b]center align. Lines don't have a fixed starting point, so they are a slower read.[/b] [*]Another HUGE disadvantage of center and right align is that [b]you can't clearly tell paragraph breaks.[/b] This makes a multiple paragraph text look like a huge block with no breaks that anyone not deeply interested will dread reading. [*][b]This is not to say that you should never use center or right aligned text.[/b] It is great for small pieces of text! [quote] [columns] [color=transparent]_____________[/color] [nextcol] [img]https://s3.postimg.cc/aw9sl5ywj/Square-3.png[/img] [nextcol] [center]Like short text pieces that you want to give a special highlight to! "In violent times You shouldn't have to sell your soul In black and white They really really ought to know" [/center] [nextcol][img]https://s3.postimg.cc/rg7h7eo6r/square2.png[/img] [/columns] [rule] [center][size=6][size=6][font=Times New Roman]Or Titles![/size][/size][/font][/center] [rule] [columns] [color=transparent]_________[/color] [nextcol] [right]Or maybe for short descriptions and captions. It's very common to see text aligned right against an image like this![/right] [nextcol] [img]https://www1.flightrising.com/static/cms/familiar/art/34717.png[/img] [/columns] [/quote] [*]In short, your best pick is to leave text left-aligned for blocks of text, and save the other alignments only for very specific parts of your content, like titles and that one subtitle that needs it.[/list] [emoji=rainbow star 1 size=1][size=6]Tip[/size] Be mindful of how the loose side of your alignment is looking! Your text will be harder to read if the difference between lines is too big. Not to mention it will look boken and inconsistent. (Yes, this includes having a full paragraph and leaving only one word in the last line!!) [quote][columns] Welcome to your life, there's no turning back, even while we sleep, we will find you, acting on your best behaviour, turn your back on mother nature, everybody wants to rule the world. It's my own design, it's my own remorse, [size=6]Big Yikes![/size] [nextcol][color=transparent]_____[/color][nextcol] Welcome to your life, there's no turning back, even while we sleep, we will find you, acting on your best behaviour, turn your back on mother nature, everybody wants to rule the world. It's my own design, it's my own remorse, [size=6]Much better![/size] [/columns] [/quote] If you need to, change the text or insert your own paragraph breaks to make the text look more balanced! Try to keep your lines a similar size. Alternatively, have them follow a diagonal line, like my aberrant chacma caption! Like a little staircase. [font=impact][size=6][color=maroon]Font[/font][/size][/color] [List] [*]I know it's amazing to have a wide range of fonts to pick from and make your text look distinguished, but you can't just pick any font for your text. [Font=Vivaldi]THIS IS UNINTELLIGIBLE[/font] [code][Font=Vivaldi]THIS IS UNINTELLIGIBLE[/font][/code] I don't know about you, but I can't read a word of this. Not all fonts are good for reading! [*] I know you may think that regular fonts look bland, but they are so because they are the most adequate for reading. Frilly fancy fonts are called "Decorative fonts" in typography, because they are made for titles and for decoration, not for blocks of text. [*]For example: can you image reading someone's entire lore in Curlz MT? [quote][font=curlz MT][size=7]Shout[/size] [size=2]Tears for Fears[/size] Shout, Shout, Let it all out These are the things I can do without Come on, I'm talking to you, Come on. In violent times you shouldn't have to sell your soul. In black and white they really really ought to know[/font][/quote] [*]It's not an easy read, is it? It wouldn't be much better if the text was bigger, either! If you save decorative fonts for titles and short isolated texts, your layout will be clearer, readable and it will still get that fancy touch you wanted! [quote][size=7][font=curlz MT]Shout[/font][/size] [size=2]Tears for Fears[/size] Shout, Shout, Let it all out These are the things I can do without Come on, I'm talking to you, Come on. In violent times you shouldn't have to sell your soul. In black and white they really really ought to know[/quote] [*]Here's another thing to clarify when picking a font for large blocks of text! There's (generally speaking) two types of non-decorative fonts. [font=times new roman][size=7]Serif fonts[/size][/font] are the ones with these appendages on the base and edges of letters. They are the best suited font for books and print texts! [size=6]Sans serif fonts[/size] are those that only have the structure of the letter. They are best suited for reading in screens and digital media! Hence why FR's default font is sans serif. [*]Your best picks would be a sans serif font for long texts like your lore or fanfic, and saving serif fonts for medium-sized paragraphs, descriptions or short texts, or just for titles. Serif fonts are still super readable on screens, [i]but sans serif is more[/i], so reflect that in your font choices! The bigger the text, the more readable a font you should pick! [/list] [font=impact][size=6][color=maroon]Spacing[/font][/size][/color] [List] [*]Do you know one of the biggest telltale signs of an amateur design? Every blank space must be occupied. Breathing space who? I don't know her. [*]You don't have to fill up every single space on screen with an image or text or decoration. Be mindful of Visual pollution. [quote] [img]https://i.postimg.cc/vHRxFKC6/Venue-Big.png[/img] [columns] [img]https://i.postimg.cc/YS7vGmt2/Item-11.png[/img] [img]https://i.postimg.cc/DZym5kWt/Item-6.png[/img] [nextcol] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet justo viverra, tempor velit vel, vestibulum justo. Etiam felis lacus, molestie eu ligula in, facilisis porttitor tortor. In rutrum efficitur cursus. Pellentesque quis ex metus. Nulla eget ullamcorper risus. Nullam sit amet augue diam. Mauris tortor diam, efficitur eu nisl in, convallis blandit arcu. Quisque tortor ligula, vulputate vel nisi sed, luctus laoreet lectus. Vivamus dapibus iaculis imperdiet. In consequat, tellus a mollis hendrerit, magna quam laoreet risus, vel auctor est dui sit amet ligula. Donec nec viverra neque, at blandit orci. Proin euismod aliquam lectus, sit amet bibendum urna euismod ac. Nunc et tortor at urna faucibus pellentesque. Nunc sit amet est elementum, pretium dolor quis, pharetra diam. [nextcol] [img]https://i.imgur.com/yFar9oN.png[/img] [img]https://i.postimg.cc/132KLB0C/Avatar-right.png[/img] [img]https://i.imgur.com/tKwaOn3.png[/img] [/columns] [img]https://i.postimg.cc/BbF8P5P6/Venue-Narrow.png[/img] [/quote] [*]This feels kinda like having 3 people talking to you at the same time, but for your eyes. [quote] [img]https://i.postimg.cc/vHRxFKC6/Venue-Big.png[/img] [columns] [img]https://i.postimg.cc/YS7vGmt2/Item-11.png[/img] [img]https://i.postimg.cc/DZym5kWt/Item-6.png[/img] [nextcol] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet justo viverra, tempor velit vel, vestibulum justo. Etiam felis lacus, molestie eu ligula in, facilisis porttitor tortor. In rutrum efficitur cursus. Pellentesque quis ex metus. Nulla eget ullamcorper risus. Nullam sit amet augue diam. Mauris tortor diam, efficitur eu nisl in, convallis blandit arcu. Quisque tortor ligula, vulputate vel nisi sed, luctus laoreet lectus. Vivamus dapibus iaculis imperdiet. In consequat, tellus a mollis hendrerit, magna quam laoreet risus, vel auctor est dui sit amet ligula. Donec nec viverra neque, at blandit orci. Proin euismod aliquam lectus, sit amet bibendum urna euismod ac. Nunc et tortor at urna faucibus pellentesque. Nunc sit amet est elementum, pretium dolor quis, pharetra diam. [nextcol] [color=transparent]____________[/color] [/columns] [img]https://i.postimg.cc/BbF8P5P6/Venue-Narrow.png[/img] [/quote] [*]If you leave some breathing space between elements and refrain from stuffing the right column with elements... doesn't it look less overwhelming? Blank spaces won't make your design look incomplete, so don't feel the need to cramp everything everywhere. [quote] [img]https://i.postimg.cc/vHRxFKC6/Venue-Big.png[/img] [columns] [img]https://i.postimg.cc/YS7vGmt2/Item-11.png[/img] [img]https://i.postimg.cc/DZym5kWt/Item-6.png[/img] [nextcol][color=transparent]__[/color][nextcol] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet justo viverra, tempor velit vel, vestibulum justo. Etiam felis lacus, molestie eu ligula in, facilisis porttitor tortor. In rutrum efficitur cursus. Pellentesque quis ex metus. Nulla eget ullamcorper risus. Nullam sit amet augue diam. Mauris tortor diam, efficitur eu nisl in, convallis blandit arcu. Quisque tortor ligula, vulputate vel nisi sed, luctus laoreet lectus. Vivamus dapibus iaculis imperdiet. In consequat, tellus a mollis hendrerit, magna quam laoreet risus, vel auctor est dui sit amet ligula. Donec nec viverra neque, at blandit orci. Proin euismod aliquam lectus, sit amet bibendum urna euismod ac. Nunc et tortor at urna faucibus pellentesque. Nunc sit amet est elementum, pretium dolor quis, pharetra diam. [nextcol][color=transparent]__[/color][nextcol] [img]https://i.postimg.cc/YS7vGmt2/Item-11.png[/img] [img]https://i.postimg.cc/DZym5kWt/Item-6.png[/img] [/columns] [img]https://i.postimg.cc/BbF8P5P6/Venue-Narrow.png[/img] [/quote] [*]If you [i]want[/i] to make your layout boxy, or full and crowded, try working with repeating elements! This will offer less information at once (so less overwhelming), and the uniformity will make it register more like framing instead of just a bunch of elements tossed in. [*]Don't forget to add spacing between elements though - that's still crucial to prevent visual pollution. In here I spaced out the crystal pools dividers from the main content, and added a small "__" placeholder on each side of the text so it would be further away from the item icons.[/list] [font=impact][size=6][color=maroon]Break it down[/font][/size][/color] [List] [*]How do you eat an elephant? One bite after the other! Your lore or short story may be amazing, but if it's dumped into a huge block of text with huge paragraphs and no visual breaks (not as much as a divider!), people will look at it and NOPE right out of your page. [*][b]Make paragraph breaks![/b] A good rule of thumb is that paragraphs should have a bare minimum of two phrases (3 if you write short phrases), and when it starts to look like a square, it's getting too big. [*]This doesn't only apply to text. You should group related information together in your layout. The most basic ways to group elements together in a layout are [b]proximity, alignment and similarity[/b]. [*][size=5][color=maroon]Proximity[/size][/color] the closer elements are, the more they look like they belong in the same category. Respectively, if one element is further apart than the others, this element will be percieved as being alone in a different subcategory. [img]https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Gestalt_proximity.svg/1920px-Gestalt_proximity.svg.png[/img] Here we see two main groups: The left example and the right example. The left example is one solid subgroup, and the right example has 3 subgroups. Each of these groups we're seeing is solely estabilished because they have different distances from each other. [*][size=5][color=maroon]Alignment[/size][/color] Here I don't mean right center or left align, but where is the invisible line your text is following? What's the axis it goes down to? [quote]| This follows one alignment line that I illustrated here on the left with lines! | [indent]| This follows another alignment line, not the same as the paragraph above. |[/indent] [/quote] If your pieces of text follow the same invisible alignment line, they will be seen as a group. It's what I'm doing with my topic titles and contents! This content is on the same alignment, so you know it all belongs to one group: the contents of the "break it down" topic. [*][size=5][color=maroon]Similarity[/size][/color] Look at the word "similarity" above. You can tell it's a subtopic title, just like "Proximity" and "Alignment" before it. And just like "Forums""Bios" and "Clan profiles" in the lesson above. Why is that? Well they have the same alignment but so does the rest of the contents of each topic. And they're absolutely far apart. What groups them is similarity! They have the same color, size and font and they all have a bullet point before them. My topic titles all have the same appearance as well, across all posts. This makes clear that they are part of the same category: the topics that are being explained each lesson. If your elements are consistent, they will be percieved as one group or category! [*]So by applying a few of these grouping rules to break up our text, we could modify a solid block of text into a very distinguishable series of groups, to make your layout organized and visual. [quote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet justo viverra, tempor velit vel, vestibulum justo. Etiam felis lacus, molestie eu ligula in, facilisis porttitor tortor. In rutrum efficitur cursus. Pellentesque quis ex metus. Nulla eget ullamcorper risus. Nullam sit amet augue diam. Mauris tortor diam, efficitur eu nisl in, convallis blandit arcu. Quisque tortor ligula, vulputate vel nisi sed, luctus laoreet lectus. Vivamus dapibus iaculis imperdiet. In consequat, tellus a mollis hendrerit, magna quam laoreet risus, vel auctor est dui sit amet ligula. Donec nec viverra neque, at blandit orci. Proin euismod aliquam lectus, sit amet bibendum urna euismod ac. Nunc et tortor at urna faucibus pellentesque. Nunc sit amet est elementum, pretium dolor quis, pharetra diam. [/quote] [quote][color=red][size=5]Lorem[/size][/color] ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet justo viverra, tempor velit vel, vestibulum justo. Etiam felis lacus, molestie eu ligula in, facilisis porttitor tortor. In rutrum efficitur cursus. Pellentesque quis ex metus. Nulla eget ullamcorper risus. Nullam sit amet augue diam. [b]Mauris tortor diam, [/b] [indent]efficitur eu nisl in, convallis blandit arcu. Quisque tortor ligula, vulputate vel nisi sed, luctus laoreet lectus. Vivamus dapibus iaculis imperdiet. [/indent] [b]In consequat,[/b] [indent]tellus a mollis hendrerit, magna quam laoreet risus, vel auctor est dui sit amet ligula. Donec nec viverra neque, at blandit orci. [/indent] Proin euismod aliquam lectus, sit amet bibendum urna euismod ac. Nunc et tortor at urna faucibus pellentesque. Nunc sit amet est elementum, pretium dolor quis, pharetra diam. [/quote] [/list] [rule] There are a lot more things that we could discuss about design and organizing information, but it would go on forever. I hope these tips, as simple as they are, will help you make prettier layouts for your posts, signatures, bios, and whatever other places where you could apply them! And with that, we must say goodbye... [center][font=impact][size=6][color=maroon]Congrats on graduating BBCode School![/font][/size][/color][/center] Please have the final badge we have prepared for you! [center][url=https://www1.flightrising.com/forums/gde/2913485/][img]https://media.discordapp.net/attachments/739220177912070224/762174248893546497/backpackboye.png[/img][/url][/center] [code][url=https://www1.flightrising.com/forums/gde/2913485/][img]https://media.discordapp.net/attachments/739220177912070224/762174248893546497/backpackboye.png[/img][/url][/code] We hope that this thread has enlightened you with lots of knowledge and lots of intellectual baggage to code wonderful things. [b]Thank you all so much for participating in this with us! [/b] Make good use of your newfound layouting powers! :)

@Amayai, I would like to be placed on the pinglist please.

[quote name="Katsuji" date="2020-09-27 00:46:29" ] @Amayai, I would like to be placed on the pinglist please. [/quote] Me too, please! @Barrdwing Thought you might be interested in this, it looks pretty useful! ^^