Web Resources

Site Navigation

HTML and Graphics

Common navigation bar, graphics, and templates

Provided below are ready-to-use html templates and approved Ohio State graphics for use by Ohio State web developers. For more information regarding appropriate use and implementation of these graphics and templates, as well as additional design elements, please consult the Ohio State Identity Guidelines or contact University Marketing Communications, New Media.

Top "red/gray" navigation bar

A red/gray common navigation bar at the top of the page is the recommended primary common element among all Ohio State service sites and department/college web pages. It's a minimal primary element that reasonably attempts to tie together thousands of web pages under decentralized control. To maintain consistent usage across the university, please do not modify the navigation bar beyond customizing it with the name of your department, college, school, office, or program.

Sample image

  • Navigation bar

    • Download navigation bar

    (in .zip file format).
    Includes CSS and HTML

    NEW! January 2010: The navigation bar has been updated to use Google Custom Search.

    Please note: websites will no longer have the opportunity to "include" the navigation bar directly from Ohio State's main website.

    It is recommended that you download all CSS, HTML and images directly to your local site and reference the navigation bar from a local directory.

  • Optional nav bar

    There is an optional version of the common navigation bar with a link to the Ohio State search page instead of a search input box. This file is included in the navigation bar download files.

Web graphics

Additional graphics for all types of media applications and explanations of appropriate use can be found at Ohio State's Identity Guidelines site.

The Ohio State University logo

Ohio State University logo

(Drop shadow version)

HTML 

<a href="http://www.osu.edu/" title="The Ohio State University">
<img src="http://www.osu.edu/images/osu_logo.png" alt="Ohio State University logo" width="74" height="70" border="0">
</a>

The Ohio State University logo

(Plain version)

HTML 

<a href="http://www.osu.edu/" title="The Ohio State University">
<img src="http://www.osu.edu/images/osu_fulllogo.png" alt="Ohio State University logo" width="58" height="58" border="0">
</a>

HTML templates

Revised July 2008

The Ohio State template is intended for use by university entities wishing to have a consistent "look and feel" with the Ohio State home page and other university sites. While a degree of visual cohesion across university sites is a goal, not all sites are required to use the template. Colleges, schools, and unique organizations should develop sites consistent with their own web presence.

OSU Layout templates are based on the "Blueprint CSS" framework. Familiarizing yourself with BP CSS: Quick tutorial, Sample website, Using a grid, typography demonstration.

The example layouts use a 32 column grid, are fixed-width, 954 pixels wide, designed for 1024x768 pixel (or larger) monitor resolutions.

Download All Templates

(.zip format)

Examples

Enclosed with this "Read me" file are several basic template layouts.

More information

Please see the Ohio State Identity Guidelines for more information regarding the appropriate implementation of these templates