Adding Text Decoration

bttn WordPress Tutorials for Beginners 255x104Now, let’s say you’ve entered some text and you want to jazz things up a little bit by adding bold or italics text for example. This is when the button panel (or keyboard shortcuts) comes into play.

 

 

A Closer Look at the Button Panel

Wordpress Editor buttons sample

The button panel is one place that I’ve found that my clients can make quite a bit of a mess of things. The default WordPress install is very basic and doesn’t give you all these buttons. I install an editor plugin in every site I develop which provides more versatility than the default install. You probably will never have a need to use all these buttons because I try very hard to code what’s known as your site’s CSS file in such a way that by default, it makes your site look like it’s supposed to look so you don’t have to jump through to many hoops to keep that look going.

Experimenting Can Lead to Messy Pages

Experimenting with buttons that you’re not taught how to use properly (or aren’t covered in my tutorials) can potentially wreak some havoc on the look of your site — and make me want cry. Depending on how bad it gets, I just might cry — and I’d be a liar if I told you I’ve never cried over an instance of site-look-destruction. Hint Hint … one of the biggest frustrations for a web designer, is working umpteen hours on a site to make it look good — only to have a client start clicking buttons that they haven’t been instructed to use. In a designer’s eye, this can literally destroy your site design.

It hasn’t happened often but there have been a few sites where I’ve worked very hard on their site look, turned it over to a client when it’s done and then looked at it a few months later only to find out that they’ve very obviously been messing in the button panel. At this point my only option is to sternly remind myself that they paid me to make the site, that everyone has their own personal tastes and — and I don’t have to like itthey do.

The Most Commonly Used Buttons

The bottom red arrow in the screen shot above points to the rows of editor buttons. In an effort to keep things simple and to help my clients to not make a mess, I do try to hide many of the editor buttons that are actually available but I simply can’t hide them all. I also code sites so that only a few buttons are needed, but there are some you’re going to have to use. One thing to remember is that the buttons in your editor may not be displayed in exactly the same place as the ones you see in my screen shots. You also may have more or less rows of buttons.

We’ll start at the top left with some pretty much self-explanatory buttons. The “B” is for bold, the “I” for italics and the “U” for underline. In order to use most any of the buttons, simply highlight the text you want to be in bold, italics or underlined and then while the text is highlighted, click the associated button. Keyboard shortcuts work great for this and are a bit of a time-saver because once you get proficient in using them, you save the time of grabbing your mouse, locating the button and clicking it. I can pretty much do these without even looking and when I do have to look, it’s faster work for me than doing the text-highlight-to-button-click thing.

Notes on Underlining and Highlighting Text

When people see an underline on a web page they automatically think “link!” In other words they think this word(s) is clickable and will take them to another page. I personally stay away from underlines unless it’s absolutely necessary. I prefer bold, italics or find other ways to emphasize text. There’s no law that says you can’t underline — just be aware what your readers see and how many of them may think.

When you highlight your text before you select your bold, italics or whatever button you are planning to use — it’s important that you highlight just the text you want to be bold or italics or whatever. Make sure that you haven’t inadvertently highlighted the space to the right or left of the word(s). Being careful here will help you to not have to go back and fix things later and may also save you from some page-look-funkies.

Oops! I Didn’t Want that Text to be Bold!

Should you add text decoration to some words and find you made a mistake or don’t want those words to be bold or italic or whatever — here’s another one of those easy fixes. Simply go back and highlight your currently decorated text and then re-click the button you used to decorate it. For example — to un-bold bold text, highlight the bolded text and click the bold button again and the bold will disappear. It works the same for italics or underlines. Another little tip — if you catch your mistake immediately before you type or do anything else, a simple keyboard shortcut CTRL + Z will make your mistake disappear.

Making Lists

If you skootch over to the right of the U button, you’ll see the list buttons. Lists are used for some additional emphasis or when it’s more appropriate than a paragraph of text. There are several kinds of lists and they all look a lot like what you see below — which are actually my instructions for making an unordered list. In most cases an unordered list is the style you’d probably use so this is what I’m showing you how to make.

  1. Hit your ENTER key after your latest paragraph.
  2. nter a word or line of text.
  3. Hit your ENTER key again.
  4. Repeat for as many list items as you need.

So now what you have is several paragraphs because you’ve hit your ENTER key after each list item. This is not a list. To make your list:

  1. Click your mouse at the bottom right of the very last list entry.
  2. Slide your mouse up to highlight all your list entries.
  3. With your list entries highlighted, click the unordered list button which is the left-most list button.
  4. You now have what’s known as an unordered list.

You can highlight your list from top left to bottom right if you wish, I just find it works easier and is more accurate to start at the bottom right with the last list entry. The entries in an unordered list are usually preceded with what are called list bullets which are those little circles, squares and other shapes you often see in professional documents. I find the plain old list bullets to be pretty boring and so as you can see, I like to jazz them up a little — like I did these with numbers for example.

Multi-Tasking Skills

Right now you’re learning and so how to do things is being shown to you step-by-step. After you get the hang of adding text decorations and subtitles, there’s nothing stopping you from multi-tasking your page writing, editing and decorating skills while you’re writing your page if you prefer. You do not have to write your page and then go back and do these things later.