Parent Home > Style Guide

Parent Website Style Guide

This style guide is meant to be used for the University Parent website in conjunction with the UMContent Reference Materials (see right column) for uploading and managing site content.

Quick Links

Log in to UMContent

Content and Media Manager (upload images or PDFs)

Heading Styles

Headings on websites are coded in HTML using <h1>, <h2>, <h3>, etc. heading tags. The best way to think about which heading tag to use is to imagine each page like an outline for a term paper. There is one main heading (usually at the top of the page and coded with an <h1>), one or more secondary headings (can be anywhere on the page and coded with <h2>), and possibly subheadings (anywhere on the page, coded with <h3>).

Parent-title-section-example
The title for each page goes in the "Title" section and is automatically coded with an <h1>.

Each page begins with a title (on this page, the title is "Parent Website Style Guide") which is automatically coded by UMContent as an <h1> when entered in the "Title" section of the UMContent editor.

Main body headings are <h2>s and use initial caps on each word (note "Heading Styles" above).

Making an <h2> Heading—To make your heading an <h2>, select the text in the editor, then select "Heading 2" in the Format drop down menu.

Subheadings

Above is an <h3> subheading. Subheadings should capitalize the first word, but lowercase all following words.

Subheadings should only be used after <h2>s have already been used.

Making an <h3> Subheading—To make your subheading an <h3>, select the text in the editor, then select "Heading 3" in the Format drop down menu.

Sub-subheadings

This is an <h4> sub-subheading. It may be used to call out important text, but should only be used after <h3>s have been used.

Making an <h4> Sub-subheading—To make your sub-subheading an <h4>, select the text in the editor, then select "Heading 4" in the Format drop down menu.

<h2> Without a Background

Above is an <h2> without the teal background. These <h2> headings are used in the right column on the Parent website have the .basic class applied to them.

Making an <h2> Heading Without Background—Go into the "Source" mode for the page in the content editor (see Editing Source Code for more information). Find the <h2> that you'd like to change. In the <h2> tag, add "class="basic". The finished html will look like this: <h2 class="basic">. This reverses the white letters on a teal background and makes teal letters on a white background.

This heading style should be used for <h2> headings in the right column and for subheadings after article titles. See article example.

Proper Use of Heading Tags

The proper use of heading tags is important for screen readers and for good search engine optimization (SEO) for the site.

Screen readers—When a screen reader is being used to scan a page, it jumps from heading to heading, reading the h1s first, then the h2s, then the h3s and so on. So think of your headings as a page outline. Keep the pieces in an order that would make sense for a screen reader. See more on the WebAIM website.

SEO—Heading tags are one way of emphasizing individual page's keywords to search engines. Heading tags are given much more importance by search engines than regular body text. They should be used to reinforce the page’s overall keyword theme.

Headings should never be used just to achieve a certain font size or color. If needed, we will add font styles to the style sheet for that purpose (talk to Kathy).

No extra space (multiple returns) should be added after the headings or anything else on a page. The only time extra space is needed is when a table has been included in the body of a page. Add and extra space after the table.

Links

