Style and Format

• Border
• Buttons
• Font Styles
• Headings
• Horizontal Rule
• Links
• Lists
• Tables

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

Border

Full

All Individual Cells

First Column Only

Second Column Only

Third Column Only

Fourth Column Only

Fifth Column Only

Alert

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

• Several
• Buttons
• in a
• Row

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 Graybar

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

Links

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

Auto Stripe

Manual Stripe

Sortable

Lines

Borders On

Instructions

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

Back to widget index