Skip to main content

Styles & Content Types

A brief overview on the site framework, styles and content types

There are many styles and content types available for all Web Authors to use with their sites. We have created some example pages to demonstrate various ways to use the content types that we provide. The examples also use a variety of the styles and elements listed below. If you are designing or developing any pages for the University, this section will be useful in creating successful pages.


Foundation


Grid

The University site is built on a 12-column grid system. Our grid system is responsive, which means the columns will rearrange based on the screen size and device being used. Responsive web design provides optimal user experience regardless of whether the user is on a desktop, a tablet or mobile device. On a desktop and most laptop devices, the site will display the sidebar(s) and content. On a tablet or mobile device, the sidebar and content items will be stacked on top of each other. 

12 column university grid


Color Palette

The consistent use of our institution colors helps to build a distinctive brand. Referred to as MSU Denver Blue, MSU Denver Red and MSU Denver Gray, these specific hues should be matched as closely as possible. Thier respective PANTONE®, CMYK and RGB equivalents are indicated in the tables below. 

 M.S.U. Denver Blue PANTONE®: 295 Blue | CMYK: 100 C 57 M 0 Y 40 K | RGB: 0 R 68 G 124 B | Web Hex: #00447C
 M.S.U. Denver Red PANTONE®: 193 Red | CMYK: 0 C 100 M 66 Y 13 K | RGB: 209 R 18 G 66 B | Web Hex: #D11242
 M.S.U. Denver Gray PANTONE®: Cool Gray 11 | CMYK: 0 C 2 M 0 Y 68 K | RGB: 113 R 112 G 115 B | Web Hex: #717073
The use of MSU Denver colors should be used minimally on the University site because they are built and used in the design and layout of the entire site. A good way to use these colors are in header images or buttons. These colors should NOT be used to display large bodies of text on a site. 

Headings and Text

Paragraph (P)- The paragraph is the body copy of a page. The paragraph is displayed in a plain styled text.  

Heading 1 (H1) - By default, the Heading 1 is used as the main title on every page.

Heading 2 (H2) - A Heading 2 is used to title a section within a page. 

Heading 3 (H3) - A Heading 3 is used as a subtitle of a page.

Heading 4 (H4)- A Heading 4 can be used to emphasize important sections of content and can also be used to break up content within a section. 

Heading 5 (H5) - A Heading 5 can be used as another way to emphasize important sections of content and can also be used to break up content within a section. An H5 could be useful if your text is long and you want to add an extra layer of page structure or a visual break.  
 
Headings are a great way to give an introduction to the content you are displaying. The combination of different headings should be used to divide content into scannable blocks, which will be helpful for your user and for search engines. The level of headings (1, 2, 3, 4, 5) should be used in hierarchical order. Heading styles are available to Web Authors via the "format" selection from the WYSIWYG editor.

This is a Heading 2 title

This is a Heading 3 subtitle that supports the Heading 2

This is an example of a paragraph. When describing a section in detail, use paragraph text. Sed vitae sollicitudin turpis. Ut condimentum, lacus vitae venenatis ornare, odio velit interdum turpis, non elementum leo nulla in nulla. Sed eget eros egestas, tincidunt ex non, fringilla arcu. 


Want to break up a section or shift to a new subject? Use an H4. The H4 should always relate to the Heading 2 or 3

Use an H5 to bring emphasis to important sentences within a section. Make sure that the H5 relates to the entire section. 
How to create a heading: 
1) In the content editor, highlight the desired heading text.
2) Choose your heading size from the "format" dropdown menu.
3) The text should change in size depending on which heading style is chosen. Click out of the highlighted text and press "return/enter" to exit the heading style.
*Headings are great for dividing content into scannable blocks. When using headings, remember to use them in hierarchical order. 

Typography



Text Styles

BOLD ITALIC UNDERLINED LoremSubScript dolor sit amet LoremSuperScript dolor sit amet

Bring emphasis to your text by utilizing some text styling options. The available options are standard to most text editors. Bold, Italic, Underline, Super Script, and Sub Script.

How to change the text style:
Select/highlight desired text and choose one of the options: Bold, Italic, Underline, Super Script, and Sub Script.

