Skip to content
 Scroll To Top

Use formatting to structure your concepts and advance your message.

1. When should I use bold, italic, or underline for my font?

Use these sparingly when they are needed.
  • Bold: use for emphasis or to make a few words stand out. If overused, it defeats the idea of something standing out.
  • Italic: use sparingly for quotes or titles.
  • Underline – NEVER use because on a web page it means it is a link. Think of the color blind (challenged)

2. What does the 'Format' choice do?

Format Choices

When you apply format to text in the content editor you will change its appearance and indicate the structure of the content on the page.

Simple formatting Choices:

paragraph (most common)

address (rarely used)
preformatted (rarely used)

Treat headings is as follows.

  • Heading1 is used to summarize the content of your page (an there can therefore only be one)
  • Heading2  is used to split your page in sections
  • Heading3 is used to spilt each section into subsection
  • etc
So, for example, I could choose to split a place about all the towns and cities in the World like this:
  • Heading1 = The World
  • Heading2 = North American,Europe, Asia etc
  • Heading3 = USA, Canada etc
  • Heading4 = California, Florida, Nebraska etc
  • Heading5 = LA, San Antonio etc

Below are the effects of the format choices. Each 'heading' choice will look different for each department, because they have individual 'style sheets' which allow color, size, and font to be applied to the heading choices.

format

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

3. What are the 'Styles' choices for?

Styles are 'classes' that can be attached to change how something will display.

Here are examples of the current 'Styles' available in the WYSIWYG editor in the CMS:

Except for the 'Links' styles, these only work if you are in the new templates.

Links:

A 'pdf' link puts a symbol for pdf behind the link. Use this if the link goes to a pdf.

An 'external' link puts a small arrow symbol behind the link to signify that you are about to open another window. Use this if the link opens another window.

A 'btn' link makes the link look like a button. Use sparingly.


Images:

Style class 'img-rounded' rounds the image.

Spike

Style class 'disappear' makes the object disappear when viewed on a smart phone sized screen.

Spike


Text

Style class 'text-error' makes the text a reddish color to highlight a warning.


Tables

All tables should use the table class and can add other classes to create borders and stripes. Mix and match. You may have to adjust it in the HTML view to get it right.

Style class: 'table'cell
cellcell

Style class: 'table table-bordered'cell
cellcell

Style class: 'table table-striped'cell
cellcell

Style class: 'table table-striped table-bordered'cell
cellcell

Lists

A normal list

  • line one
  • line two
  • line three

A list with style class 'unstyled' takes away the indentation and the bullets

  • line one
  • line two
  • line three

Put something in a box

Something in a 'thumbnail' has a rounded border around it with a little padding.


Alignment

Style class 'pull-right' floats floats to the right.

Style class 'pull-left' floats to the left.

4. How do I embed a YouTube video into my page?

Get the embed code from your YouTube video. Here's an example of a video we're looking to embed: https://www.youtube.com/watch?v=kK75WXjDCLM

  1. Copy and paste the following HTML code into your page (access the HTML code by clicking the "HTML" button in the WYSIWYG):
    <div class="video-wrapper">
    <div class="video-container">

    </div>
    </div>
  2. Open up the video in a different browser window and copy the embed code:
    Showing how to find the video embed tag
  3. Paste the embed code in your page in the middle of the HTML you just previously pasted, so that it looks like this:

    <div class="video-wrapper">
    <div class="video-container">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/kK75WXjDCLM" frameborder="0" allowfullscreen></iframe>
    </div>
    </div>