In WSS, there is no default header or whatsoever, it only has “Top Menu Bar” with those main navigations like “Settings”, “Document Libraries”, etc.
My understanding of the “Header” is the image that go on top of the “Top Menu Bar” which span through out the site.

Header image is the first thing you set to customise your WSS sites. There are numbers of CSS files for you to play with for the look and feel of the whole site.

For this header part can be manipulated from OWS.css file, which sits at
c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES

Place your header image here: c:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES

For WSS adding the header image tips, you must read this first two articles. #1 A Quick Way to Add/Change the SharePoint Header Area Graphic and #2 Adventures in CSS: Putting a banner image above the menubar in WSS

My version include abit of adjustment from the second article. The main difference between #2 and mine is that, #2 made use of second table’s CSS ie. .ms-bannerframe to apply the header image whereas in mine, I’ve use the first table’s CSS – .ms-main as you seen in the following code.

The image is added in .ms-main as followed. Once you add the image, the top menu bar still sit on top. To move the top bar down, you have to add margin-top space to .ms-bannerframe.

.ms-main{
background-image: url(“/_layouts/images/ats_intranet_header.jpg”);
height: 170px;
background-repeat: no-repeat;
}

.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree {
margin-top: 170px;
background-image: url(“/_layouts/images/topgrad.gif”);
background-color: #002d96;
background-repeat: repeat-x;
}

The method in #2 is mainly for default theme sites but once you apply it with different themes, the top-menu bar appear out of control. It is due to the image height set in .ms-bannerframe which is applied to second table and it acts as a background image for top-menu bar as well.

margin-top: 170px; this leave the space for the header image. The height of your header image should go there, ie. the one you use in .ms-main class. In my case it’s 170px.

.ms-bannerframe, .ms-grheaderbackground, .ms-stormefree {
background-image: url(sitelogo.jpg);
background-repeat: no-repeat;
border-bottom: 0px solid;
height: 72px;
}

Article 2 style effect: Theme1, Theme2, Default Theme

My Style effect: Theme1, Theme2, Default Theme

The disadvantage of my method is that, you need a fix image width. You cannot apply background color to it cos’ it will cover the whole page background as well. Also it doesnt work for individual webpart pages ie. a separate webpart .aspx pages that you created in document library. I’m yet to figure that out.
What is the advantage? hehe well it serves my purpose cos’ none of #1 and #2 work with my requirement.

This is just an extra note added to the first two articles, so that whoever with similar to my case can make use of it.

Thanks Ian for the articles.
Links: A Quick Way to Add/Change the SharePoint Header Area Graphic
Adventures in CSS: Putting a banner image above the menubar in WSS

Technorati Tags: WSS, Windows Sharepoint Services, Banner, Header, Menubar, OWS.css

No related posts.