Formatting Content

The WYSIWYG Text Editor

When you edit a page, you will see this toolbar menu that provides a "What You See Is What You Get" (WYSIWYG) method of structuring your content in the page. The menu provides a word processor-like interface for inputting and formatting content. If you are comfortable with raw html, you can click the "Source" button or click “Disable rich-text” below the WYSIWYG ribbon to edit the html code (sometimes this is the only way to accomplish complicated layouts).

The WYSIWYG toolbar has “MS Word-like” buttons to align and style text as well as add links, insert and upload images. One of the most important features is the paste from MS Word (the button that looks like a clipboard with a Word icon on it – W letter). If you are cutting and pasting directly from an Microsoft Office document it is important to use the paste from Word feature to strip extraneous Microsoft code from the clipboard contents.

For each option in the toolbar, you can roll over the icon to read the rollover text to see that action each accomplishes.

WYSIWYG tool bar image

icons for formatting

Bold, italic, Superscript, Subscript, Remove formatting buttons.


Align left, center, and right.

Lists icon

Bullets, Insert/Remove numbered list, decrease indent, increase indent and block quotes.

Redo icon

Undo, Redo, insert text, insert Word content.

Link icons

Use "Linkit" to link to internal content, add a hyperlink, Unlink, and add an Anchor link.

Source icon

The Source button is a toggle that shows the html code versus the WYSIWYG display.


icons for language and accessibility checker

Use the Check Accessibility (person in circle) icon to check that your text is properly formatted to meet accessibility requirements.

Use the Set Language when entering non-English text. This allows a screen reader to recognize text as another language and properly read it aloud. Highlight your text and select the language from the dropdown. It will add code around the text that is invisible to you. To see the code, click the Source icon.

Table hard return icon

This grouping adds a hard return, a special or foreign character, and a table.

A hard return is a line that breaks up text on your web page. In HTML, this is an <HR>.

The Omega symbol is used to add special or foreign characters. Use the Omega symbol to enter the following characters (and more) into the body of text. To enter them into the Title field, you will need to use the keyboard or cut and paste.

Tables can be aligned left, center, or right. If you right-click any table in the WYSIWYG editor, you can open the Table Properties dialog, which allows you to convert the first row or column into headers, add a caption, and adjust other properties.

table properties dialog box

Heading Styles

Use Heading styles in order to create structure for an accessible site. Select the text and choose a Heading style defined by the theme. Avoid the use of bold for headings.

Since Page Titles in the template system are set as H1, headings within the body of the page should start with H2 and follow numerical order. Do not go out of order to get a particular visual look, as that will cause confusion for visitors using screen readers or other assistive technologies. 

Headers pull down menu icon

Embedding images

These two options are used to embed images into the web page as well as style the images to float left, right or center. See detailed instructions for embedding and stylizing images to learn more.

Embed image icon

Styles pulldown image

Callout Text

There may be occasions when you wish to call attention to text at the beginning of your Basic Page, News story, Events, etc. Sometimes this text is called "kicker" text or "callout" text. It's used to underscore the Title of the item. Its formatted to standout from the rest of the body text.

To show Callout text:

  1. Edit a node.
  2. Click "Edit summary" under the Title.
  3. Enter Summary text.
  4. Check the checkbox for "Display summary text as a callout".
  5. Click "Save". 

As usual, summary text will also be displayed in lieu of truncated body text in any list that contains this page.

Spell Check

When editing a page, you may notice that some words have a red underline. This indicates that your browser's spell checker has found a word that may be misspelled.

To see the suggested alternate spellings:

  • Cmd + Click (Mac)
  • Ctrl + Click (Windows)

Then select the alternate word.

Incorporating Code

You can paste code samples directly into the WYSIWYG editor. If the formatting doesn't look like code, make sure your sample is enclosed inside HTML "<pre>" tags. To add these tags, enter the source view mode by clicking the Source button in the editor menu.


 * This is a code comment.
function my_function(&$variables, $hook) {
  $variables['a_class'] = '';
  $variables['another_class'] = '';
  if ($something == 'boo') {
    $variables['a_class'] = 'frightening';
  } else {
    $variables['another_class'] = 'scary'; 

The screenshot below shows the source code for the example above:

screenshot of editor mode showing how to use tags to display code