Support E-town
Information For

Web Style Guide

Guide information

This guide shows the styles available in the College's Content Management System (CMS), and instructions on how to use them to format pages. If you have a question or suggestion, don't hesitate to contact Danilo Yabut x1396 or yabutd@etown.edu.

Tips:

  • Use (reuse and keep using) the CMS Training Videos.
  • Keep it simple and short – website visitors scan pages to find information quickly using the assumption that if it's important, it will stand out.
  • Use text styling (bold, italics, underline, all-caps and text-align) sparingly.
  • Use related photos and graphics to enhance your content.

Text Style

Headings

This is a Heading 2

There should only be 1 or 2 "Heading 2"s per page. They should only be used for the page title and to denote a major content change.

This is a Heading 3

You can use as many "Heading 3"s as needed. It should be used to denote sections of content and to help people quickly scan your page for content.

This is a Heading 4

"Heading 4"s can be used to create a sub-section within a section denoted by a "heading 3".

Basic Text

Within this paragraph basic text styling is demonstrated. This is what the bold options looks like, you should not bold entire paragraphs more than a few words or a sentence. This is what the italic option looks like, it should be used to accent information within a sentence. This is what the underline option looks like, you should be careful when using the underline because some people associate underlines with a link. This is what all three options (bold, italic and underline) look like together. 

Paragraphs

This is a normal paragraph. It will be the bulk of the information on your page(s). Greeked text after this. Lorem ipsum dolor sit amet, a ullamcorper mauris, blandit nam. Sed integer felis, netus tortor risus, turpis ante. Nullam adipiscing, fusce a, arcu non vehicula. Pede imperdiet suspendisse. Sed pellentesque lorem.

This is a blockquote. To use this style just type your quote like a normal paragraph then use the “styles dropdown” to select “blockquote”.

This is a dark blue callout. To use this style, just type your  callout like a normal paragraph then use the “styles dropdown” to select “Callout: Dark Blue Background”. 

Links

This is a Link

This is a gray button Link


 

List Styles

  • This is a bulleted list 1
  • This is a bulleted list 2
    • List level 2
    • List level 2 again
      • List level 3
  • This is a bulleted list 3
  • This is a bulleted list 4
  1. This is a numbered list
  2. This is a numbered list
    1. Level 2
    2. Level 2 again
      1. Level 3
  3. This is a numbered list

 

Image Styles

Placeholder Image width: 250px height: 200pxThe photo to the left has the alignment set to left and the margin on the right set to 20px. Lorem ipsum dolor sit amet, massa tempor nunc sollicitudin velit laoreet aliquam, tincidunt gravida lacinia erat, quam sem sodales pretium, id ac lorem arcu maecenas ipsum vivamus, suspendisse adipiscing aut nulla scelerisque ultrices diam. Diam eu dui, et rhoncus lacus nunc elementum phasellus dignissim, augue faucibus, elit cubilia, consectetuer eleifend commodo sed. Vel pede, class conubia. Ut bibendum pellentesque nibh nulla at nulla, sodales

Placeholder Image width: 250px height: 200pxThe photo to the right has the alignment set to right and the margin on the left set to 20px. Lorem ipsum dolor sit amet, massa tempor nunc sollicitudin velit laoreet aliquam, tincidunt gravida lacinia erat, quam sem sodales pretium, id ac lorem arcu maecenas ipsum vivamus, suspendisse adipiscing aut nulla scelerisque ultrices diam. Diam eu dui, et rhoncus lacus nunc elementum phasellus dignissim, augue faucibus, elit cubilia, consectetuer eleifend commodo sed. Eu vel pede, class conubia. Ut bibendum pellentesque nibh nulla at nulla, sodales


 

Table Styles

This is what a standard table looks like:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2  Column 2
Row 3 Column 1 Row 3 Column 2
Row 4 Column 1 Row 4 Column 2

This is what a table with the style "Box Table" looks like: 

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2  Column 2
Row 3 Column 1 Row 3 Column 2
Row 4 Column 1 Row 4 Column 2

 

