Hello everyone – it’s time to learn how to make things a little prettier around here!
Let’s start with your Writing Toolbar. You’ve probably done the bulk of your work under the “Visual” tab, but let’s look beyond into the “Code:
Click there, and you’ll see the guts of the tags and formatting that the editor does automatically for you. As I write this post, here is what mine looks like:
Unless you’re just a whiz at HTML, be grateful for the Visual editor! However, armed with just a little knowledge, you can use this as a tool to learn a couple of things that can help you “de-bug” a page that isn’t rendering like you’d want it to.
First, every tag carries a similar syntax. If you want to apply an attribute like bold text to a word like “make” in the example above, you need to surround it with the <strong> and </strong> tags. Every tag is placed in brackets (<>) and is closed out with a matching tag that has a slash: (</>). You may notice that html links are also coded as tags: <a href=”yourblogname.com”>Plain text description of the link that appears underlined</a>.
(If you ever run into trouble, you can always check these tags. More often than not, you’re stuck in front of an ending tag, and just need to reposition your cursor on the other side. Again – play around with this here on your blog, so you won’t be as intimidated “looking under the hood” on a real live site.)
Now let’s learn a little about those other icons hiding in your panel. Yes, they are hiding. You need to click the button to the far right:
When you do, it opens the Advanced Tools!
Now you’re in business! Let’s talk a little about what they do.
-
This allows you to set Headers and Body text.
-
Header 1
-
Header 2
-
Header 3
-
Header 4
-
Header 5
-
Header 6
- Paragraph (normal)
-
Underline (also CTRL-U does the trick)
Double Justify – takes the text that is within these tags, and stretches out word and character spacings as appropriate and necessary to ensure that both margins are marked by straight lines. Not always as useful on a blog, because some templates wrap differently depending on the width of the screen (called “fluid” layouts.) If you did a block of text this way with a fluid layout, and started expanding and contracting the window, the lines would get crazy on you.
Color picker. This one gives you a LOT of options, but you must be aware that if you ever designate a color here, then change the Theme of your blog, you might end up with something atrocious like red text on blue background. Click the letter to change the highlighted text, or click the little black arrow to bring in a new dialog:
You’ll see there are already a few choices at your disposal. If you want something even more customized, you can click on “More colors”:
If you can’t find the color you like now, well — your computer probably wouldn’t display it anyway. See that “#999999″ over there? That’s a hexadecimal code for Gray. Each of those digits can have a value of “0123456789ABCDEF”. The first two describe the level of Redness, the next two the level of Greenness, and the last two the Blueness. So #FF0000 is pure Red. #FFFFFF is white. #000000 is black. If someone gives you a funky hex code like this, you now know where you can enter it for an exact match! (Congratulations. If you understood even the slightest part of this, you are now a Geek, and there is no going back. Mwah-hah-hah-hah-hah!)
Paste tools. The one with a little “T” takes whatever is in your Clipboard and pastes it in as Plain Text. The one with the “W” is handy for pasting in text from Microsoft Word. It retains and read the Word formatting. You can’t just drag-and-drop – highlight the text you want in Word, copy it, then open this dialog box and do a CTRL-V to paste.
Erasing tools. If you’ve got a section of text that you’ve pasted in, and it just throws the formatting into unfixable mush, highlight a whole chunk and click on the eraser. If you just want to “clean up” the code, try the little broom.
Symbols. If you want to include “®” and “∞” and “™” or “©” and “&”, then we have a way for you to find them:
Undo/Redo. Because it always helps to have a way to undo n erroneous click.
Wow. That’s a lot of material to digest. Fortunately, you should have a decent groundwork in the interface, so this should help you do a few things you might have thought about doing but just didn’t know how.
Now, go write a few posts taking these skills into account. Show me some COLOR! Show me some Γρεεκ! And link back to this lesson, so I’ll know you’ve finished.
