CB Formatting 101

Sir ArmaMalum··26 votes·3,833 views

http://i.imgur.com/JNG58Wu.jpg

####Last updated: 7/12/14

#http://i.imgur.com/6uRAg8D.png The Basics

If you’re new to the CB or just don’t want to do anything fancy you can find most of the stuff you need to function... #####In the Official formatting guide ---> http://i.imgur.com/Y2rFJCG.jpg

#http://i.imgur.com/3GGZn7r.png Not so Basic

As you can already see in this post, there are a few things the formatting guide didn’t mention.

###Horizontal Dividers
My bread and butter, these are a godsend for sectioned and long posts. These are created by placing “---“ (underscores work as well) at the beginning of a line. Use these to frame sections and frame headers, they create a nice bit of blank space to prevent your post from looking like the most stereotypical wall of text possible.

====================== ###Tables
(Take out the quotation marks to make it work)

“|Champion|Icon|
“|-
“|Aatrox| {{champion:266}"} | Guy with sword | “|Ahri| {{champion:103}"} | Gal with tails |

gives

|Champion|Icon|
|-
|Aatrox|Aatrox| Guy with sword |
|Ahri|Ahri| Gal with tails |

To explain, add a “|-“ after the starting line to end the header (black boxes), and simply add “|” to divide rest of the rows. You can have as many rows as you like. These boxes and the text inside will automatically arrange themselves so you may have to experiment a bit to make it work. You can spillover if you add too many columns so be careful. ######Note: This will not work if you have anything directly above or below the table. Make sure those lines are clear.

======================
###Special embedding
Simply by copy and pasting the URL of certain media sites will embed the site directly, so no tab or window hopping needed! Confirmed functional for:

  • Twitch Channel (video only, no chat)
  • Soundcloud songs (includes timed comments and background)
  • Imgur Albums (Example in Troubleshooting below)

#http://i.imgur.com/bn5srbv.png Readability

###Emphasize and Emphasize Well
Bolding and italics are great tools to show where you really want a point to hit home, or to really mean something, you know? But there is a time and a place for everything. Overuse of bolding and italics will just confuse readers and stop them halfway through.

####As such, here’s my advice: Use bolding to draw attention and use italics to intensify. But make sure to use both in moderation.

###Break it up!
A wall of text is just that, a wall. A block. One big chunk that when someone first sees they don’t want to read it just because if the size. Our brains work in funny ways, and things as small as

Indenting

  • bulletpoints

Using quote blocks

  • Line separation

Using headers or any font size change

...can visually break up your post and make the larger posts read by much faster!
Don’t believe me? Go copy and paste a news article or other large chunk of text in notepad/Word and take off all the indents and line separations. Does it read any different? I bet it does!

###Header+Embed tag team! http://i.imgur.com/jGrMJlO.png
When embedding, the picture/video will throw the alignment of everything off and it will look awkward. A neat trick you can use is by giving the embed its own line and using a header (I prefer bolded one hashtag header personally) to compliment it. Headers isolate themselves anyway, so with the embed naturally centering the text it'll look good!

###Clutter
Now with all of this new stuff I bet you want to put as many of these fancy mechanics in a post that you can. But be careful. If your post is supposed to be read make sure it's easy to do so! Pictures and color are great, but too much and they will distract. Always read through your own post once everything is rendered to make sure it's not too visually 'busy'. Try skimming your post. If you can do that easily it should be good.

====================== ###Spelling
Please, please, please do your best to spell everything right in your post. Double checking is encouraged! The occasional typo is fine, we’re only human (at least I hope), but if your post is riddled with spelling errors it just cheapens the whole thing, and in some cases may even make your post confusing to read.

Psssst, protip:
Your = Your post there
You’re = You are reading a post now
Their = Their posts there
They’re = They are reading a post
There = That post there
It's = It is
Its = Its post is there

======================

