skip page navigationOregon State University
OSU Home.|Calendar.|Find Someone.|Maps.|Site Index.
Prospective StudentsCurrent StudentsParents & FamilyFaculty & StaffAlumni & FriendsVisitors

Template Builder

 
Introduction
Identity Elements
Requirements
OSU Wordmark
Typography Standards
Style Sheets
Color Palette
.
Web Templates
Overview
Examples
Template Builder
.
Content
Recommendations
Writing for the Web
Editorial Style
.
Help
Accessibility
Training
Contacts
Resources
OSU Graphic Identity Standards




 
Web Comm » Web Identity Standards » Template Builder.

Creating Your Template

  1. About Your Site
  2. Banner Color
  3. Header
  4. Layout
  5. Footer
  6. Preview and Export

Instructions

Choose and submit the options below to preview a template. If you like what you see, download or copy and paste the code to create a new page.

Documentation

View our frequently asked questions for more information on the template tool.


( Return to Top )

Step 1: About Your Site

Is this template for a secure site? (Choose "No" if you aren't sure.)
[help]

Is your site hosted on the central web server?
[help]

What kind of code do you need?
[help]

Choose PHP if your pages end with ".php". Choose HTML if your pages will end with ".html".


[help]

Examples:

  • oregonstate.edu/cws
  • search.oregonstate.edu
  • www.hhs.oregonstate.edu
  • science.oregonstate.edu
  • oregonstate.edu/dept/is

Your site domain/path is used by the custom search feature so that your visitors may search your site only, or all of OSU.

More on searching


( Return to Top )

Step 2: Choose a Banner Color


(a screen shot of the orange banner)


(a screen shot of the black banner)

Developers: Get the minimum required OSU banner without using the Template Builder.


( Return to Top )

Step 3: Design Your Header

Select the template options you want for the top of your page.

The universal utility links are located to the right of the OSU wordmark and are placed inside the banner. The utility links include: OSU Home, Calendar, Find Someone, Maps, and Site Index.

(a screen shot of the orange banner with the universal utility links)

(a screen shot of the black banner with the universal utility links)

Choose your audience bar option for the page top:

The audience bar is located directly below the OSU wordmark. The OSU audience bar links include: Prospective Students, Current Students, Faculty & Staff, Alumni & Friends, and Visitors.

(a screen shot of the orange banner with the utility links and the additional bar containing the OSU audience links)

(a screen shot of the black banner with the utility links and the additional bar containing the OSU audience links)

(a screen shot of the orange banner with the utility links and the additional bar without  links)

(a screen shot of the black banner with the utility links and the additional bar without links)

(a screen shot of the orange banner without the additional bar)

(a screen shot of the black banner without the additional bar)


( Return to Top )

Step 4: Design Your Page Layout

The document body includes the components of the content area. These include: the content buffers, the optional site title, and the content area.

(a screen shot of the orange design with a colored site title block)

Provide a site title if you wish to use the colored site title section. The site title is displayed as white text on a colored background. Try to limit the length of these titles for a better presentation.

Site title background color

(#ee9944)
(#aaaa77)
(#4c5c5c)
(#6688aa)
(#667799)
(#887788)
(#665555)

The content buffers add colored panels to both sides of your page, to improve readability. These buffers control line length within the live content area as the page expands.

Page with content buffers.
(a screen shot of the content body 'with' the colored content buffers on the sides)

Page without content buffers.
(a screen shot of the content body 'without' the colored content buffers on the sides)

What about navigation?

A sample navigation panel will be created for you. Navigation links are anchor links in an unordered list, and navigation headers are level 3 headers (h3). Read more on navigation.


( Return to Top )

Step 5: Customize Your Footer

Audience bar

This audience bar is located directly below the content and before the contact information. The OSU audience bar links include: Prospective Students, Current Students, Faculty & Staff, Alumni & Friends, and Visitors.

(a screen shot of the page bottom bar for the black banner design without links)

(a screen shot of the page bottom bar for the orange banner design with the OSU audience links)

(a screen shot of the page bottom bar for the black design without links)

(a screen shot of the page bottom bar for the orange banner design without links)

Contact information

Contact information is required at the bottom of every page. You must at least provide an email address.

Developers: If you want to use a custom footer, leave the email address blank. Keep in mind that you must still follow the Webidentity Guidelines

(a screen shot of the default contact information block)

This will also be the name people see when they send you comments and questions to the email address below.

To reduce spam, you could provide an OSU Web E-mail Form link or an OSU Unique Identification Number instead of your E-mail address.


( Return to Top )

Step 6: Preview and Export

Now you're ready to preview your custom template.

Keep these things in mind:

  • If you don't like what you see, feel free to come back, make adjustments, and try again.
  • After submission, we'll temporarily save your options so you won't have to re-enter everything to make adjustments.
  • If you are happy with how your template looks, you may export it from the preview page.
  • On the preview page, you will have the option of cutting and pasting code or downloading a template file.
Prospective StudentsCurrent StudentsParents & FamilyFaculty & StaffAlumni & FriendsVisitors