The new advanced design features let you customize, among other things, headers and footers of your web site in several ways. But it isn't all that obvious how the whole thing works. So here's the skinny on it.
You can customize headers and footers in two ways:
- By manipulating your web site's CSS (Cascaded Style Sheet)
- By disabling the default header or footer and using Custom Header or Custom Footer Modules to your pages instead
Each method has its advantages and disadvantages. Here's how to decide which one to choose.
By manipulating CSS, you can either change the appearance of existing elements in the header and footer or you can hide the elements altogether. You can't, however, add new elements to the design with CSS alone.To give you an example, you can manipulate the CSS and make the obnoxiously bold footer links less bold, or you can change the default background color of the footer, but you can't add, let's say, a horizontal line to the footer. If you like the site you've built using Office Live's themes and styles, but just want a few minor tweaks to the fonts, backgrounds, and alignment, manipulating CSS is the right solution for you.
Using the Custom Header and Custom Footer modules you can decide which elements get shown on your pages. Not only can you use all the site-wide settings you've chosen for your site in Site Designer's Header and Footer properties, you can even surround them with custom HTML elements and layout. This allows you to add elements like horizontal rules or drastically change the layout of the header or the footer. But the there are a couple of limitations to this method. First, you can't customize the header and footer site-wide; you must add the Custom Header and Custom Footer modules to every page. That's too much work, and not really worth the trouble unless you hate the default headers and footers with a passion. Second, you must understand how XSLT, the technology that this feature uses, works. The default XSL that Office Live displays for you in the properties of these modules has parameters for header and footer elements. If you don't know how to use these parameters with XSL, the customization can get tough and extremely frustrating. But if you've plenty of time on your hands and don't mind spending it customizing your sites headers and footers, you can come up with some pretty neat web pages.
In the next part of this tutorial, I'll get down to the nitty-gritty of each method.