Tutorial How to Prettify A Code

[Amerikia1126]

So you want to make pretty code?​

You came to the right place.​

I'd like help with something else.

I want to request a bbcode!*
*Filter by prefix, choose "Accepting Requests"

I want help with bbcode!

I want to learn how to use a bbcode!

I want to make aesthetically pleasing bbcode!

I don't understand bbcode at all!

This is an bbcode guide in aesthetics meant to make codes look just a little bit nicer. This guide will not be covering how to code from scratch but rather more along the lines of quick fixes able to be applied to current codes.

• Before You Begin...
• Quick Fixes
• Recreating Top Bar Effects

• Before you begin...
  Go here to disable disable the rich text editor.
  You will have to untick the box next to "Use the rich text editor to create and edit messages".
  
  Why? Well, the rich text editor loves to muck with your pretty code. It adds unnecessary code and makes things really messy under the hood, so please disable it if you intend to heavily use bbcode in your posts.
  
  THIS DOES NOT FULLY DISABLE THE RICH TEXT EDITOR. You know when you make a post and click edit, how a box pops up? Yeah, that's the rich text editor in disguise. Click "more options" to take you to the bbcode editor. This is where you'll be spending most of your time coding.
  
  Note, the preview will be slightly off, so I suggest you make a thread in your private workshop so you can test out your code's true appearance in private.
  
  Help! The top bar is gone! Yes, that's supposed to happen. This isn't like IPS where there was one text editor, the bbcode editor is different. You can still do everything you can do with the top bar. What the top bar does is automatically insert the code for it when you click that button, making things more user friendly. Generally, this is a good thing, but since we want to do these things ourselves, having the rich text editor on is not a good idea. The top bar bbcodes are located here, so if you're looking for those, they're here.
