Show More


Web Content Style Reference

The following content outlines the best practices for using the CMS page editor. Under no circumstances should you copy and paste content from a word processor or existing internet page directly to the Pages WYSIWYG editor. When content is directly pasted from word processors or an internet page, the copy may retain its existing styling which will make it look different than the rest of the Website.

General Content Organization Guidelines

Let's go over a simple way to organize your content on the page:

  • Page header (Header 1)
    • Intro blurb
  • Section header (Header 2)
    • Description paragraph, images, list, table, or block quote
      • Subsection (Header 3)
        • Description paragraph, images, list, table, or block quote
  • Section header (Header 2)
    • Description paragraph, images, list, table, or block quote

The page header is the title to your page. This is also referred to as Header 1. Because it is used as the title, there can only be one Header 1 per page.

The page is then broken down into sections, with titles for each of those sections. The titles to these sections are called headings. Headings start with the most general and overarching title, Heading 1 (h1), and go down to the most specific, Heading 6 (h6). Again, there can only be one h1, but you can have as many of the others as you like. When writing titles and subtitles, keep in mind that they should be a clear and concise summation of the content that follows.

Headings should always follow a clear order. Say, for example, you have a page called "Facts & Figures" that is broken into three sections called "The Academic Program," "The People," and "The Place." And "The People" is broken into three subsections called "Students," "Student Honors Earned," and "Faculty." Your page should be organized like this:

  • h1: Facts & Figures
    • h2: The Academic Program
    • h2: The People
      • h3: Students
      • h3: Student Honors Earned
      • h3: Faculty
    • h2: The Place

As you'll notice, any subsection that sits under a Heading 2 is a Heading 3. Let's say we add two subsections to each Heading 3 item. The page would then look like this:

  • h1: Facts & Figures
    • h2: The Academic Program
    • h2: The People
      • h3: Students
        • h4: Subsection
        • h4: Subsection
      • h3: Student Honors Earned
        • h4: Subsection
        • h4: Subsection
      • h3: Faculty
        • h4: Subsection
        • h4: Subsection
    • h2: The Place

This is the Proper Styling for a Sub Title Header

The above title is created by selecting Heading 2 from the format dropdown in the WYSIWYG. The Sub Title Header provides an easy way to break your page up into Sub Sections.

This is the Proper Styling for a Third Level Header

The above title is created by selecting Heading 3 from the format dropdown in the WYSIWYG. The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section.

This is the Proper Styling for a Fourth Level Header

The above title is created by selecting Heading 4 from the format dropdown in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections.

 

List Styles

Unordered List

Ordered List

  1. This is an ordered list item.
  2. This is a second item.
    1. This is a second level ordered list item.
    2. This is a second item.
    3. This is a third item.
    4. This is a list item that links back to this page.
  3. This is a third item.
  4. This is a list item that links back to this page.

Ordered List: Roman

To make an Ordered List with Roman numerals you can add class="roman" to the "ol" tag in the HTML view.

  1. This is an ordered list item.
  2. This is a second item.
    1. This is a second level ordered list item.
    2. This is a second item.
    3. This is a third item.
    4. This is a list item that links back to this page.
  3. This is a third item.
  4. This is a list item that links back to this page.

 

Paragraph Styles

Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicus, feugait abico, vel in. Brevitas persto quidne feugait lucidus this is bold copy premo opes saluto. Vindico interdico ingenium macto hendrerit facilisi os typicus accumsan dignissim velit feugait adipiscing pagus autem. Proprius letalis exerci nisl facilisi, pala this is italic copy. Sit, blandit magna haero hos, pala minim. Enim tincidunt conventio macto abico delenit refoveo si nobis, quibus typicus rusticus. Gravis odio nutus ludus, inhibeo, importunus, nisl tamen nunc gemino, distineo in feugait ex. Accumsan nobis commodo consequat pagus ulciscor dolore.

Paragraph Sub Title
Paragraph subtitles can be made by bolding the title and then using a soft return (shift + return).

Dolor nostrud usitas facilisi commoveo paratus ille facilisi autem dolus eligo iaceo augue exputo. Mauris camur paulatim sagaciter defui typicus suscipit. Praesent roto ut multo quibus inhibeo autem, ne nimis torqueo ventosus vicis, nonummy ut.

Embedding Video

When using the video service Vimeo click "Customize Embed Options". First change the width to "700" the height will auto complete. Next change the color to FFCF01. Then uncheck Portrait, Title, Byline, Autoplay, Loop, Show text link below video, and show video description below video. Finally Copy the embed code at the top of the window and then paste it into the HTML view in the WYSIWYG editor.

 

When using the video service Youtube click "share" and then "embed". First change the width to "700" in the "custom size" field, the height will auto complete. Then uncheck Show suggested videos, Use HTTPS, Enable privacy-enhanced mode,and Use old embed code. Finally Copy the embed code at the top of the window and then paste it into the HTML view in the WYSIWYG editor.

Embedding Audio

To place an MP3 file on a webpage, you first need to store the file in the resources panel (must be less than 10mb), on your W: drive, or on an external file hosting service. You will need to know the URL that points to the MP3 file itself (e.g., if stored on the W: drive, "http://acad.depauw.edu/user_web/music.mp3") for this method to work. To obtain the URL of a file listed in the resources panel, right-click on the file in the panel and select "Copy Link Location" (Firefox) or "Copy link address" (Chrome).

Once you know the file URL, follow these steps:

  1. While editing the page you'd like to place the MP3 on, click on the "Insert/Edit Embedded Media" button.
  2. In the General tab of the window that appears, select QuickTime from the Type drop-down menu.
  3. Type or copy & paste the MP3 URL into the File/URL field.
  4. Uncheck the Constrain Proportions box, then set the Dimensions to 250x16.
  5. If you don't want the MP3 to begin playing as soon as a user arrives at your page, open the Advanced tab and uncheck the Auto Play box.
  6. Click the Insert button below, then Save & Publish. You'll want to make sure everything worked by visiting the "live" version of your page.

 

Table Style

Data TypeNumberLetter
Data 1 1 A
Data 2 2 B
Data 3 3 C

 

Colors

NameHEX ValuePreview
green #718C40
 
blue #345290
 
red #AE2300
 
orange #EF8C40
 
yellow #FFCF01
 
gray #666
 
purple #493266
 

 

Fonts

Sans-serif: futura-pt (fallback: sans-serif)
Serif: adobe-caslon-pro (fallback: Georgia)