> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fusioncore.us/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Header and Footer

> A starting header and footer component pair for a community or portal, ready for a developer to theme.

## Overview

The **Custom Header and Footer** accelerator ships a bare header/footer component pair for an Experience Cloud community or portal. The header shows a **Login** link for guests, or the current user's name plus a **Logout** link once signed in; the footer is a placeholder ready for your organization's content. It's a starting scaffold, not a finished design — expect a front-end developer to do the styling and content work described below.

This accelerator is not part of core fusionCore. Install it separately when you need a quick community header/footer to build on.

## Prerequisites

* A front-end developer comfortable editing HTML/CSS/JavaScript — the package ships intentionally unstyled.
* An Experience Cloud site to add the components to.

## How to Configure

<Steps>
  <Step title="Add the components to your community">
    In Experience Builder, drag the **Fs Header** and **Fs Footer** Lightning web components onto your page or template.
  </Step>

  <Step title="Style the header and footer">
    Edit the `FS_CustomCSS` static resource. As shipped it only contains two empty rules, `.site_header` and `.site_footer` — all visual styling is your team's work to add.
  </Step>

  <Step title="Replace the footer placeholder content">
    The footer ships with the literal placeholder text "some footer content." Edit the `fsFooter` component's markup to add your organization's real footer content and links.
  </Step>

  <Step title="Fix the header's username link (if you plan to use it)">
    The shipped `fsHeader` component's username link doesn't navigate anywhere out of the box (see Limitations). Have your developer set a valid profile-page target before relying on it.
  </Step>
</Steps>

## Limitations and Common Pitfalls

* **Ships with no visible styling.** The header and footer render as unstyled HTML until your team fills in `FS_CustomCSS`.
* **The header's "click your name" link doesn't work as shipped.** A required configuration value for the target profile page is left unset in source, so clicking the username in the header currently does nothing — this needs a code fix before go-live if you plan to use that link.
* **Login, logout, and profile links are hardcoded to a standard `/s/` community URL path.** If your community uses a different base path, these links will break and need to be edited directly in the component source.
* **Nothing is configurable from Experience Builder.** Every change — links, styling, footer content — is a code edit and redeploy, not a builder setting.
* **Two component sets ship together** — a newer Lightning web component pair and an older Aura pair. Only use one pair per page to avoid duplicate headers or footers; the LWC pair is the current one for new implementations.