• Quick Fixes
  Centerblock
  Centerblock can make any code look better. the way you use it is by putting it at the beginning and end of every post. In fact, this post uses centerblock! Notice how the text doesn't go all the way to the edge? That's centerblock at work.
  
  [centerblock=#]YOUR POST HERE[/centerblock]
  
  Centerblock is a percentage without the percent sign, the default post being at centerblock 100. Generally, a number between 50 and 90 works best. Note, this is a a wide range and somewhere between 60 and 80 is more heavily suggested due to mobile users. It's a hard balance making things look good on both ends of the spectrum. This post uses centerblock 75 for reference.
  
  Accordions
  For a better grasp on how an accordion works and what you can do to them, see this thread.
  
  How do I make a scrollbar? To make a scroll bar, you must edit the slide part of the accordion.
  
  [accordion]{slide=500|Title}YOUR TEXT HERE{/slide}[/accordion]
  
  That 500 in the slide code tells it to make a scrollbar that stops at 500 pixels. You can change this to a smaller number, but note that having a large amount of text showing at one or two lines at a time can be very aggravating. A neat trick is that you can have slides with and without scrollbars in the same accordion, as well as with scrollbars of different sizes.
  
  Also make note that mobile users may have a hard time seeing your scrollbar. On android, at least, scrollbars do not show up unless you are scrolling them, so if that user doesn't see there's a scrollbar, they won't be able to read the rest of your text.
  
  Help! My accordion is clipping/too big/half gone! This is usually due to the use of rows and columns. Don't worry! You don't have to remove your rows and columns. All you have to do is tell the code to stay inside its boundaries.
  
  [accordion]{slide=100%|Title}YOUR TEXT HERE{/slide}[/accordion]
  
  This tells the accordion to use 100% of the available space, meaning it will stay within the confines of its column. Without this code, the accordion will assume the width of a normal post, which isn't the best.
  
  Image Floats
  Imagefloats are best used at the top of a large amount of text or in the middle of it. This is to help prevent the common problem of your background stopping before it reaches the bottom of your image. If you wish to use the imagefloat code for an image at the bottom of your post, it is best to space things out a little.
  
  [bg=#e0162b]YOUR TEXT HERE
  [imagefloat=right][img]http://i.imgur.com/fJn9Zy7.png[/img][/imagefloat]
  
  
  
  
  
  [color=transparent]text[/color][/bg]
  
  This code is an example of an imagefloat after some text, all on a background. The amount of white space needed between your image and the text at the bottom depends on the size of your image. It's best to play around with this, which is why I highly suggest using your private workshop to do so.
  
• Recreating Top Bar Effects
  This is the top bar, found in the rich text editor. This tab will show you how to recreate everything you can do in the top bar with bbcode.
  
  
  
  
  From left to right we have:
  bold.
  [b]text[/b]
  
  italics.
  [i]text[/i]
  
  underline.
  [u]text[/u]
  
  color.
  [color=color name, hex code, or rgb code here]text[/color]
  
  size.
  [size=any whole number between 1 and 7 here]text[/size]
  
  font.
  [font=font name here. see google fonts for more options]text[/font]
  
  url.
  [url=insert url here]insert display text here[/url]
  
  remove url.
  [url=insert url here]insert display text here[/url] + your backspace key
  
  align.
  [left]text[/left] or [center]text[/center] or [right]text[/right]
  
  bulleted list.
  [list][*]list item 1 [*]list item 2, etc. yes you can space these out.[/list]
  
  numbered list.
  [list=1][*]list item 1 [*]list item 2, etc. yes these can also be spaced out.[/list]
  
  outdent.
  [indent]text[/indent] + your backspace key
  
  indent.
  [indent]text[/indent]
  
  smilies.
  
  Spoiler

  D:
  
  -_- :-_-lines: :b/: :csmile: :closedeyescryingfrown: :closedeyesfrown: :closed eyes open smile: :closedeyessmile: ^_^ :coolshades: :( :angryfrown: :angryopenfrown: D: D': :hearteyes: :kissclosedeyes: :blowkiss: :kissopeneyes: :X :/: :o :o) :O :) :D ;D :P ;) :b7: :dead: :deadopenmouth: :lenny: :lennymeh: :lennyslash: :pout: :puff: :angrypuff: :smilepuff: :sick: :sleeping: zzzz :specialeyes: :angryteeth: :evilteeth: :frustratedteeth: :grinningteeth: :neutralteeth: :yakuza: :yakuza2: ^3^ ^33^ ^D^ ^;3^ :3: :33: :3D: ;3: :angel: :angel3: :angelD: :angels: :horns: :hornskiss: :hornstongue; :hornswhistle: :alien: :bishiesparklesl: :bishiesparklesr: :cheshiregrin: <3 </3 <X3 :snail: :captaincat: :darkwizardhat: :ghost: :ghosthalo: :ghosthorns: :ghostl: :ghostr: :ghostn: :ghostunu: :ghostuvu: :ghostv: :ghostxnx: :ghostxx: :pine: :xFsmile: :xFwink: :xFfrown: :xFmad: :confused: :xFcool: :xFtongue: :xFgrin: :xFeek: :xFoops: :xFrolleyes: :xFwhat:
  
  image.
  [img]image url here. note, the image itslef, not the page. right click or hold, if you're on mobile and hit "open image in new tab". use that url.[/img]
  
  media.
  [media=challonge, dailymotion, facebook, liveleak, metacafe, soundcloud, vimeo, youtube]the gibberish part of the url, usually after a slash, usually near the end of the url. note, you currently cannot start videos at a certain time[/media]
  
  insert:
  quote.
  go to the post you want to quote instead, add it to quote, then add the quote when you go to type your post. there should be a button around "upload a file" for this.
  [quote]text[/quote]
  
  spoiler.
  [spoiler=spoiler title]text[/spoiler]
  
  code.
  [code]code[/code]
  
  strikethrough.
  [s]text[/s]
  
  gallery embed.
  go to gallery and see the sidebar for this code.
  [gallery=media, url number]your text here[/gallery]
  
  drafts.
  use an outside editor to save your posts so things don't disappear. the general rule of thumb is don't gamble on your "it took me 3 hours to type this masterpiece" post still being there the next time you open your browser. back it up in an outside editor, or your private workshop if you wish.
  
  undo.
  ctrl + z
  
  redo.
  ctrl + y
  
  remove formatting.
  your backspace key + patience
  
  use bbcode editor.
  you are already using the bbcode editor if you do not see this button.
  

Have a question not answered or a correction to make? Reply below and I'll add it to the guide.

Note that this guide is incomplete, it's up to you guys to ask what you want to know.

*edited imagefloat code
*added "recreating top bar effects" tab

 

[IctoraPost]

Great guide! Just a suggestion for the hidden text thing -

You can use [COLOR=transparent]text[/COLOR] to make the text colorless, so you won't need to have a specific background for it.

 

[Amerikia1126]

Great guide! Just a suggestion for the hidden text thing -

You can use [COLOR=transparent]text[/COLOR] to make the text colorless, so you won't need to have a specific background for it.

Added

 

[Amerikia1126]

Frequently asked questions.​

The following are some bbcode questions I've seen asked a few times. These questions range from bbcode wonky bits to asking if something is possible.​

• General
• Columns

• The editor keeps adding a bunch of junk code?
  There are three scenarios here.
  
  1. Your rich text editor is still on. To fix this go to your preferences and disable it. I cannot stress this enough.
  
  2.Your tags aren't closed. If you're testing out a code, and the editor adds a bunch of junk, it's very likely that your tags are still open. What do I mean by this? Well if you have an accordion slide containing a [font] code, but you never put a [/font] code in there, the editor will freak out and spam font codes everywhere.
  
  3. Your tags are in the wrong order. Stacking codes is entirely possible and is usually required of codes, but you have to close them in the right order. Compare them to russian dolls, they go inside each other. So if you start a code with [font][color][size], you have to close with [/size][/color][/font]. You would end up with this: [font][color][size][/size][/color][/font].
• How do columns work?
  Columns are not viewable on mobile.
  This is because phone screens are really thin and we don't want posts that look like they were written in font size 96 in microsoft word. Instead, of left to right, the items in columns display vertically, from up to down. Keep this in mind.
  
  Columns must be contained within a row, [row][/row], and the total of the columns must equal 8. No exceptions. There are many possible column spans you can make for yours, depending on how many columns you want and how wide you want them to be.
  
  2 columns: 4/4. 3 columns: 1/2/2/2/1. 4 columns: 2/2/2/2.
  
  This is assuming you want columns of equal width. To help explain the 3 columns, those span 1s are throwaways, columns that are only there so you can have the other columns be of equal width. You can experiment with different amounts of columns and different widths of them, but for most codes 4 is usually the most that is required.
  
  My columns are descending?
  BBCode is really finicky sometimes. This is one of those times. You need to have no linebreaks (don't hit enter) between the [/column] code of the previous column and the [column=spanX] code of the new one. To ensure there's no unwanted descending, have these two tags as close as possible, with no line breaks in between.

could've been added to the main post, but this thread needs a bump

 

[constellation]

this is great! keep up the good work :-)

 

[Amerikia1126]

A couple div tricks.​

Have you seen what divs can do? Wondering how to do some of the things they can? This is a pretty good start.​

• Aesthetic
• Compatibility

• Centering a Post
  Sure you can use centerblock to center a code, but it's really finicky and doesn't center it everywhere. Instead, what you could do is center a post by wrapping the whole thing up in a big div and centering that.
  
  [div=margin: auto;]insert your beautiful code here[/div]
  
  What this does is tell the.. great magical being that controls what things look like on a website to automagically center your post on any screen. Well, center it within the post box.
  
  Hidden Scrolls
  While not the most mobile-friendly or user-friendly thing to do, this is a rather popular element in many aesthetics that aren't greyscale. You can find out how to make these here.
  
  Curved Borders (and circles!)
  Depending on the amount of curve you give your divs, this can look very elegant. It's pretty simple to do, just make sure you give the div, or those inside of it, a background or border in order
  (heh, that rhymed)
  for the effects to be visible.
  
  For normal curves:
  [div=border-radius: XX;]your beautiful code here[/div]
  
  For circles:
  [div=border-radius: 50%;]your beautiful code here[/div]
• Max Width
  This is a div element tag-thingy that is better used than plain old width. Let's say you set your div to have a width of 600px. That's way too big for a phone screen in portrait, I don't care how big a phablet you have.
  
  But Amerikia, it has to be this size or else it looks all weird. No one who frequents the thread even uses mobile.
  
  Aha! But here's the thing. People have different screen sizes on computers too. Someone could be using their 13" chromebook to view that code you made that barely fits on your 21" monitor. They're going to have clipping.
  
  There's an easy solution. Just add a "max-" to your width tag-thingys inside your divs
  (man I need to learn the right names for these things. I sound like an idiot.)
  .
  Like so:
  
  [div=max-width:####]your beautiful code here[/div]
  
  Max Height
  NO NO NO BAD IDEA- Well actually it depends.
  
  For something that needs to have scrolling, definitely. Use this, great idea. For your whole post, though? No.
  See, this is the "Compatibility" tab, max-height is not very compatible if the width is going to drastically change. A very wide post can handle a very short height, but that short height cannot transfer to a screen with a short width too. So exercise caution when using this with a non-scrolling div.
  
  Easier Modification
  Say you're running a code shop, or have a code you want to give to a friend. Or maybe you have a template you like to use over and over again. Isn't it annoying changing every single value? All those color codes, all those borders. Isn't it annoying typing the same things over and over again within the same code?
  
  Well, this is more user-compatible than it is fully device-compatible, but there is an easier way of doing this. Variables. Look at them. They're beautiful.
  (says the person who has yet to use them. but still, i was very pleasantly surprised when that post went up. for some reason i didn't expect the language of all pretty websites to utilize the same things as languages that can make a text adventure.)

been a while since i updated this. figured i should add some more fancy stuffs. kept it basic tho, google's learning's a great teacher for complex stuff. can show how to do something more complex, but i think there's places for that already.

(totally knows all the new hacks and how they work.)