###Hyperlinks
I love these things, really I do. Really cleans up a post by taking out the long and unwieldy URL links. But with great convenience comes great responsibility.

There are a few things you can do to make these better....

First and foremost, check them! It's very easy to link the wrong URL. I cannot count the number of times I've seen a hyperlink lead directly to the exact post I was already in. I've done it, Rioters have done it, and you can very easily do it if you're not careful. But it's easy to fix!

Be relevant. If this section's title was actually a link where would it go? The wikipedia article for hyperlinks? Maybe a dictionary definition? Those would make sense, or I could shamelessly advertise another one of my posts by tricking you. Don't be that guy, make sure your readers have a good guess contextually where a link will lead them and they'll thank you by going there!

Video and Picture embeds won't work. Those have their own embeds, look at the basic formatting guide to see how. If you try, the embed will literally 'eat' the linked word.

LESS IS MORE. You shouldn't have to link an an entire sentence, link one word inside the sentence, one that makes sense. The link is there for our browsing convenience and we will click it if we are interested, not because it's taking up a lot of real estate.

###Don't speak in Icons!
Unless you really mean to, don't replace words with icons. It screws with the alignment and cheapens the post. Give icons their own lines and use them as attention drawing examples. They are great for bullets and other individual topics.

#http://i.imgur.com/aVrw6hM.png Troubleshooting

So I just threw a lot at you, and naturally there will be some problems that crop up, here are some of the more common issues:
###My input is right, but the post won’t do it!

Make sure there is a {space} after your input! Especially if you used the ‘highlight-->toolbar button’ strategy. For the more advanced formatting (like the table) you may also need white space above and below too.

##The table isn't working!

This bugger can be a bit difficult sometimes. Make sure you...

  • Have a blank line both above and below your input
  • Make sure you have at least two "|" per row, you need two sides to make a column.
  • Make sure you have a header (black boxes), you have to have a header to start a table.
  • haven't gone too far, too many columns and the table will disappear behind the right side of the page.

###My entire post is in a quote block now! Help!

Make sure there is a line break (an entire blank line) where you want the quote block to end, separating 'inside-quoteblock' and 'outside quote-block'.

###My embed picture isn’t working!

Make sure your are using a compatible file type. Essentially make sure your image URL ends with ".jpg".

###Using the five hash header, all my words are capitalized?

Yeah it's weird like that, maybe Naut helped make it? Anyway, to get a similar look without all caps, try bolding the four hash header.

###I can't get my pictures to fit well.....

Putting square pictures in this format can be very annoying, and having accompanying text just usually doesn't end well for a very 'tall' picture. Try adjusting your picture with your snipping tool (that's for windows at least, don't know what it is for others). Imgur also has a decent image editing tools you can use, and it's free. If you don't want to put that much work into it though, I have an album of all banners I've ever used and more below. For easier navigation and access click the cog and go to "view album".
http://imgur.com/a/JkDtZ.

###My post won’t submit!

Make sure you have:

  • A Title
  • not breached the character limit

###My post isn’t showing on the front page!

Did you post in Help & Support? If yes, that won’t be front page stuff, no one (except support Rioters) wants to hear about you lagging, sorry. :(
If no, make sure your ordering is set to ‘Recent’. Keep in mind it could take up to 2 minutes or so for a post to show up in extreme cases.

30 Comments

Kira Onime5 votes

Can we like, pin this to the top of the page as long as it is needed?

Sir ArmaMalum3 votes

All I can do personally is promise to update as needed and as new features are either discovered or created. I know it is possible to have non-red posts pinned, but it's up to the Beta team and they'll probably need to make sure I wouldn't abuse access to a pinned post. You can never be too careful you know?

Kira Onime2 votes

Reds please.

PIN

RiotFeralPony4 votes

This is awesome! As someone who sucks at formatting forum posts I found this pretty useful. :)

Sir ArmaMalum1 votes

XD happy to help!

ploki1222 votes

Excellent guide, I think you may have slightly overused bold/italic in the flavour text, but otherwise it's useful, entertaining and complete.