Layout Options using Snippets

"Snippets" allow for admins/developers to provide pre-formatted HTML content that can easily be placed into the WYSIWYG editor. They can be access by using the snippet button in the WYSIWYG editor toolbar: snippet icon. Make sure you watch the CMS Training Videos for more information.

Two column content:

Heading 3 Title:

310px width

The Elizabethtown College Honors Program provides an opportunity for top achievers to enjoy enhanced learning opportunities with faculty scholars. These students are eligible for an academic and professional development stipend to be used for field trips, research, professional affiliations or information technology to support their work.

Heading 3 title

Small class sizes provide students with meaningful interactions with professors, 90 percent of whom hold a doctorate or other terminal degree in their field. Encouraged, challenged and supported by these engaging faculty, students become involved in experiential learning opportunities that include research, internships and off-campus study.

Block List:

Left Column Callout Block:

Class sed nunc fringilla sollicitudin, nisl id eros urna, sed ut nunc nullam torquent, pulvinar purus. A duis orci, orci interdum nec eu. Mauris qui nisl, orci quam, lorem tincidunt ut donec, fusce mauris, libero vitae pede nec. Massa eget et praesent amet, praesent mi non nibh sit id, vestibulum risus sit egestas sodales. Id nec mi distinctio et id ante.

Link

Link 2

Link 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis nulla ut libero sollicitudin sed suscipit ipsum dignissim. Vivamus eget dui accumsan velit luctus feugiat non at dui. Fusce at leo sed mauris congue ornare at quis quam. Aliquam erat volutpat. In tincidunt lacus ut mauris interdum vitae suscipit lacus condimentum. Quisque et purus dui. Ut sagittis arcu vitae enim pellentesque euismod. Praesent mollis nisl odio, non sodales ipsum. Pellentesque nisi augue, elementum quis egestas in, eleifend a metus. Cras tincidunt dictum sem id vestibulum. Phasellus sed justo ac massa convallis eleifend. Aenean quis diam lacus, non lobortis ante.

Vivamus ut sem vitae mi viverra iaculis sit amet a nulla. Curabitur diam lorem, auctor eu volutpat nec, tincidunt in lectus. Integer euismod porttitor erat vel suscipit. Aliquam eu sapien dolor, ut dictum lectus. Mauris rhoncus pellentesque enim a fringilla. Curabitur mattis, elit sit amet volutpat gravida, tortor nisi malesuada mi, at tristique justo justo non enim. Nam tempor nulla vel eros rhoncus dictum. Nulla vitae arcu nulla, vel vehicula lacus.

Donec erat magna, pellentesque sed consectetur sit amet, lobortis sit amet felis. Ut sollicitudin sollicitudin lacinia. Fusce libero mauris, pellentesque et hendrerit quis, auctor et arcu. Sed fringilla mi vel mi sagittis suscipit bibendum risus tempor. Aenean non augue leo, sit amet luctus nunc. Nulla porta dictum condimentum. Vivamus nunc ante, gravida ut consequat eu, dictum eget mauris. Cras dictum quam vitae odio scelerisque blandit. Fusce malesuada fringilla ipsum et dapibus. Aenean id nisi risus, nec cursus lorem. Ut ultricies tempor lacus, vel vestibulum dolor placerat ac. Ut sollicitudin felis ac nulla mattis gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Faculty/Staff Bio Block

Staff

Professor Wendy Bellew
Lecturer in Education
EMAIL@etown.edu | PHO-NUM-BERS

  • 2002 M.Ed. Millersville University
  • 1995 B.S., Education, Elizabethtown College

Teaches family, school, and community partnership course and various early childhood courses

In Brief: Professor Bellew joins the College as a Lecturer in Education, teaching primarily early childhood courses. Prior to coming to Elizabethtown College, she worked in the Hempfield School District (PA), teaching first grade and serving as an elementary school counselor. She lives in West Hempfield with her husband Larry and daughter Cassie

Elizabethtown College