UW Home > UWIN > Site Information > Guidelines

Using a Custom Banner Graphic

The common look of the UW Web pages can be customized, within reason, to meet the needs of the many groups on campus. In addition to customizing the breadcrumbs and footer, you can also customize the header of the page.

By default, the header appears with a gray bar, like the one that appears at the top of this page. You can customize that space to include page or section identification by adding one of two types of banner graphics: repeating or non-repeating.

Using a repeating banner graphic

Use a repeating banner graphic if you want the graphic to "tile", or repeat horizontally to fill the banner across the page. A repeating banner will fill the top of the page even if the user resizes their browser window. For example:

To include a repeating banner graphic on your site, you must set the chtml variable called "bannerrepeat" to the location of your banner graphic. To do this, include the following line at the top of your HTML page (it must appear before the chtml line that includes the header file):

Where "/mydir/myBannerFile.gif" specifies the location of the graphic file you would like to use. So for instance, if your graphic is in the students directory, this line may look something like:

Notice that you must specify the exact location of the image file you would like to use.

Using a non-repeating banner graphic

Use a non-repeating banner graphic if you would like to place a single copy of the image in the banner. Below is an example of a non-repeating banner graphic:

To include a non-repeating banner on your site, you must set the chtml variable called "bannernorepeat" to the location of your banner graphic. To do this, include the following line at the top of your HTML page:

Where "/mydir/myBannerFile.gif" specifies the location of the graphic file you would like to use. For the example above, the CHTML line would look something like this:

Additionally, you can set the background color of the rest of the header bar by setting the chtml variable "bannerbgcolor":

You should replace "myChoiceOfColor" above with either the html named color (for example red, blue, green) or a Websafe hexidecimal value (for example: #330000, #003300, #000033). The following example shows the use of a single banner graphic with the surrounding background color set to green:

This can be achieved with the following CHTML code:

Banner style recommendations

The following recommendations will help ensure that your banner enhances the look of your site without significantly reducing site usability.

In order to keep downloading time at a minimum for the end-user, the file size of the graphic should be no more than 20K.
To reduce redundancy, we recommend that neither "UW" nor "University of Washington" be used in the banner graphic.
Before publishing content, banners should be viewed/tested on several browsers. Make sure that the banner looks acceptable on different platforms, and with different browser window sizes.

Banner requirements

In order to maintain the common UW look, feel, and functionality, the following guidelines must be followed:

Banners may be used to provide page or section identification, but must not include advertisements.
Banner graphics should be no more than 65 pixels tall. Larger banners could significantly reduce the viewable content area on user's screens.
No navigation elements may appear in the banner.
Regardless of the chosen banner, the title of the page must be included as text at the top of each Web page.
Banners should not include elements, such as animation, that may significantly detract attention from the content of the page.