Unraveled

Have you ever seen this bar at the top of the text box when you’re writing a forum post and wondered what do all of those buttons mean?  Today we’re going to walk through all of them so you can feel confident formatting your posts. Formatting bars like this show up in lots of places across the site where you can enter text (forum posts, project notes, etc) and are shortcuts to add formatting to your text.  We use markdown syntax to format text, so if you’ve used that the info here may be familiar. Let’s start with the buttons on the left and move across.

Text Buttons

If you highlight text and click the B and you’ll see ** show up around your text, which comes out as bold when the topic is published.  If you don’t highlight anything, the ** ** will just show up at the end and you can enter the text you want to emphasize in between.

Click the I and you’ll see * around your text which is translated into italics when published.  Just like with bold, highlighting before you click will put the * * where you want it.  Oh, and if you want to use an * in your text without it meaning italics, just put spaces around it and no special formatting will be applied.

Links and Media

The earth with an arrow is the symbol for a link.  Use that button to insert a link in your post.  Bonus tip: If you hover over it you’ll see a tooltip with a keyboard shortcut for entering a link, Ctrl + L.  All the buttons have one, so look for them if you have a favorite button.

The quotation marks are for quoting text.  You’ll see a > appear next to your text and when it’s published it will appear quoted.  This can be a handy way to make it clear what part of a previous post you’re replying to.

The polaroid picture is for inserting pictures into your post.  Follow the instructions after clicking it and you’ll be able to enter a picture from an item in your notebook, from elsewhere on the internet like Flickr or Instagram, or upload it directly from your device.  You can even drag and drop images to the text box after clicking the button! (Uploading directly from your computer to the forums requires the purchase of a Ravelry Extra for $5/year.  You can read more about that here.)

The last icon in that group, the grey globe, is a webcam.  If your device has a webcam and supports Adobe Flash (aka is not an iPhone/iPad/iWhatever), then you can take a photo with a webcam to insert into your post.  If I’m doing this in For the Love of Ravelry, I’m feeling very silly that day :)

Want to put a video in your post?  Click the little TV and enter a link to a YouTube,Vimeo, or Vine video.

You can insert an audio file like a song in your post by clicking the music note button and entering a link to a .mp3 file.

Lists

The first list button helps make a numbered list and the second list button makes a bulleted list.  You can see the difference while you’re typing because the number lists have 1., etc next to the items and the bulleted lists have a * next to the items.

Ever wanted to organize your text with headings?  That last icon in the list section has a few different ways to create headings in your posts.  Keep clicking it and you’ll see a few different kinds of headings pop-up: ##, ==, and — all create headings with different sized text so play with them and see what you like!

Time Machines

Okay, technically they’re just undo (the left-pointing arrow) and redo (the right-pointing arrow) buttons.  But I like to think of them as tiny time machine buttons that help me go backwards and forwards in time to get to my favorite version of a post.  I assume I’m not the only one that often types and retypes until I get it right. :)

Preview

The preview button pops up a little window that previews how all the formatting in your post will look.  It’s a great way to see how all those * and = and # are translated into pretty formatting.

And the question mark?  That’s how you get help if you ever have questions about text formatting in the forums.  You’ll be opening the wiki page with info on our text editor.  We can’t fit shortcut buttons for everything that the text editor can do in that little grey bar, so read that wiki page if you want to do something I haven’t covered in this post.  I learned more about how our text editor works by writing this post, and if you want to get straight to work trying out all the stuff you learned, feel free to use this thread in the Help group!