Customize the Header

  • Article

Each Web site associated with a Microsoft Office Live Small Business account includes a header by default. To learn more about customizing this header, see Change the look and contents of your Web site header. You can also choose to turn off the header for any page on your site. For more information about turning off the header, see Remove the Header from a Web Page. If you want to provide a header, but need more flexibility than the default header allows, you can turn off the header and add a Custom header module to one of the zones in the page. To add a Custom header module, the Advanced Design features included with your Microsoft Office Live Small Business account must be activated. You can add content to the Custom header module using the contents of your own XSLT file, or you can edit the default XSLT code that comes with the Custom header module.

To activate the Advanced Design features, see Activate and Deactivate Advanced Design Features.

Note

If you replace the existing header with a custom header located in a zone on the Web page, you will probably want to create a custom navigation bar to align with your custom header. For more information about creating a custom navigation bar, see Customize the Navigation Bar.

Add a Custom header module

  1. On the left navigation bar, click Web Site.

  2. In Page Manager, on the actions bar, click Design Site, and then, in the drop-down list, click Design site.

  3. Click the Page Editor tab.

  4. On the left navigation bar, click the name of the page to which you want to add a custom header.

  5. On the Web page, click inside the zone where you want to add the header. On the actions bar, click Module, and then click Custom Header.

Use your own XSLT

You can create a custom header for your Office Live Small Business account with the contents of your own XSLT file. To do this, you must first add your XSLT file to the Document Gallery. For step-by-step instructions, see Add an XSLT File to the Document Gallery.

To create a custom header using your own XSLT:

  1. If you want to add a new Custom Header module, follow the instructions in the previous section. If you have already added the module, open the page containing the module in Page Editor, right-click the Custom Header module, and then click Properties.

  2. In the Custom Header dialog box, click Link to an XSLT file.

  3. Click Select file…

  4. In the Select a file dialog box, click the XSLT file that contains the custom header content. Click OK.

Start with the existing header XSLT

You can create a custom header by editing the XSLT code that, by default, supports the Custom header module.

Create a custom header by editing the existing Custom header module XSLT:

  1. In Page Editor, open the page containing the Custom header module, right-click the module, and then click Properties.

  2. In the Custom Header dialog box, click Edit XSLT code.

  3. Edit the code as required.

  4. Click OK.

Example

Let's say that you want to change the image in your custom header. The Properties dialog of the Custom Header module shows that the XSLT currently supporting the header includes an IMG element similar to the following code.

<img src="/_layouts/wh/images/themes/Accounting/1b_MemorialDay_t11.jpg">
 </img>

The header displayed based on this IMG element looks as follows.

Header before image customization

Let’s say that you changed the IMG element as follows.

<img src="/_layouts/wh/images/themes/Travel/1m_Spring_t28.jpg">
  </img>

Without making any other changes in the XSLT, the header for this Web page now looks as follows.

Custom header after image customization

See also

Add an XSLT File to the Document Gallery
Remove the Header from a Web Page
Activate and Deactivate Advanced Design Features