Follow these simple rules when structuring your page: 

Use Content Areas

Each page consist of two content areas called Extra and Main. Use the Extra content area only for the information that appears in header of your page. Use Main for the content that appears in the body. 

Follow Proper Nesting Structure

All content on your page should be contained in a Regular pod with a Section style applied. See the Regular Pod instructions below for more information. Nesting content properly ensures that proper margins, spacing and formatting will be applied to your sites content. 

Regular Pod Styles

Add Pod Styles to format your content. 

Section Pod Styles

  • Use as containers for other pods and content. 
  • Text and images can be added directly to a Section Pod.
  • All other pod types should be nested inside of a Section Pod. 

Column Pod Styles

Column Pod styles replace default KERN column pods for a more accessible solution.

  • Add directly inside of a Section Style
  • Each child added will become a column 
  • Columns will wrap to form rows

Content Pod Styles

  • Adds a styled well or box around content

Formatting

Additional styling. Add when additional spacing or centering is required. 

Regular Pod Options

Class Name:

Used to apply special extra styles from the stylesheet, for advance usage and special scenarios.

Clearing:

If a pod above this pod has an image that is aligned to the left or right you can set a clearing option to make sure that this pod "clears" the other pod instead of displaying next to it or some other weird way.

Pod Assets:

Used to add images, files, links and videos to a pod.

Additional Pod Types

Function: second most common pod, used to display module content and other special functions like navigation displays and special asset functions. (See modules section for information about particular function pods).

Allows an administrator to collapse sections of content... and users can then expand it with the press of a simple button.

 

Example:

This is content inside a tipdown pod!

Essentially tipdown pods that are grouped and work together; only one can be open at any given time. If desired, one section (any one of them) can be automatically opened on page load.

 

Example:

This page uses accordion pods to display content. 

For grouping related content sections together into tabs. They can be Horizontal (adjacent to each other across the top) or Vertical (stacked along the left side).

 

Example:

Content for tab 1

Content for tab 2

Automatically rotate between pod contents. Administrator can specify delay/timing and visibility of the "buttons."

 

Example:

Slide 1 content

Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.

Slide 2 Content

Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Slide 3 Content

Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.

Used to display information in a styled table, it is best to copy and paste from a spreadsheet program such as excel.

 

Example:

DayDateTimeSession
MondayApril 176:00 - 9:00 pmPR2
WednesdayApril 196:00 - 9:00 pmPR3
MondayApril 246:00 - 9:00 pmPR4
WednesdayApril 266:00 - 9:00 pmPR5
MondayMay 16:00 - 9:00 pmPR6

HTML: Used to add specialty code as needed, such as wufoo form embed code. Use a lot of caution!

Conditional: Advanced pods used to show and hide content of the website based on special variables like whether or not a user is logged in, or before and after a certain date and time etc. 

Column: Don't use unless absolutely necessary. Instead select a regular pod and apply a column style that had defined specifically for CSI.