In every channel entry, you'll see at least one open text field, identified by a toolbar above it. This field enables you to format text to your liking.

Keep Formatting Simple

Consistency makes our site user-friendly. For example, when you want a heading, set a heading (first dropdown) and leave it at that. Heading2 is usually the right choice. Don't bold the heading. Don't italicize it. Just leave it simply a Heading2. Keeping things simple and consistent makes your job easier, the web team's job (maintaining the website) easier, and gives your reader a format they're used to.

Use Semantic Definitions

Don't think, "I want to make this link blue," or "I want this heading big and red," looking for ways on the toolbar to do that. If content authors thought that way, our website would be an inconsistent mess that frustrates users. Instead, let our website handle the presentation so that our reader's session is consistent and intuitive. 

Examples

  • Think: I want a heading above this paragraph. (Use Format dropdown > Heading2)
  • Don't think: I want a big font. These headings are big, so I'll use one. Maybe I can make it even bigger by bolding it, as well. (Don't. Simply go with Heading2.) 
  • Think: I need to make a link. I'll use the Link tool do that. The website design template will take care of the rest.
  • Don't think: This link needs to be blue. It also needs to open a new window (this is almost always a bad idea). I'll change this link's presentation and behavior.
  • Think: I want this user to do something after reading this sentence. (Use Styles dropdown > Paragraph Do Something)
  • Don't think: I want this link to "pop out." Green should do that. I'll make this link special and green.

Common Error: Relying on non-standard design to make your page better is a clear sign that your content is weak. Focus first on your content matching your audience's top tasks, and organizing it in a way that's easily scannable

The Most Common Format

Overall, the tried-and-true way of formatting pages is simply:

  1. Heading
  2. Paragraph (can contain lists)

Repeat that for however many topics you have.

This page itself is an example of this. See how easy it is to scan? Your reader's top priority is completing tasks by finding information. Making this as easy as possible is your ultimate goal.

Common Functions

You'll only probably need to do 5 or so different things. Here they are.

Make a heading

Highlight your heading text then choose a heading from the first dropdown box, Format, to make a heading. Heading 2 is your best bet unless your heading is in one of the side areas of a page (Highlight Box or Side Item), in which case Heading 3 is better.

Is a lot more text than what you selected becoming the heading? This happens when you don't have your text in its own paragraph. Hit backspace then enter to separate your heading and non-heading text into different paragraphs before making your heading.

Remove a heading

To remove heading formatting, select your heading and select "Normal" from the Format dropdown box. Alternatively, if you select a heading, you'll notice the Format box will change to what that heading is. You can re-select that heading to toggle it off. (The Styles box beside the Format box behaves the same: If you select text with a Styles box style applied, the Styles box will identify this, and you can re-select that style to toggle it off.)

Make a link

The icon with the chain is the Link tool. Select some text then click this to make a link. 

To link to a URL, specify its URL in the URL field then click OK.

To link to a resource like a PDF, PPT or image on the FACS website, click "Browse Server" then use the "Upload Directory" dropdown and/or Keywords fields to find your resource. If the resource isn't already there, you may use the Upload File button to upload a new file. Be sure to choose the appropriate upload directory on the following page so that your file is put in the right spot--you'll likely want "Documents" (default) or "Images".

To link to an email address, from the Link Type dropdown, select "E-Mail" then populate those fields.

To link to a web page inside the FACS website, from the Link Type dropdown, select Site Page, then select your entry. Entries are sorted by channel. Click the Site Page dropdown then type the first letter of your channel to quickly see its entries.

Don't select for a link to open in a new window. This is outdated and against current web Best Practices. It interferes with navigation and annoys your user. New windows are easily opened in modern web browsers. If a user wants a new window, they'll make one.

Make a button

Making a link a button is great if you want to showcase 1-3 links in particular.

Option 1: First make a link. Then with the link text still selected, go to the "Styles" dropdown and select a button.

Option 2: If the link is already created, click anywhere in the link text and go to the "Styles" dropdown and select a button

Which button do I select?

If you're in the Body field, select one of these:

  • Button Default
  • Button Primary
  • Button Alternative

If you're in a side box (Highlight Box, Side Items), select one of these:

  • Button Primary (full width for side box)
  • Button Call to Action (full width for side box)

"Full Width" means it will span the full width of the box, which looks nice in these smaller boxes.

Make a list

You can make a list using the "Insert/Remove Bulleted List" icon. With your cursor anywhere in the list, you can click the "Styles" dropdown and look for the items beginning in "List" to add padding, change the list to two columns, or change the list to three columns.  If you want sub-areas of that list indented, select your bullet, then click the "Increase Indent" icon (near the middle). 

Paste from a Word document/rich text

Commonly the content that you add is formatted in Word. Copy what you'd like from your Word document, then click the "Paste from Word" icon. This also works when pasting from web pages or other sources. This retains lists, tables, links, images, bold, italics, and various other common formats.

Include an image

The ideal places to place an image in the web page is either as a header image (if big) using the Header Images field, or in the Images field, as that will create a thumbnail gallery at the bottom of your page. However, sometimes you want to put an image in your document. To do that, place your cursor into the Body field around where you want the image included, click the Image icon, then upload your image. Upon uploading, you'll see that you can specify the width/height of your image. I'd recommend 400 being the maximum value--a huge image will destroy the appeal of your web page. You can also use the "Alignment" dropdown; aligning right is a commonly good choice. You can right-click your image and select "Image" to return to that dialog after inserting the image.

A good use of including an image can be into the Highlight Box field. If you include an image there, be sure to leave the Width/Height boxes blank, so it will be scaled down to fit into the highlight box. Even a huge image like something from the Header Images upload directory will scale down to an appropriately-sized thumbnail in the highlight box.

Make a sentence a color

Select some text, then go to the "Styles" dropdown and select one of these options:

  • Sentence Warning (yellow)
  • Sentence Neat Info (blue)
  • Sentence Do Something (green) - Use this if there's an important action in the text
  • Sentence Danger (red)

Select the option that fits the semantic meaning of your sentence, not because of the color.

Tip: Notice how this stands out? Use these color boxes sparingly, or the "When everything's important, nothing's important" principle applies.

Remove formatting

Let's say you want to remove a heading, a background color, or anything else and return the text to plan text. Select your text and use the "Remove Format" icon to remove formatting. All of the list items in the "Formatting" and "Styles" dropdowns are also toggles, which means if you select some text that is a Heading 2, select Heading 2 again to remove it.

What's Behind the Open Text Field

The open text field generates HTML for you that you don't see. However, you can see the HTML if you click on the "Source" button to the far right. (If you click it again, it will show you the regular open text field.)

You'll see your text between paragraph <p> ... </p> tags, links between <a> ... </a> tags, and Heading 3s between <h3> ... </h3> tag, amongst other tags. This is how HTML works, by placing text between tags to be formatted.

If the open text field is behaving strangely as you edit, you can click "Source" and work directly with the code. For example, sometimes when removing headings the text formatting gets confused. In this case, you could click Source and remove <h3>Your Heading</h3>.