University Marketing and Communications

CMS Style Guide

Our web style guide documents design standards for all Michigan Tech websites. It also includes examples for all widgets available in our central CMS with links to instructions on how to create them. In additional to this style guide, you can learn more about our website requirements and our University web policy.

General Webpage Standards

Using our downloadable template, a manually created webpage will follow our brand standards. The following guidelines can also be used:

Header

  • Black (#000) background
  • Gold Michigan Tech logo, aligned to the left, linking back to the Michigan Tech homepage
  • Gold font color for links (#FC0)

Footer

  • Black (#000) background
  • White font color for links and other text (#FFF)
  • Gold color text for special statements such as an EOE statement (#FC0)

Content

  • Webpage background-color: white (#FFF)
  • Font families:
    • Open Sans or sans serif should be the default
    • Georgia or serif can be used for special pull quotes
  • Font size: no less than the equivalent of 15px in the main body
  • Links: #2F7ABD or similar
  • Rollover buttons—a call-to-action link in the form of a button:
    • Button background: #FC0
    • Font-weight: 600 or semi-bold if available, otherwise bold
    • Alignment: both the button and the text in the button should be centered

CMS Widgets

CMS widget examples serve as examples for Michigan Tech CMS users and design recommendations for external vendors tasked with creating Michigan Tech websites.

360 Images

Embedded in Page

As a Banner Image

Instructions

360 Images can be embedded in a page using the Video Snippet or included in the banner within MultiEdit Content.

Back to widget index


About the . . .

Instructions

Use the News About the . . . Snippet in the content field of a Sidebar Right Box Snippet.

Back to widget index


Alumni Profile

NameClass YearInduction Year
Last Name, First NameN/A'ar

Instructions

Create an Alumni Profile item that gets added to the page using external snippets.

Back to widget index


Blockquote

"This is a blockquote."Megan Ross

Instructions

Blockquotes are created using the Blockquote Snippet.

Back to widget index


Border

This is what it looks like with a border around the content.

This is what it looks like with an alert border around the content.

Instructions

Borders are created using the Boxed Sections Even Columns Snippet.

Back to widget index


Boxed Image Callout With Go

Instructions

Use the Boxed Image Callout w/Go Snippet inside a Boxed Section Snippet.

Back to widget index


Buttons

Yellow ButtonGray ButtonBlank Button

Instructions

You can select the button style from the class dropdown when inserting a link to create a single button or use the List Spread Buttons Snippet to create multiple buttons in a row.

Back to widget index


Charts

Area Chart

Loading. . .

Bar Chart

Loading. . .

Column Chart

Loading. . .

Line Chart

Loading. . .

Stepped Chart

Loading. . .

Instructions

To include a chart on a page, you must have data in a URL-accessible location, such as a Google Sheet. Use the Chart Snippet.

Back to widget index


Class Descriptions

MA 1160 - Calculus with Technology I

An introduction to single-variable calculus, which includes a computer laboratory. Topics include trigonometric, exponential, and logarithmic functions, differentiation and its uses, and basic integration. Integrates symbolic tools, graphical concepts, data and numerical calculations.
Credits: 4.0
Lec-Rec-Lab: (0-3-1)
Semesters Offered: Fall
Pre-Requisite(s): MA 1032 or MA 1031 or ALEKS Math Placement >= 80 or CEEB Calculus AB >= 3 or CEEB Calculus BC >= 3 or CEEB Calculus AB Subscore >= 3

CH 1150 - University Chemistry I

Introduces the foundations of chemistry, including electronic structure of atoms and molecules, intermolecular forces, states of matter, chemical reactions, organic chemistry, chemical equilibria, kinetics, and acid-base chemistry. Includes laboratory component that emphasizes lecture components.
Credits: 3.0
Lec-Rec-Lab: (3-0-0)
Semesters Offered: Fall, Spring, Summer
Co-Requisite(s): CH 1151
Pre-Requisite(s): MA 1031(C) or MA 1032(C) or MA 1160(C) or MA 1161(C) or MA 1135(C) or ALEKS Math Placement >= 56 or CEEB Calculus AB >= 2 or CEEB Calculus BC >= 2 or CEEB Calculus AB Subscore >= 2

UN 1015 - Composition

Provides direct instruction in composition. Students examine and interpret communication practices and apply what they learn to their own written, aural, and visual compositions. Class projects ask students to communicate in a variety of modes and to attend to audience, purpose, and context.
Credits: 3.0
Lec-Rec-Lab: (0-3-0)
Semesters Offered: Fall, Spring, Summer
Restrictions: Must be enrolled in one of the following Class(es): Freshman

Instructions

Class Descriptions are created using the Class Descriptions Snippet.

Back to widget index


Faculty/Staff Content Single

Contact

FirstName LastName

FirstName LastName

  • Title1
  • Title2
  • Title3
Phone
Email
Location

Contact-Sidebar

Bio

FirstName1 LastName1

Contact

FirstName1 LastName1

  • Title1
  • Title2: Affiliated Professor, Materials Science and Engineering, and Cognitive and Learning Sciences
  • Title3
  • Education1
  • Education2
  • Education3
  • Education4

Biography

This is the Biography section.

Research

FirstName MiddleName LastName
This is specialties right.

On a Page with One Sidebar

On a Page with Both Sidebars

Instructions

Use the Faculty/Staff Content Single Snippet to include a specific person's personnel information on a page.

Back to widget index


Faculty Staff Listing Multiple

Standard Staff Listing

FirstName LastName
"Quote"
—QuoteSource

FirstName MiddleName LastName

  • Title1
  • Title2
  • Title3
  • Phone
  • Cell: CellPhone
  • Email
  • Location

Specialties Left

  • This is the specialties left section.

Extra Specialties Left

  • This is the extra specialties left section.

Specialties Right

  • This is specialties right.
FirstName1 LastName1
"Quote"
—QuoteSource

FirstName1 MiddleName1 LastName1

  • Title1
  • Title2: Affiliated Professor, Materials Science and Engineering, and Cognitive and Learning Sciences
  • Title3
  • Phone1
  • Cell: CellPhone1
  • Email1
  • Location1

Specialties Left

  • This is the specialties left section.

Extra Specialties Left

  • This is the extra specialties left section.

Specialties Right

  • This is specialties right.

Bio

FirstName LastName

Contact

FirstName LastName

  • Title1
  • Title2
  • Title3
  • Education1
  • Education2
  • Education3
  • Education4

Biography

This is the Biography section.

FirstName1 LastName1 Read Full Bio

Contact

FirstName1 LastName1

  • Title1
  • Title2: Affiliated Professor, Materials Science and Engineering, and Cognitive and Learning Sciences
  • Title3
  • Education1
  • Education2
  • Education3
  • Education4

Biography

This is the Biography section.

Focus

The focus version should only be used in a Boxed Section Even Columns snippet with two columns.

FirstName LastName

FirstName LastName

Education1

Contact

Phone
Email

  • Title1

This is the Biography section.

[ "> read more ]
FirstName1 LastName1

FirstName1 LastName1

Education1

Contact

Phone1
Email1

  • Title1

This is the Biography section.

Publications

Research

FirstName MiddleName LastName
This is specialties right.
This is specialties right.

On a Page with One Sidebar

On a Page with Both Sidebars

Instructions

Use the Faculty/Staff Listing Multiple Snippet to include a multiple people's personnel information on a page.

Back to widget index


FAQ Ordered List

Groups of FAQs

FAQs and Sliders

Instructions

Use the FAQ Ordered List Snippet.

Back to widget index


Font Styles

This is regular paragraph text.

This is "large."

This is "larger."

This is "largest."

This is "small."

This is "smaller."

This is "larger Georgia."

This is "largest Georgia."

Instructions

Use the Styles dropdown in the TinyMCE Editor.

Back to widget index


Forms

OU Campus Asset Form

Helper Text

Helper Text

Radio Buttons

Helper Text

Multiple Elements in a Fieldset

Helper Text

Helper Text

Helper Text

Helper Text

Helper Text

This is instructional text. It is created in the mini editor.

 

Manually Coded CGI Script Form

View CGI Form Example

Instructions

There are instructions for basic forms and a separate post for advanced form functionality.

Back to widget index


Gift Box

Short Version

Title

Callout

Dark gray image placeholder.

Title

Callout

Progress total may take up to 24 hours to update.

Full Version

Dark gray image placeholder.

Progress total may take up to 24 hours to update.

Share this fund:

Body

Give To This Project

Full Version, No Progress or Image

Share this fund:

This is the body field.

Give To This Project

Instructions

Use the Gift Box Snippet, either directly on the page or as an asset.

Back to widget index


Headings

In the Body

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

This is an H2 Top Title

This is an H2 Graybar

Top Title with More Links

In a Boxed Sidebar

Instructions

Use the Paragraph dropdown in the TinyMCE Editor for basic headings, the H2 Graybar or H2 Top Title Snippets, or the Top Title with More Links Snippet.

Back to widget index


Horizontal Rule

Standard

Back to widget index


Yellow


Dots


Instructions

Use the Styles dropdown in the TinyMCE Editor.

Back to widget index


Description

Title

Caption

Description

Title

Caption

Description

Title

Caption

Description

Title

Caption

Instructions

Insert an Image Gallery Asset onto your page.

Back to widget index


Image Sizes

170 Square

Night photo of the husky statue on campus.

250 Square

Night photo of the husky statue on campus.

Personnel

Night photo of the husky statue on campus.

350 Sidebar

Night photo of the husky statue on campus.

515 Sub-banner

Night photo of the husky statue on campus.

800 Banner

Night photo of the husky statue on campus.

1024 Feature

Night photo of the husky statue on campus.

1600 Feature

Night photo of the husky statue on campus.

Instructions

Images are created with the Image Editor Gadget and inserted on the page using the Insert/Edit Image icon in the TinyMCE Editor.

Back to widget index


Image Thumbnails With Gallery

Instructions

Image Thumbnails with Gallery are created using the Image Thumbnails w/Gallery Snippet.

Back to widget index


Image With Caption

Left

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class set to left.

When you use a class of left on the snippet, the image will go to the left side of the content area with the text wrapping on the right side.

Right

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class set to right.

When you use a class of right on the snippet, the image will go to the right side of the content area with the text wrapping on the left side.

Middle

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class set to right.

When you use a class of middle on the snippet, the image will go to the middle of the content area with no text wrapping.

Blank

Night photo of the husky statue on campus.
This is a 350 Sidebar image on the page with the Class blank.

When you leave the class blank on the snippet, the image will go to the left side of the content area with no text wrapping.

On a Page with No Sidebars

On a Page with Left Nav

On a Page with Right Sidebar

On a Page with Both Sidebars

Instructions

Image with caption is created using the Image With Caption Snippet.

Back to widget index


Yellow Underline

Links will have a yellow underline when within paragraph text in the intro, main, or additional content regions or when the class of "yellow" is applied.

Blue Text

Links will have blue font color when in tables, lists, sliders, Intro Content, and Right Sidebar; when it is an email link; or when the class of "blue" is applied.

Arrow

Links can be specially styled to have an arrow.

Instructions

Links are created with the Insert/edit Link icon in the TinyMCE Editor and styled with the Class dropdown on the Insert/edit Link window .

Back to widget index


Lists

Ordered List

Default

  1. The default ordered list is numbers.
    1. Sub item
    2. Sub item
  2. Like this.
    1. Sub item
    2. Sub item

Lower Alpha

  1. You can also choose lower alpha.
  2. Like this.

Lower Greek

  1. Lower greek is another option.
  2. Like this.

Lower Roman

  1. Another style is lower roman.
  2. Like this.

Upper Alpha

  1. Upper alpha is available.
  2. Like this.

Upper Roman

  1. The final style is upper roman.
  2. Like this.

Unordered List

Default

  • The default unordered list is disc.
    • Sub item
    • Sub item
    • Sub item
  • Like this.
    • Sub item
    • Sub item
    • Sub item

Circle

  • You can also choose circle.
  • Like this.

Square

  • Square is another option.
  • Like this.

Classes

nobullets

  • Adding a class of nobullets
  • removes the bullets, but keeps the indentation.

none

  • Adding a class of none
  • removes the bullets and the indentation.
  • This is used for lists of links in the sidebar, among other things.

Instructions

Use the Bullet List and Numbered List icons in the TinyMCE Editor.

Back to widget index


Page Layouts

Hero With Intro

Hero Without Intro

Feature

Feature Video

Banner With No Sidebars

Banner With Left Nav

Banner With Right Sidebar

Banner With Left Nav and Right Sidebar

Banner Video

Sub-banner With No Sidebars

Sub-banner With Left Nav

Sub-banner With Right Sidebar

Sub-banner With Left Nav and Right Sidebar

Sub-banner Video

Text Popup

Text Over Image

Old News Story No Picture, No Sidebar

Old News Story Picture in Body, no Sidebar

News Publication Story

Magazine Story No Picture

Magazine Publication Story

1/3 2/3 Content Area

This is the 1/3 column space. It is smaller than the 2/3 space. It takes up 1/3 of the content area.

This is the 2/3 column space. It is larger than the 1/3 space. It takes up 2/3 of the content area. This layout uses the Boxed Sections 1/3rd 2/3rd Snippet.

2/3 1/3 Content Area

This is the 2/3 column space. It is larger than the 1/3 space. It takes up 2/3 of the content area. This layout uses the Boxed Sections 2/3rd 1/3rd Snippet.

This is the 1/3 column space. It is smaller than the 2/3 space. It takes up 1/3 of the content area.

2 Even Columns

This is an example of two even columns. Both sections are the same size.

This is the second column. This is made by putting content in two cells of the Boxed Sections Even Columns Snippet.

Instructions

Back to widget index


With Gallery

Night photo of the husky statue on campus.

The pop-up could come from text.

Without Gallery

Night photo of the husky statue on campus.

The pop-up could come from text.

Instructions

Use the Pop-up Images Snippet.

Back to widget index


Link

The pop-up text can be styled as a

link

Button

It can also be styled as

a button

a grey button

or a blank button

Blockquote

"A blockquote can also be a pop-up text link."Author Name

Tout

Instructions

The Pop-up Text Snippet can be used on the page or in the  List Spread Touts Snippet.

Back to widget index


Profile

Short Version

Profile Title

Dark gray image placeholder.
Profile Info

This is the Body field.

This is the Callout field.


Long Version

Instructions

Use the Profile Snippet.

Back to widget index


Row with Background

Image

    

You can put text over the background.

Light Grey

Light grey is made using grey and nofilter in the classes.

Dark Grey

Dark grey is made using grey in the classes.

Gold

For the rest of the colors you always need to use the nofilter class.

White

  • touts
    can
  • go
    over
  • the
    background

Black

The system knows what color text to use for each background color.

Khaki

Khaki without nofilter is just grey!

Instructions

Use the Row w/Background Snippet.

Back to widget index


Row With Left Image

Wrap

Night photo of the husky statue on campus.

This is some text below the image. You can see what it does in conjunction with wrapping.

Title

One of the parameter option is wrapping. If you set wrapping to true, the text on the right will wrap beneather the content on the left if it gets too long.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl nisl. Aenean ut posuere ex. Maecenas nec massa mauris. Donec mi mauris, dapibus ut risus ut, consectetur hendrerit tellus. Nullam scelerisque laoreet tellus. Mauris tristique mattis enim, sit amet congue ex dictum in. Fusce aliquam nisl est, ut euismod metus tempor non. Nulla aliquet congue pulvinar. Mauris bibendum felis ac aliquet dignissim. Pellentesque nec ornare urna, id fringilla justo.

Aenean volutpat pellentesque enim, non semper nulla tempor vel. Etiam sodales consequat diam et cursus. Cras at feugiat felis. Vestibulum quis ornare velit, a laoreet velit. Duis porta, nisi vel finibus pretium, lorem odio posuere enim, nec dictum nibh leo vitae ipsum. Nullam eget ex mattis nunc accumsan pellentesque fermentum a tellus. Phasellus at purus ac lacus feugiat lacinia. Nullam at enim sit amet tortor posuere venenatis. Donec at tempus magna, eu molestie tortor. Etiam hendrerit vulputate ipsum vitae fringilla.

No Wrap

Night photo of the husky statue on campus.

This is some text below the image. You can see what it does in conjunction with no wrapping.

Title

One of the parameter option is wrapping. If you set wrapping to false, the text on the right will stay on the right, leaving blank space below the content on the left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nisl nisl. Aenean ut posuere ex. Maecenas nec massa mauris. Donec mi mauris, dapibus ut risus ut, consectetur hendrerit tellus. Nullam scelerisque laoreet tellus. Mauris tristique mattis enim, sit amet congue ex dictum in. Fusce aliquam nisl est, ut euismod metus tempor non. Nulla aliquet congue pulvinar. Mauris bibendum felis ac aliquet dignissim. Pellentesque nec ornare urna, id fringilla justo.

Aenean volutpat pellentesque enim, non semper nulla tempor vel. Etiam sodales consequat diam et cursus. Cras at feugiat felis. Vestibulum quis ornare velit, a laoreet velit. Duis porta, nisi vel finibus pretium, lorem odio posuere enim, nec dictum nibh leo vitae ipsum. Nullam eget ex mattis nunc accumsan pellentesque fermentum a tellus. Phasellus at purus ac lacus feugiat lacinia. Nullam at enim sit amet tortor posuere venenatis. Donec at tempus magna, eu molestie tortor. Etiam hendrerit vulputate ipsum vitae fringilla.

Horizontal Rule

Night photo of the husky statue on campus.

Title

The other parameter is hr. Setting this to true will add a horizontal rule after each row that you create with the snippet.


Night photo of the husky statue on campus.

Title

This is a second row created within the same snippet.


Instructions

Use the Row w/ Left Image Snippet.

Back to widget index


RSS Feeds

News Full

News 2/3

News 1/3

News 1/2

Announcements 1/2

Announcements 1/3

Announcements 2/3

Announcements Full

Events Full

Events 2/3

Events 1/3

Events 1/2

Latest Post

Latest Post Display Full

Latest Post Display Trunc

Announcements Display

Localist List Modern

Localist List Card

Localist List Classic

Localist List None

Localist Mini Calendar + List Card

Instructions

The various feed modules use the RSS Feed Combined Snippet and the Localist versions are created using the embed code from the Localist Widget Builder.

Back to widget index


Instructions

Use the Sidebar Right: Box Snippet or the Sidebar Right: No Box Snippet.

Back to widget index


Sidebar: Graduate Program Contact

Instructions

Add the appropriate assets to the Sidebar Right: Graduate Program Contact Snippet.

Back to widget index


Sliders

Groups of Sliders

Sliders and FAQs

Instructions

Use the Slider Snippet.

Back to widget index


Social Media Icons

Instructions

Use the Social Icons Snippet.

Back to widget index


Tables

No Stripe or Border

Footer
Caption
Column 1 Heading Column 2 Heading
Row Heading Normal cell content
Row Heading
  • List item 1
  • List item 2
  • List item 3
Row Heading Here is a link
Sentence containing awesome content. A little bit more content.
Sentence containing awesome content. A little bit more content.

Auto Stripe

Footer
Caption
Column 1 Heading Column 2 Heading
Row Heading Normal cell content
Sentence containing awesome content. A little bit more content.
Sentence containing awesome content. A little bit more content.
Spacer Row
Sentence containing awesome content. A little bit more content.
Sentence containing awesome content. A little bit more content.

Manual Stripe

Footer
Caption
Column 1 Heading Column 2 Heading
Row Heading Normal cell content in an "alt" row.
Row Heading Normal cell content.
Spacer Row

Sortable

Footer
Caption
Column 1 Heading Column 2 Heading
Row Heading 1 Normal cell content
Row Heading 2 more cell content
Row Heading 3 cell content

Lines

Footer
Caption
Column 1 Heading Column 2 Heading
Row Heading Normal cell content
Sentence containing awesome content. A little bit more content.
Sentence containing awesome content. A little bit more content.
Spacer Row

Borders On

Footer
Caption
Column 1 Heading Column 2 Heading
Row Heading Normal cell content
Sentence containing awesome content. A little bit more content.
Sentence containing awesome content. A little bit more content.

Instructions

Tables are created and styled using the Table menu in the editor.

Back to widget index


Touts

Instructions

Use the List Spread Touts Snippet.

Back to widget index


Video

Title and Description

Preview image for Title Field video

Title Field

Description Field

Title Only

Preview image for Title video

Title

Description Only

Preview image for  video

This is the description.

No Title or Description

Preview image for  video

Instructions

Use the Video Snippet.

Back to widget index