SSU Web Standards - How the Header Works

This page is still in development. Some content is not yet posted, some may be changed at a later date.

Header

The header content is a separate file called "search-navbars.html." It is inserted into the page as a Server Side Include. It contains the necessary code for the logo banner, SSU search form, and top navigation rows. Sites can use the global header (which has the links to the University's Current Students, Future Students, Parents, Faculty/Staff and Friends pages), or a custom header.

Global Header

The templates point to the University's global header, using the following code. In Code View, this will be at or near line 12.

<div id="header"><!--#include virtual="/ssi/search-navbars.html" --></div>
<!-- end header -->

Department Header

Departments may use their own header to change the links available in the top navigation area. Contact the Web Office to get a copy of the current search-navbars file.

<div id="header"><!--#include virtual="/department/ssi/search-navbars.html" --></div>
<!-- end header -->

Allowed changes for the Department Header include:

  • Removing the lower nav links for "Current Students," "Future Students," "Parents," "Faculty/Staff," "Alumni," "Friends" and "Q&A" and leaving that area blank.
  • Replacing the lower nav links with links to department pages. This works best if these links are the first level of navigation, leading to pages that use the left navigation area to provide two more levels of navigation. For examples, see:

Customizing the Banner Image

By default, the global header uses this SSU banner background image:

Departments may use a customized banner image that includes the department's name. For example, here's the Department of Music's banner image.

Step 1 - Download and Customize the Banner image.

Download SSU Banner Template (PSD)

When customizing the banner, use the text layers provided to add your department's name.

  • Do not exceed the established left and right guidelines.
  • Do not move the Department Name text off the established baseline.
  • Do not change the font family, size or colors.
  • Do not add other images or logos.
  • Do not alter the SSU logo or CSU seal.

Click to zoom screenshot of SSU Banner in Photoshop.

Note: If your Department Name needs more than 2 lines of text, contact the Web Team for assistance.

Once you have modified the SSU Banner Template PSD, use Save For Web to save a JPG version of the banner image. Use high or very high image quality - the banner image shouldn't exceed 45K. Name the JPG bg-banner.jpg and save it to your department's images subdirectory.

Step 2 - Add the banner image to department.css

Add the following code to your department CSS file. Change "department" to the name of your department's web directory on the server.

#header {
  background-image: url(/department/images/bg-banner.jpg) !important;
  background-repeat: no-repeat;
}

Step 3 - Link your pages to department.css

Add the following code to each of your pages. This should be inserted in code view, in the <head> AFTER this comment:

<!-- Add department specific styles or overrides to global styles here -->


<link rel="stylesheet" href="../css/department.css" type="text/css" media="screen, projection" /> 

Step 4 - Upload

Upload the following files to the web server:

  • the customized bg-banner.jpg image,
  • the department.css file
  • the HTML pages that use the department banner.

Step 5 - Test

Use your web browser to visit one of the pages uploaded in Step 4. If you don't see the custom banner image, refresh your web browser's cache by reloading the page.

Note: When working in Dreamweaver's Design view, you may not see the customized background image with the global header, due to the way Dreamweaver interprets the server absolute filepath in the Server Side Include code. Once uploaded to the web server, the correct image should be displayed in the browser.