---
title: "How to Set Up a Custom Home Page (Sidebar Layout)"
description: "Introduction"
canonical_url: "https://help.brainfi.sh/articles/how-to-set-up-a-custom-home-page-sidebar-layout-aFJrvMrEcv"
md_url: "https://help.brainfi.sh/articles/how-to-set-up-a-custom-home-page-sidebar-layout-aFJrvMrEcv.md"
---
# Introduction

The custom home page lets you replace the default home content area of your help center with your own HTML and Tailwind CSS. It's the easiest way to give your home page a branded landing experience — a hero, a curated grid of categories, a call to action — without leaving the Brainfish dashboard or shipping a separate website.

This feature is available on the **sidebar layout** only, where the help center has a persistent navigation sidebar and a content area on the right.

## Before you start

* Confirm your help center is using the **sidebar layout**. You can switch layouts under **Themes & Customization** in the same panel.
* The editor accepts raw HTML with Tailwind CSS utility classes. No build step or external CSS file is needed — Tailwind compiles your classes at runtime.
* You can use [Phosphor icons](https://phosphoricons.com/) by dropping in tags like `<i class="ph-duotone ph-rocket-launch"></i>`.
* Theme colors are exposed as CSS variables. Use `hsl(var(--p))` for your primary brand colour and `hsl(var(--pc))` for primary content colour, so your custom home page automatically matches the rest of the help center.

## Steps


1. Open your help center channel from the **Agents** screen, then open the **Connection Settings** panel.
2. Scroll to the **Themes & Customization** section.
3. Confirm the layout is set to **Sidebar**. The custom home page block only appears on sidebar layouts.
4. Toggle **Custom home page** on. A reference template card and an **Edit home page** button appear below.
5. Click **Edit home page** to open the editor. The first time you open it, the editor pre-fills with a documentation-style reference template (a hero plus a 2×2 grid of cards) so you always have a starting point.
6. Use the **Write** tab to author your HTML. Switch to the **Preview** tab at any time to see exactly how it will render — the preview uses the same Tailwind compiler and Phosphor icon set as the live help center.
7. Click **Format** to prettify your HTML, or **Reset to template** to discard your changes and restore the reference layout. You'll be asked to confirm before any in-progress edits are lost.
8. When you're happy with the result, click **Apply**. Apply stays disabled until you've actually changed the template — this prevents accidentally publishing the placeholder copy ("Section title 1", "Your headline here") to your live home page.
9. Save the panel using the **Save** button at the top of Connection Settings to publish your changes to the live help center.

## What's allowed in the editor

For security, the editor blocks anything that could ship JavaScript or phishing surfaces to your visitors:

* `<script>` tags and inline event handlers (`onclick=`, `onmouseover=`, and other `on*=` attributes).
* `<iframe>`, `<object>`, `<embed>`, `<form>`, `<meta>`, `<base>`, `<link>`, and `<style>` tags.
* `formaction` and `ping` attributes.

If you try to apply HTML containing any of the above, the editor shows an error toast naming the disallowed element. The same rules are enforced again at render time, so even if a forbidden tag somehow makes it past the editor, your visitors will never see it execute.

## Theming tips

* **Brand colors:** Wrap colour values in `hsl(var(--p) / <opacity>)` or use Tailwind arbitrary values like `bg-[hsl(var(--p)/0.08)]` and `text-[hsl(var(--p))]` to pull your site's primary colour automatically.
* **Icons:** Use either inline SVG or Phosphor classes (`ph-fill`, `ph-duotone`, `ph-bold`, `ph-light`, `ph-regular`, `ph-thin`). Phosphor stylesheets are loaded for you.
* **Internal links:** `<a href="/articles">` and other relative URLs will route through your help center as expected. Use `target="_blank"` for links that should open in a new tab — Brainfish automatically adds `rel="noopener noreferrer"` so your help center can't be reverse-tabnabbed.
* **Layout:** Templates are typically wrapped in a centered container like `<div class="mx-auto w-full max-w-6xl px-6 py-16">` so the content has comfortable side margins on wide screens.

## Summary

To customize your home page, switch to the sidebar layout, enable **Custom home page** in **Themes & Customization**, author your HTML in the editor, and click **Apply** followed by **Save**. The pre-filled reference template is a great starting point — replace its placeholder copy and icons with your own content, preview as you go, and publish when you're ready.