A quick and easy way to change the SharePoint default header into something customized for your SharePoint install is to swap out the image used in the header style sheet class. You can easily change the graphic in the OWS.css style sheet located in the
\60\TEMPLATE\LAYOUTS\1033\STYLES directory or add it to your custom created style sheet that is specified in the site settings. These changes will affect both portal and WSS sites. Here are the steps:
- Create a graphic, make it long if it needs to expand the entire width of the site (I recommend around 1800 pixels wide) and then save it to the \60\TEMPLATE\IMAGES directory or a location of your choice.
- If you are editing the OWS.css file, locate this class:
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
background-image: url("/_layouts/images/topgrad.gif");
background-color: #002d96;
background-repeat: repeat-x;}
Change the background image attribute to point to your custom graphic:
background-image: url("/_layouts/images/YourCustomGraphic.gif");
You can additionally add a height attribute based on the image height:
height: 74px;
And change the repeat attribute based on your needs:
background-repeat: no-repeat;
- If you are editing a custom created style sheet, copy this class from \60\TEMPLATE\LAYOUTS\1033\STYLES\OWS.css:
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
background-image: url("/_layouts/images/topgrad.gif");
background-color: #002d96;
background-repeat: repeat-x;}
Paste the class into your custom style sheet. Change the background image attribute to point to your custom graphic:
background-image: url("/_layouts/images/YourCustomGraphic.gif");
Add any additional attributes such as height that you need, but RETAIN ALL THE ORIGINAL ATTRIBUTES. They can be modified to suit your needs, but do not delete the attribute. Your custom style sheet will only override class attributes located in the SharePoint CSS files-- it will not replace the entire class. So if the copied class in your custom style sheet specifies a background color and you remove that attribute, the site will still use the OWS.css specified background color.
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
background-image: url("/_layouts/images/YourCustomGraphic.gif");
background-color: #FFFFFF;
background-repeat: repeat-x;
height: 80px}
- Change the default SharePoint logo file. Once you add your customized header graphic, you will still have the default SharePoint logo in the upper left. You may have already changed this in the site settings, and your header graphic accommodates the logo you have specified… if you have not done this you can do one of two things:
- Save a new file under the same name as the logo that is transparent. Use a graphic editing tool to create a blank, transparent (not white) image. It can be very small, only a few pixels. Save this image as:
- sitelogo.gif (portal)
- logo.gif (WSS)
- DWS.gif (Document Workspace)
- MWS.gif (Meeting Workspace)
- Perssite.gif (My Site)
Copy the image(s) to the \60\TEMPLATE\IMAGES directory. This will replace the default logo with a transparent image, letting your custom header graphic show through.
- Plan your custom header graphic creation with the site logo image in mind. Make the left side of your header image into a graphic on its own and save this image as the appropriate file name (see list in item A). Copy the image(s) to the \60\TEMPLATE\IMAGES directory. This method may require some playing around with image size since the site logo file is buried in a nested table on the page.
*** If your custom graphic has images on the right that is getting in the way of the top tool navigation, see this tip for shifting the navigation over to the left:
» Shift the top tool navigation to the left