Links are automatically set to be underlined and maroon and will style themselves (you don't need to do anything special). They turn teal when you hover your mouse over the link.

Links should always be descriptive and should not be the URL. For example, you should not tell people to go to this page: http://www.umn.edu/parent. You should direct them to the University Parent website instead. See "Editorial style for inline links" on Meet Content for best practices.

Linking an email address is acceptable. For example, send email to the Parent Program at parent@umn.edu.

See Making Links for information about how to make links in UMContent.

Quote Callouts

To visually call attention to a quote within the body of a page, use the .quote style in a <blockquote> and <span> element. Quote callouts must be done by hand in the source code (see Editing Source Code for tips).

You can copy and paste the code below into your source code to help you make your quote. Be sure to change the text of the quote between the <span> tags.

<blockquote class="quote">
<span class="quote">This is where you will put your quote.</span>
</blockquote>

The code above will produce the following design for the quote:

This is where you will put your quote.

The quote will not appear correctly in the content editor for UMContent; you will need to check it on the web page.

Quotes span the width of the column where they are used; text will not flow alongside a quote.

Text Callouts

 

This is a pure-CSS callout with border magic, but it'd better be tall enough so that the arrow off to the left doesn't sit below the bottom border.

Callout text is appropriate in the body content section of a page, but not in a right column. To make a text callout, you'll need to go into the source code (see Editing Source Code for tips).

You can copy and paste the following code into your source code to help you make your callout.

<div class="callout">
<span>&nbsp;</span>
<p>This is a pure-CSS callout with border magic, but it'd better be tall enough so that the arrow off to the left doesn't sit below the bottom border.</p>
</div>

Your callout text goes between the <p> tags. The callouts will always float to the right and should only be used in the center column. Do not use callouts in the right column; they are too wide.

FAQs

The Parent website has a number of FAQ pages and uses the .question style for the questions.

Making an Question—Highlight the question text, then select the p.question style from the "Style" drop down menu in the toolbar. In the source code, the tag and style for the question looks like this: <p class="question"> .

Q. This is a question on an FAQ page.

A. The "A" in front of the answer text should be made bold.

Photos and Captions

There are five images sizes that can be used in the main body section of the page. Each of the images need a class applied to tell the image which side of the column it should align with and to include a stylized caption.

The image size you choose should be based on the page you're working with and how it will be structured. A good, basic page layout will have the main content in the center column and an image at the top of the right column with a caption.

Once you've chosen an image and cropped it to the appropriate image size, save it using this naming convention: "Parent - my-image". Each image name should begin with "Parent -" and the rest of the name should be short and say something about the image subject. Upload your image using the Content and Media Manager page. See Uploading and Placing an Image for instructions.

1. Five Column Image

First, a note about columns. The Parent site is constructed using a 12-column coding system. The left navigation on all the pages is 2 columns. The center column can be either six or seven columns wide. The right column can be either 3 or 4 columns wide. On this page, the center column is 6 columns wide and the right column is 4 columns wide. The total column width for the page must always equal 12 columns.

This image spans the full width of the main column for the UR Subsite General layout (see page page layouts in right column). It is 420 pixels wide. Text will not wrap around it. To include caption text, you must add the .image class in the <p> tag before the image (see Editing Source Code for an example). The HTML will look like this: <p class="image">.

Parent - Full column width photo example. This is the caption. This image is 420 pixels wide; the same width as the column.

Example of a 300 pixel image.This is a 300 pixel wide image with a caption.

2. Four Column Image

This image is 300 pixels wide and is aligned to the left side of the page. The image is placed before this paragraph, causing the text to wrap around the image.

Placing your image—Insert your cursor in front of the first word in the paragraph, add a return, replace your cursor in that empty space above the paragraph, add your image, then go into the source code and use the following code in the <p> tag at the beginning of the image: <p class="image-g4 left">.

Example of a 220 pixel image.This is a 220 pixel wide image with a caption.

3. Three Column Image

This image is 220 pixels wide and is aligned to the left side of the page. The image is placed before this paragraph, causing the text to wrap around the image.

Placing your image—Insert your cursor in front of the first word in the paragraph, add a return, replace your cursor in that empty space above the paragraph, add your image, then go into the source code and use the following code in the <p> tag at the beginning of the image: <p class="image-g3 left">.

Example of a 140 pixel image.This is a 140 pixel wide image with a caption.

4. Two Column Image

This image is 140 pixels wide and is aligned to the left side of the page. The image is placed before this paragraph, causing the text to wrap around the image.

Placing your image—Insert your cursor in front of the first word in the paragraph, add a return, replace your cursor in that empty space above the paragraph, add your image, then go into the source code and use the following code in the <p> tag at the beginning of the image: <p class="image-g2 left">.

5. Six Column Image

For images that span the full center section of UR Subsite General 2-7-3 layouts (see page layouts in the right column), use a 450 pixel-wide image with <p class="image"> before the image.

Right-aligned Images

Example of a 300 pixel image.This is a 300 pixel wide image with a caption.

Four Column Image

This image is 300 pixels wide and is aligned to the right side of the page. The image is placed before this paragraph, causing the text to wrap around the image.

Placing your image—Insert your cursor in front of the first word in the paragraph, add a return, replace your cursor in that empty space above the paragraph, add your image, then go into the source code and use the following code in the <p> tag at the beginning of the image: <p class="image-g4">.

Example of a 220 pixel image.This is a 220 pixel wide image with a caption.

Three Column Image

This image is 220 pixels wide and is aligned to the right side of the page. The image is placed before this paragraph, causing the text to wrap around the image.

Placing your image—Insert your cursor in front of the first word in the paragraph, add a return, replace your cursor in that empty space above the paragraph, add your image, then go into the source code and use the following code in the <p> tag at the beginning of the image: <p class="image-g3">.

Example of a 140 pixel image.This is a 140 pixel wide image with a caption.

Two Column Image

This image is 140 pixels wide and is aligned to the right side of the page. The image is placed before this paragraph, causing the text to wrap around the image.

Placing your image—Insert your cursor in front of the first word in the paragraph, add a return, replace your cursor in that empty space above the paragraph, add your image, then go into the source code and use the following code in the <p> tag at the beginning of the image: <p class="image-g2">.

Parent Site Styles

Using UMContent

Writing for the Web

Writing for the web - or any electronic publication - is different than writing for print. When putting your content online for the Parent website, you may be copying and pasting from a newsletter or an email. When you do so, consider making some adjustments that will make the content more readable.

Some key tricks are to split the content into one or two sentence paragraphs (depending on the length of the sentences).

Break the content up with headers and subheaders. Use bulleted lists, make links to more information.

Many of these tips and others can be found in Web Writing Guidelines for Content Contributors on Meet Content.

List Styles

There are 5 types of list styles to choose from. Depending on what you choose, you will have to add a style to the source code for the list.

Read the rules and directions for each list before making your choice.

Default unordered list <ul> style 

The unordered list default style will kick in automatically when an unordered list has been selected in the content editor. Use this list for long sentences or paragraphs that may or may not incorporate links.

  • This list is indented a total of 30 pixels from the left text margin (40px in from the column edge). Make sure links are properly defined (see link styles).
  • To make an unordered list in the content editor, type the list with one return between each list item, or paste the list from a Word doc using the Word clipboard icon in the toolbar to paste in the content. Make sure there are no bullets, asterisks, or numbers in front of the list items. Then...
  • Select the list in the content editor and hit the unordered list icon in the toolbar. Ta da. You should have a list!

Default ordered list <ol> style

The ordered list default style will kick in automatically when an ordered list has been selected in the content editor. Use this list for items that should be numbered. Links may be added as needed.

  1. This list is indented a total of 30 pixels from the left text margin (40px in from the column edge). Always be sure your links are properly defined (see link styles).
  2. To make an ordered list in the content editor, type the list with one return between each list item, or paste the list from a Word doc using the Word clipboard icon in the toolbar to paste in the content. Make sure there are no bullets, asterisks, or numbers in front of the list items. Then...
  3. Select the list in the content editor and hit the ordered list icon in the toolbar. Ta da. You should have a list!
  4. This is the fourth item in this ordered list.

No bullet, unordered list

The no bullet, unordered list can be used whenever you have a list of items that you'd like to indent, but don't need bulleted. This kind of list works best with brief sentences and/or links. To make this kind of list, you must go into the source code (see Editing Source Code for tips) and add the class "no-type" to the <ul> tag at the beginning of the list. The code will look like this: <ul class="no-type">

Link underline on hover, unordered list

When using this type of list, each list item must be a full link. The links should not be very long. To make this kind of list, you must go into the source code (see Editing Source Code for tips) and add the class "no-underline" to the <ul> tag at the beginning of the list. The code will look like this: <ul class="no-underline">

Link underline on hover, no bullets, unordered list

When using this type of list, each list item must be a full link. The links should not be very long. To make this kind of list, you must go into the source code and add the class "no-underline no-type" to the <ul> tag at the beginning of the list. The code will look like this: <ul class="no-underline no-type">

Photos and Captions: Right Column

Photos used in the right column can be one of three sizes, depending on the layout you choose. The sizes are based on the image width. Images can be any height.

This page is the UR Subsite General 2-7-3 layout, so the largest image in this column can be 300 pixels wide. For more information about placing images, see Photos and Captions in the center column. Also see Editing Source Code.

Example of a 300 pixel image.This is a 300 pixel wide image with a caption.

Example of a 140 pixel image.This is a 140 pixel wide image with a caption.

For UR Subsite General 2-7-3 layouts, use a 220 pixel wide image to span the width of the right column.

For both layouts, the 140 pixel wide image will allow some text to wrap around the image. Don't forget to add <p class="image-g2"> for a right-aligned image or <p class="image-g2 left"> for a left-aligned image.

Lost and Confused

The many intricacies of UMContent are too numerous to detail in this Style Guide.

If you get lost or confused or just need help, email or call Kathy at goldie@umn.edu or 624-5808.

Confused kitteh