Both the header and footer can be customized to your choice, and the entire design can be changed to fit your needs.

There are three sections of the site that can be changed. Both the default header and footer can be replaced and it is also possible to add more to the head tag. This means that HTML, CSS and JavaScript can be added, giving you the freedom to change the design in every way you want.

The Global navigation bar including the Get Satisfaction branding, can be turned off. If you turn it off, you will need to add the following script in your header to provide users the ability to login/register and navigate to their dashboard: <script type="text/javascript">page.user_console();</script>

This JavaScript includes HTML, so place it where you want the links to be placed. The included HTML is within a <span id="gsfn_user_console"> which can be styled using CSS.

Any content placed within Head Tag will be appended to the default head tags, and consequently preempt them. Get Satisfaction uses the Prototype Javascript Framework, which means that other frameworks should not be added unless they work properly with Prototype. But remember, it also means that Prototype´s great power can be utilized in your JavaScript.

All the HTML placed in Header HTML will be placed within <div id="header"> and replace the existing content. On the other hand, everything within Footer HTML will replace the existing <div id="footer">.

Technical Documentation

Key page elements:

• #page - the overall content area of the site
• • $header - the top section of the page that includes the logo, navigation, etc.
  • • #company_tabs - Navigation links for the community
    • #header_company_message - Displays the update message that can be set from within the community admin area
  • #container - The area that contains the main contents of each page
• #footer - The links or other information contained at the bottom of the page

The width of #container is defaulted to 948px. Reducing the width of this element to less than this width will affect the layout in undesirable ways.

CSS can either be included directly

<style type="text/css"> /* INSERT CSS HERE */ </style>

or by linking to an external file

<link href="http://example.com/style.css" type="text/css" />

The same can be done for JavaScript by just changing to type="text/javascript"

Some code examples

• Changing the background can be done by changing the body tag in CSS, e.g. body {background: #3C3C3C;}
• The text size and color of the included user links can be changed, e.g. #gsfn_user_console a {color: #CCFF2F; size: 12px;}
• If you want a header that is the same width as the page, include #header {margin: 0 auto; width: 1000px;}

So what have others done?