A Quick Way to Add/Change the SharePoint Header Area Graphic

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 60TEMPLATELAYOUTS1033STYLES 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:

 

  1. 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 60TEMPLATEIMAGES 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 60TEMPLATELAYOUTS1033STYLESOWS.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:
    1. 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:
      1. sitelogo.gif (portal)
      2. logo.gif (WSS)
      3. DWS.gif (Document Workspace)
      4. MWS.gif (Meeting Workspace)
      5. Perssite.gif (My Site)

 

Copy the image(s) to the 60TEMPLATEIMAGES 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 60TEMPLATEIMAGES 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

 

9 thoughts on “A Quick Way to Add/Change the SharePoint Header Area Graphic”

  1. Heather,

    I left a comment on my blog that you pointed to this entry for. I just checked and if you *only* use the OWS.CSS change above, the menu bar will be centered in the middle. This is because the TD has a hard coded valign=middle in it. To get the text to the bottom of the TD (because the hard coding will override all CSS styles) you need the additional changes that I have on my blog.

    I’ll post some screenshots on my blog tommorow of this so it shows the effect.

    Not to offset your blog here but to get the full effect of an image above the menubar rather than behind it, you need to do a little extra CSS magic.

  2. If you use a short graphic, then yes it will be centered in the middle. But if you are creating a header image (when I think header I think full width) and build a graphic at the width specifications I suggest, then it will not be centered.

  3. Does this apply to WSS3.0 as well? Just use the core.css in the following location:C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033STYLESGreat site BTW Heather !

  4. I’m trying to change the logo in the header area (logo.gif). I know how to replace it with a different logo but I want to hide it all together and I can’t seem to find where this is referenced.

  5. I am trying to create a border for the Header section of a Webpart. I tried updating the border section of the ms-WPHeader class in the Core.css but it does not render any change, where as if I update background section it renders the changes. I used the ms-WPHeader TD class but that creates a line between the title and the little drop down button which is not the requirement.Please advice…thank you.

  6. Hi!I am Mr. Kim living Kunsan Korea.I’d like to update the /_layout/ image/home.gif to my own grapic image.Then I have trouble.I am end user and and site admin.How can I get the .css files from website.Would you please show me.I would appreciate if you help me for this problem.Thanks for rewading me.V/RMr. Kim

Comments are closed.