EDIT : lol, I suck.

Sir ArmaMalum1 votes

Right, I'll see if I can work on that. Gotta be good on formatting in the actual guide am I right? XD

Edit: nah your great!

Thank you for the feedback, truly appreciated!

ploki1221 votes

Nvm, always check your stuff before posting. I think it works on Reddit, but I failed to reproduce in here.

EDIT : Not reddit either... Well, you can header-less somewhere.

Sir ArmaMalum1 votes

Lol, well, like I said, code-wise that makes sense, but I think the idea behind these tables is that it would actually be difficult to read headerless tables due to the color and what-not, but nonetheless, still got feedback from you and I love that! XD

iHeartMocha2 votes

༼ つ ◕_◕ ༽つ SAVE URF MODE! SIGN THE PETITION!: http://www.change.org/petitions/riot-games-keep-urf-mode#share ヽ༼ຈل͜ຈ༽ノ IT DEPENDS ON US TO KEEP IT HERE! ヽ༼ຈل͜ຈ༽ノ

Sir ArmaMalum3 votes

Dark Revelent is not Relevent. :P

Jingerbeardman2 votes

lerv you FP for doing this <3

Sir ArmaMalum1 votes

=D

MegaBoomBoom2 votes

Cool. From a design perspective, this makes a lot of sense. This applies to pretty much everything, from reports to advertisements.

The help button is great as well. Thanks for pointing it out.

Over all, your post is a great guide. I will use it in the future.

Sir ArmaMalum1 votes

Plot twist, the only design experience I have are undergraduate lab reports :P

Thanks! XD

Bob LLama2 votes

Wow, solid guide! Thanks for this, it's a super handy reference (and even I learned a couple things here <_< ).

Sir ArmaMalum1 votes

Thank you kind sir. Happy to be of assistance!

RiotStayAwhileNlistn2 votes

###Pretty.

Thanks for the guide :)

Sir ArmaMalum1 votes

No problem! =)

Bubble Butt Lulu2 votes

y u no hyperlink Help & Support?

Good post though. :)

Sir ArmaMalum1 votes

Y u need to go to H&S after reading about forum formatting? Although I definitely will say there is a very very useful post or two there. ;)

Thanks man!

ploki1221 votes

I think he meant that you never talked about Hyperlinks in your post... At least that'd be my guess.

Sir ArmaMalum1 votes

oh....OH.......that is a great point, and a great topic to throw up there for better readability. I'm assuming I'm not the only one that cringes slightly when someone hyperlinks an entire sentence? lol

Edit: Welp, reworded the 'check your links' bit to include more about links in general!

JackYAqua2 votes

Is it possible to do more than one spacebar without writing anything, and what must I google to find more of those ... banners? of yours?

Sir ArmaMalum1 votes

I have not been able to find a way to go past one space, I've settled with using dashes or other non-significant characters to 'push' words over like the Headers in OP. I wouldn't be surprised if the reason for this is that they're working on alignment being added, which I think would solve that problem for the most part.

And no need to google anything, I actually have all those pictures and more in an imgur album here you can just rip em straight from there.

JackYAqua1 votes

Thank you ! Kind sir ! I shall gladly steal all of the images ^^

Rubitonabuilding1 votes

I'll just point out that any link that leaves the League of Legends site automatically redirects to the post it's in, so it's not always the poster's fault if that happens. Riot's policy is that face-checking the internet is dangerous (which it is, I don't blame them), so anything leaving the site is not allowed.

I have a tendency to right-click links to open them in a new tab so I don't lose my place on the current page, but doing this on the CB is useless because I just get redirected to the current page.

Adurin1 votes

Post is OP better nerf Irelia

Saint Tyrone 1 votes

Thanks, I really found this useful.

Sir ArmaMalum1 votes

Happy to help.

More from [ARCHIVED] Miscellaneous

More by Sir ArmaMalum