Style and Format

Style Guide | Page Design and Layout | Content Widgets | Image and Multimedia Widgets | Additional Functionality

Border

Full

Full border

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

All Individual Cells

All individual cells

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

First Column Only

First column only

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

Second Column Only

Second column only

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

Third Column Only

Third column only

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

Fourth Column Only

Fourth column only

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

Fifth Column Only

Fifth column only

Second column.

Third column.

Fourth column.

Fifth column.

Second row, first column.

Second row, second column.

Second row, third column.

Second row, fourth column.

Second row, fifth column.

Alert

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

Instructions

Borders are created using the Boxed Sections Snippet. To use the alert style border, please contact webmaster@mtu.edu.

Back to widget index

Buttons

Yellow ButtonBlack 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 Buttons in a Row Snippet to create multiple buttons in a row.

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

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

H2 Bar Separator

Use this heading in the left column of a 1/2 2/3 boxed section.

H2 Top Title with More Links

View in a Boxed Sidebar

Instructions

Use the Paragraph dropdown in the TinyMCE Editor for basic headings, the H2 Gold Bar Separator, H2 Graybar, or H2 Top Title Snippets, or the H2 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

Black Underline

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

Blue Text

Links will have blue font color when in a list with a class of none or nobullet 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. To use the nobullets or none classes, use the List Unordered Classes snippet.

Back to widget index

Tables

No Stripe or Border

Footer
Caption
Column 1 Heading Column 2 Heading
This is the first row of content. Normal cell content
Another Row
  • List item 1
  • List item 2
  • List item 3
Here is some content. 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
Sentence containing awesome content. 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
Here is a cell. Normal cell content in an "alt" row.
Some more content here. Normal cell content.
Spacer Row

Sortable

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

Lines

Footer
Caption
Column 1 Heading Column 2 Heading
Row 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 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