Skip to main content area Skip to block navigation Skip to institutional navigation Skip to sub-navigation

Department Styles

This page features all of the general styles to be used throughout page layout for the website. For information on when to use these styles visit the Best Practices Section. Find out how to use them in the Tips, Tricks & Training section.

Typography

This paragraph has a class of "intro". Almost all of your pages should include an intro paragraph as a synopsis for the reader and to help with the flow of the information.

Blockquote text format can be used to call out portions of your copy. The other text on your page will wrap around the blockquote.

Note: When smaller text is needed, class="small" can be used.

An even smaller font style (class="fineprint"), with extended letter spacing for readability, can be used for fine print, labels on form fields, etc.

Definition Terms - are an item in a list and this is an example.
Definition descriptions are slightly indented from the "term" that precedes them.
Definition Terms - are an item in a list and this is an example.
Definition descriptions are slightly indented from the "term" that precedes them.

There are also options for "code" "code sample" and "preformatted text" formatting for you text, all of which will appear like this text.

Return to Top

Header Typography

Header 1

The "Header 1" format should be the first header on every page. Sometimes your header will be created for you when you chose the name of you page, but sometimes you will have to add it yourself.

Header 2

The "Header 2" format is the next level of headers on your page.  You can break up sections of your page using headers to create a better user experience and section your page out for better readability.

Header 3

The "Header 3" format should be used in subsections after you have used the Header 2 format.  Not only do headers help people read through your pages section by section, but screen readers can determine the layout of the page by following the header formats in order from top to bottom.

Header 4

The "Header 4" format follows the above.  Although not many pages will have four levels of subsections, you have the flexibility if it's needed.

Header 5

As mentioned above, not too many pages will have this many levels of headers, but these styles can also be used in call out boxes and other areas of your page after you have used the higher levels of headers in the main section.

Header 6

This is the final level of header that has been set up for our purposes.

Return to Top

Lists

A bulleted list is synonymous with an "undordered list" in the world of HTML.  Here is a sample list with several different "list items", or bulleted items, at various sub levels.

  • Animals
    • Dogs
      • Spot
        • Dalmation
      • Old Yeller
        • Golden Retriever
      • Benji
        • Mutt
      • Bethoven
        • St. Bernard
    • Cats
      • Felix
        • Black
      • Figaro
        • Black and White
      • Keyboard Cat
        • Orange long hair
      • Milo
        • Orange short hair

Ordered Lists

  1. Gather your ingredients
    1. 100g. flour
    2. 10g. sugar
    3. 1 cup water
    4. 2 eggs
    5. salt, pepper
  2. Put them together
    1. Mix dry ingredients thouroughly
    2. Pour in wet ingredients
    3. Mix for 10 minutes
    4. Bake for one hour at 300°
  3. Notes:
    1. The recipe may be improved by adding raisins

 

Return to Top

Tables

Organize your content in tables. The tools in the WYSIWYG are robust and the flexibility is great.

This is the "table caption"
Recent Gains
Floundering
Optimism
S.A. Spurs
True : False
$100,000 Yes 80% Manu Ginobili 5:1
12 lbs. Yes 100% Tony Parker 1:1
Not $100,000 No 80% George Gervin null
Hierarchy (see above) 100% Avery Johnson 120:1
Fruits and vegetables Yes 10% David Robinson 6.333:1
Mitigated No 100% Steve Kerr 0=0

 

Special Call Out Boxes:

Use a "div" as a Call Out for anything.

This item is quite important and this method is a good way to accomplish that which gets around the restrictions of the widgets (this is just a regular piece of content in the WYSIWG, not a widget).  Visit the Call Out Box training page to learn how to do this.

Pretty neat, eh? ~ WIT 

Use a "div" as a Call Out for anything.

This item is quite important and this method is a good way to accomplish that which gets around the restrictions of the widgets (this is just a regular piece of content in the WYSIWG, not a widget).  Visit the Call Out Box training page to learn how to do this.

Pretty neat, eh? ~ WIT 

Images

Palmer HallLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.Palmer Hall

Return to Top

Widgets

See the Widgets Kitchen Sink for the full list of widgets available.

Return to Top

Forms

The Web Implementation Team (WIT) will be happy to help you set up forms. All you have to do is ask!




Radio Buttons:

Checkboxes:

Return to Top

This is the Web Author Community • $orgType