< Posts, A Closer Look  Posts, Adding an Image >

Posts, Styling Text

This section applies to styling text in the content editor for both Posts and Pages.

To cover all the ways that text can be styled in the content editor is beyond the scope of this tutorial, but we will generally describe the editor, and walk through one styling operation that is illustrative of most.

Editor, Modes of Operation

The content editor has two modes of operation, Visual and Code. Chances are, you’ll be working in the Visual Mode most of the time. Visual Mode works much like Microsoft Word, so if you’re familiar with the text styling features of that program, you’ll already have the general idea. Visual Mode is the default mode. You’ll need to switch to Code Mode if you need it. You switch modes by clicking the appropriate folder tab above the editor.

Code Mode

Code Mode requires knowledge of HTML and is beyond the scope of this tutorial. That said, you should switch to Code Mode every once in a while and view the HTML code that is automatically generated by the Visual Mode of the editor. Once you familiarize yourself with HTML code, you might find yourself switching to Code Mode more often. I usually switch to Code Mode when Visual Mode in the editor is giving me a problem. Looking at (and altering) the code in Code Mode can resolve problems with the Visual Mode editor (you will want to keep this in mind).

Visual Mode

The Visual Mode editor the user-friendly editor. As mentioned, the Visual Mode of the content editor operates much like Microsoft Word. There are two general methods used to apply a style. Either select the style before typing, or highlight existing text and apply the style.

The Editor Toolbar

In order to select or apply a style, you will need to use the editor Toolbar. The Toolbar falls below the Visual/Code folder tabs, and above the text formatting window.

The image above shows the Basic Toolbar. It contains most of the simple styling buttons that you will use to style text (bold, italic, strikeout, bullet list, numbered list, outdent, indent, justification, etc).

There is also an Advanced Toolbar that is hidden by default. To display it, click the Show/Hide Advanced Toolbar button . Clicking this button toggles the Advanced Toolbar on and off.

The Advanced Toolbar contains less often used styling buttons. One that is not so less often used is the Style drop down control. This selects Styles such as Heading 1, Heading 2, etc. Color and Underline styles can also be selected from the Advanced Toolbar.

Styling text Bold

Let’s look at a simple style, Bold. If you can learn to style text as Bold, you will be able to handle most text styling, since the technique used for Bold styling applies to most other styling as well.

We’ll look at the two methods for styling text to be Bold.

The first method involves selecting the Bold style before starting to type. Simply click the Bold button on the Basic Toolbar (the button will highlight to indicate that the Bold style has been turned on) and then start typing. . The text that you type will be Bold for as long as the Bold style is turned on.

When you wish to switch back to normal text, click the Bold button again to turn off the Bold style, and then continue typing. You will now be typing normal text again.

The second method to style text Bold is used after you’ve typed the text.

For example, suppose that you already typed a paragraph, but forgot to Bold text within the paragraph using the method described above. It wouldn’t make sense at this point to delete the text, click the Bold button, and retype it, since this would be an enormous waste of time, so we need another method to apply the Bold style to existing text.

In this case we use the mouse to highlight the text. Highlighting text is done as follows: click the left button of the mouse in the upper-left corner of the text to be selected and hold it, drag the mouse to the lower-right corner of the text to be selected and release the mouse button. If the text is on one line, simply drag from left to right. The selected text will appear inverted.

Once the text is selected, to apply the Bold style, click the bold button on the Basic Toolbar. The selected text will then be styled Bold.

If you understand the two methods of styling, you will be able to do most styling in the content editor. Either select the style before typing, or after typing highlight the existing text and select the style.

< Posts, A Closer Look  Posts, Adding an Image >