How to customize the Office Live page header with an image

The initial website templates that come from Office Live for Small Businesses are ok to start a website. Once you need to improve the look of your website, you will need further customization which is not offered in the office live page designer interface. There are few ways to replace the header. I will focus on the case in which you may want to use an image as your website header without the need to make any additional changes to your page theme from the office live page designer.

These are the steps to follow:

1. Identify the width of the website

   This is necessary because we need to design an image that has a logo, brand message and perhaps contact information. Create an image with the same width as your site. Examples of this may be 640, 780, 980 in pixels. The image should have a height that matches what you need. Some recommendations may be 75, 100, 150, 200 pixels. This really depends on what you are putting on the header.

2. Upload your new image

   Upload your new image using the upload tool that provides the option to not optimize the image. Office live image optimization tries to reduce the size the image. This often causes the image to lose quality. For your header, you want a high quality image, but you should try not to upload something that is very large. Anything over 500KB starts to get too large in my opinion. This is the URL:

   http://YOURSITE.COM/WebsitePageEditor/ImageUploader_NoActiveX.aspx

3. Identify the elements that need to be replaced:

   Using tools like firebug (FireFox), Developer tool (Internet Explorer), you can inspect the webpage for the elements you need to modify. These elements are the following:

   • MS_MasterHeader

     This is the master header space. This is where the image for the header can be paced.

   • MS_MasterHeader table

     There is a table inside the master header cell. This table is where office live adds the headers with the images. This will be removed.

4. Add custom styles to your site

   On the Site Designer tab, click the Style Sheet button. This opens a dialog with a text area. In the text area, add the following: (Notice the dots before the words and replace the file name with your file name.)

   • MS_MasterHeader img{ border:0;}
   • MS_MasterHeader table {display:none;}

   On the Site designer tab, click on the header button and remove any text on the Site title and slogan. Select the Logo tab and select the header image you previously uploaded. Look down and on the Display Options, make sure to select Top. Click ok and press the save button on the top menu. Your site should now reflect the new change.

I need to mention that this is just one approach. There are other ways to achieve this or to do something different. For instance, you may want to add HTML, Flash or Silverlight instead of an image. There are ways to achieve this as well, but they may require a bit more technical ability. This is part of a different blog which I will be providing soon.