---
title: "How to Create a Custom Home Page for Sidebar Layout"
description: "Summary"
canonical_url: "https://help.brainfi.sh/articles/how-to-create-a-custom-home-page-for-sidebar-layout-YtP2IWscuP"
md_url: "https://help.brainfi.sh/articles/how-to-create-a-custom-home-page-for-sidebar-layout-YtP2IWscuP.md"
---
# How to Create a Custom Home Page for Sidebar Layout

## Summary

The Custom Home Page feature lets you replace the default help center home page (sidebar layout) with your own HTML and Tailwind CSS design. Create a branded landing experience with hero sections, card grids, links to key articles, and more — all without deploying any code.

## Prerequisites

* Your help center must use the **sidebar layout**
* You need admin access to the Brainfish platform

## How to Enable


1. Navigate to **Agents → Help Center → Connection Settings**
2. Scroll down to the **Layout** section under Theme Customization
3. Toggle **Custom home page** on
4. Click the HTML editor panel that appears to open the editor

 ![](https://help.brainfi.sh/api/attachments.redirect?id=58d69548-ff41-4e83-897e-04171be9ec3c " =x1712")

## Using the Editor

The custom home page editor provides a full HTML editing experience:

* **Write tab** — A Monaco code editor with syntax highlighting, auto-completion, bracket matching, and word wrap. Write your HTML and Tailwind CSS classes here.
* **Preview tab** — A live preview of your custom home page. Tailwind classes are compiled at runtime via the Tailwind Play CDN so you can see exactly how your page will look.
* **Reset to template** — Inserts the default reference template (hero section + 2x2 card grid). Useful as a starting point or to restore the default layout.
* **Format** — Auto-formats your HTML using Prettier for consistent indentation and readability.
* **Apply** — Stages your changes. You must still **save the panel** to publish them to your live help center.

## Getting Started with the Reference Template

When you first enable the custom home page, the editor pre-fills with a reference template that includes:

* A centered **hero section** with a headline and tagline
* A **2x2 grid of linked cards** with icons, titles, and descriptions
* **Phosphor icons** via the `ph-duotone` icon classes
* **Theme-aware colors** that auto-match your brand using DaisyUI CSS variables (`hsl(var(--p))`)

To get started:


1. Click **Apply** to stage the template
2. Save the panel to publish it
3. Re-open the editor and customize the headline, descriptions, links, and icons to match your brand

## Writing Custom HTML

### Supported Features

* **Tailwind CSS** — Use any Tailwind utility class. Classes are compiled at runtime via the Tailwind Play CDN.
* **Phosphor Icons** — Use `<i class="ph-duotone ph-icon-name"></i>` for icons. Browse available icons at [phosphoricons.com](https://phosphoricons.com).
* **Theme Colors** — Reference your help center's primary color with `hsl(var(--p))` in classes or inline styles.
* **Links** — Use `<a href="/articles">` to link to your articles list, or `<a href="/articles/your-article-slug">` for specific articles.
* **Images** — Use `<img>` tags with `http`, `https`, or `data:` URLs.
* **SVG** — Inline SVG elements are supported with full attribute support (viewBox, preserveAspectRatio, etc.).

### Security Restrictions

For security, the following are **not allowed** in custom home page HTML:

* `<script>` tags
* Inline event handlers (e.g. `onclick=`, `onerror=`)
* `<form>`, `<iframe>`, `<object>`, `<embed>`, `<link>`, `<style>`, `<meta>`, `<base>` tags
* `formaction` and `ping` attributes

These restrictions are enforced both at author time (in the editor) and at render time (server-side sanitization) to protect your end users.

## Example: Simple Hero with Quick Links

```html
<div class="mx-auto w-full max-w-4xl px-6 py-16">
  <header class="text-center mb-12">
    <h1 class="text-4xl font-bold text-slate-900">
      Welcome to Our Help Center
    </h1>
    <p class="mt-4 text-lg text-slate-600">
      Find answers, guides, and resources to get the most out of our platform.
    </p>
  </header>

  <div class="grid gap-6 sm:grid-cols-2">
    <a href="/articles" class="block p-6 rounded-xl bg-blue-50 hover:bg-blue-100 transition">
      <h3 class="text-lg font-semibold text-blue-900">Browse Articles</h3>
      <p class="mt-1 text-sm text-blue-700">Explore our full knowledge base.</p>
    </a>
    <a href="/articles/getting-started" class="block p-6 rounded-xl bg-green-50 hover:bg-green-100 transition">
      <h3 class="text-lg font-semibold text-green-900">Getting Started</h3>
      <p class="mt-1 text-sm text-green-700">New here? Start with the basics.</p>
    </a>
  </div>
</div>
```

## Publishing Your Changes

After clicking **Apply** in the editor, your changes are staged but not yet live. To publish:


1. Close the editor modal
2. Click **Save** on the Connection Settings panel
3. Your custom home page is now live on your help center

To revert to the default home page, simply toggle the **Custom home page** switch off and save.