If the desired text is not present you can trigger these tools with keyboard shortcuts: ctrl + B / command + B for bold, crtl + I / command + I for italic, and ctrl + U / command + U for underline. Super and Sub scripts do not have keyboard shortcuts.


Blockquote

"MSU Denver designs every program, every course, for our changing world. College for college’s sake is an old idea. You’ll come here for an important reason—lifelong success. We’ll help you prepare for, enhance or change your career. It’s that simple."

Have a inspiring quote that aligns itself with your department? Use a blockquote to set it apart from the rest of your body content.

How to create a blockquote:
To create a blockquote select/highlight desired quote text and click on the    icon from the editor. You will notice your text becomes indented. This means a block quote is in place.


LISTS


Unordered List    

  • List Item #1
  • List Item #2
  • List Item #3
  • List Item #4
  • List Item #5
  • List Item #6
  • List Item #7

Ordered List    

  1. List Item #1
  2. List Item #2
  3. List Item #3
  4. List Item #4
  5. List Item #5
  6. List Item #6
  7. List Item #7

Lists are available in two forms: Unordered and Ordered. Unordered list items are prefixed by a bullet (•) while ordered lists will be prefixed with a number (1.) in descending order.

How to create a list:
If you have your list items on separate lines already, simply select/highlight desired list content and press either the bullet list or numeric list buttons on the editor. If you do not have list items already press bullet list or numeric list, then enter each list item followed by a return/enter to move on to the next item. Pressing return/enter twice will escape the current list.

ALIGNMENT


Left    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis urna aliquam elit lacinia ultrices. Nulla non velit a odio lobortis bibendum. Vivamus euismod massa id enim aliquet mattis. Suspendisse potenti. Mauris et nibh et nisl tempus gravida. Sed ipsum nunc, commodo non ultrices et, placerat vel odio.

Center    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis urna aliquam elit lacinia ultrices. Nulla non velit a odio lobortis bibendum. Vivamus euismod massa id enim aliquet mattis. Suspendisse potenti. Mauris et nibh et nisl tempus gravida. Sed ipsum nunc, commodo non ultrices et, placerat vel odio.

Right    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis urna aliquam elit lacinia ultrices. Nulla non velit a odio lobortis bibendum. Vivamus euismod massa id enim aliquet mattis. Suspendisse potenti. Mauris et nibh et nisl tempus gravida. Sed ipsum nunc, commodo non ultrices et, placerat vel odio.

Justify    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis urna aliquam elit lacinia ultrices. Nulla non velit a odio lobortis bibendum. Vivamus euismod massa id enim aliquet mattis. Suspendisse potenti. Mauris et nibh et nisl tempus gravida. Sed ipsum nunc, commodo non ultrices et, placerat vel odio.

Alignment allows you to control the flow of your body text. Similar to other text editors four options are available: Left, Right, Center, Justify. Text will default to a left alignment unless otherwise specified.

How to change alignment:
Select/highlight desired text and choose one of the four options: Left, Right, Center, or Justified. Text alignment can be used on headings and lists.

NOT FOR IMAGES
To align an image, double-click the image and when prompted simply type "left" or "right" in the float field when prompted. This will allow the text to wrap around the image.


Tables


Tables are a clean and consistent way to display tabular data. When building a table start by defining how many rows and columns are needed. Rows and columns can be added after the table is created.

Cell Padding will add spacing around your text in any given cell.

Cell Spacing will add spacing around the cell itself.

Border will place lines around your cells to help in readability. The border field requires a number and this number affects the thickness of your tables border 1 being very thing 10 being very thick.

Alignment will adjust text within a cell to be aligned according to what has been chosen, the default alignment is to the left.

Vertical Alignment will adjust text to be aligned with the top, center, or bottom of the cell.

Width and Height control the physical dimensions of the table as a whole. If these fields are left blank the table with adjust according to the text placed inside the cells.

Class allows you to change the style of the table.

The final checkboxes allow you to choose weather your table has a caption and/or which row or column is going to act as your header.

 


Example of a table

Tables are a great way to organize data. For example, below are a list of helpful student resources.

Advising Office 303-556-0000
Class Schedule/Catalog 303-556-0000
Office of the Registrar 303-556-0000
Campus Life 303-556-0000
Student Academic Success 303-556-0000

Edit this page