Replace Your Office Live Basics Sites Header

• Posted by acxede on March 17, 2007
• 0 comments

One thing I would have liked to see changed in the new version are the themes. They are simply ugly. Unfortunately, you are stuck with them; you have no alternative. All you can do is manipulate them to an extent to get rid of the ugly graphics.

If you don't like OLB's built-in themes for your site's header, you can replace the header with a single image. Here is how:

1. Create a header image (preferably as a gif) 780 pixels wide X 131 pixels high. (These are the default measurements of the header area. You can't make it any smaller. If you make a smaller gif, OLB's header will appear in rest of the area. If you make it bigger, it will be cut down to this size.)
2. Go to Site Designer and choose the Header tab.
3. Erase the Site Title.
4. Erase the Tagline.
5. Upload and add the header image you created in step 1.
6. In the Position dropdown, choose Next to title.
7. Click the OK button to save and close the designer.

Remember that you are simply overlaying the default header area with an image. If you have a full width site, make the background color of the header image the same as the theme you have used. Otherwise the image may not display properly.

But despite all this trouble, your header image might look a bit grainy. It's not your fault. Office Live doesn't use your image as it is. It reprocesses it in some way which causes some images to look grainy. If you just can't live with it, you can replace the entire header if you you really, really want to. You must add an HTML module to every page and add the following code to it:

<script language="javascript">
top.document.getElementById('IWS_WH_Elem_Header').innerHTML='<img src="/images/headerimage.gif" mce_src="/images/headerimage.gif">';
</script>

headerimage.gif, of course, is your header image and has to be in the images directory. You can put the image in a div or a span if you want to style it with css.

The reason I said, if you really, really want to is that I don't really recommend replacing the header this way. Whanever you manipulate the stylesheet to do someting, as is the case here, the whole thing falls apart if the javascript doesn't execute in the users browser for whatever reason.