header graphic.

A custom header graphic can be created from a photoshop file. If you don't already have it, (right-click this link and save link as 'header.psd' [yoursite/img/misc/header.psd]). Now open the file with Photoshop.

OK, at right you should see the 'layers palette' for the Photoshop file (just like the one depicted at right on this page). If the palette isn't open, and you don't know how to open it, then this tutorial might be something to leave to someone else (or just stick with the default header images). Nothing personal, it's just that Photoshop training is a bit beyond the scope of this site.

First, you'll need a graphic for your background. Or, you can use one of the default backgrounds linked from this page. Copy and paste your image into the 'header.psd' file. Now position your new layer (the image you just pasted) so that it fills the entire background. Be sure your new layer is placed underneath the 'yoursite' layer. Now just edit the 'yoursite' text layer. You should see two blue lines cradling the 'yoursite' text. You should use those same lines to align your text. This makes sure that the text is properly aligned with other page elements - namely the wordmark, the first tab, and the leftnav links. The font is standard and ready to go. You could choose another font, but then you'd not match the rest of the site(s) or the fonts in the stylesheet - not to mention University Identity Standards.Color the text if you wish. Now save as a .jpg file (try to keep it below 25k if you can). Your finished header image should be exactly 770px wide and 57px high.

One more step. Look for the line of source code in your document that corresponds to the '01B Header Title' section of your template. It will look something like this:

<div id="head_title_doc" style="z-index:4;"><span class="text">Your Site Name</span></div>

Just delete the part that says style="z-index:4;" and you're good to go. You still need the 'Your Site Name' text because it is used when the page is printed. What the style="z-index:4;" code does, is move the text in front of the graphic. By removing it, the text moves underneath the graphic and is uncovered when the graphic is dropped for printing (try the 'file>print preview' from your browser for this page to see how it works).