Customising the Help Center for Your Brand
Creating a consistent brand experience across all customer touchpoints is essential for building trust and loyalty. Brainfish gives you a full set of self-serve controls, layout, theme, colours, logo, favicon, fonts, and a custom CSS editor - to make your Help Center match your brand identity.
All of these controls live in Distribution → Agents → Help Center Agent → Connection Settings.
1. Layout
Choose how content is arranged on the page.
- Default Layout - AI Search is centred on the page. Best for most help centers as it prioritizes questions and answers.
- Sidebar Layout - All articles live in a sidebar on the lefthandside, and AI search is available on the righthand side, with content in the middle
Pick the one closest to how your marketing site is structured so the Help Center feels like a natural extension of your brand.
2. Theme
Pick the base theme that everything else builds on:
- Light Theme - light backgrounds, dark text. Suits most brands.
- Dark Theme - dark backgrounds, light text. Good for developer-led brands with a dark UI.
The base theme sets sensible defaults for every colour, surface, and border in the Help Center. You then override only what you need to.
3. Custom Colours
Toggle Custom Colors on to override colours from the base theme. You can set five colour slots:
| Slot | What it controls | Example |
|---|---|---|
| Primary | Buttons, links, focus states, primary actions | #0029FF |
| Secondary | Secondary buttons, subtle accents | #EDEDED |
| Text | Body and heading text | #394E6A |
| Background | Page background | #F5F5F5 |
| Surface | Cards, panels, raised elements | #F2F7FF |
Enter any valid hex code. Changes can be seen when you Save changes at top - keep the Primary colour aligned with your brand's primary action colour for the strongest brand recognition.
4. Logo and Favicon
- Logo — recommended size 250 × 48 pixels. Displays in the top-left of every Help Center page. Use a transparent PNG so it works on both light and dark themes.
- Favicon — recommended size 32 × 32 pixels. Displays in the browser tab. Use a square, high-contrast mark — usually a simplified version of your logo.
5. Font
Choose a font that matches your brand's typography. There are two modes:
- Library — pick from Brainfish's curated font library. Fastest to set up, no configuration needed.
- Custom — bring your own font from a CDN (e.g. Google Fonts, Adobe Fonts, or your own host). See Applying Custom Fonts to Your Help Center for CDN and cache behaviour.
Toggle between Library and Custom using the switch above the font selector.
6. Custom Styles (custom CSS)
If you need to go further than what the theme controls allow — for example, restyling specific components, changing spacing, or matching pixel-perfect brand specs — open the Custom Styles editor.
- Scroll to the Advanced Settings on the Agent configuration page for the Help Center agent.
- Click Edit to open the CSS editor next to Custom Styles.
- Write any valid CSS. Your styles are applied on top of the active theme and custom colours, so you only need to override what you want to change.
- Save to apply across your Help Center.
You can write as much CSS as you need — the editor shows the current line count (e.g. 633 line(s) of CSS) so you can see how heavily customised your instance is.
Tips for writing custom CSS:
- Inspect the Help Center in your browser's devtools to find the class names you need to target.
- Prefer overriding CSS variables exposed by the theme over targeting deeply nested selectors — variables are more stable across Brainfish releases.
- Keep a copy of your CSS in version control so you can roll back if a change doesn't look right.
If you want a deeper redesign - a fully custom theme rather than overrides: contact the Brainfish team and we can build one with you.
7. Social media links and search actions
Beyond Themes & Customization, you can personalise the rest of the Help Center experience from the Agent configuration screen:
- Social media links — add your social profiles in Connection Settings. They'll appear in the Help Center footer.
- Next best actions for AI answers — customise the suggested actions that show when users search under Agent Settings → Suggested Follow-up Actions
- Recent searches — turn off recent searches from the same Search Configuration page.
FAQs
Can I customise the social share icons next to an article? Yes. Go to Settings → Site Details and choose which social providers to show. The icons appear next to articles and in the Help Center footer.
Do I need to contact Brainfish to use custom CSS? No — custom CSS is self-serve via the Custom Styles editor in Themes & Customization. Contact us only if you want a fully custom theme built for you.
Will custom CSS break when Brainfish ships updates? Brainfish-exposed CSS variables are stable across releases. Overrides that target internal class names may need occasional adjustment after major UI updates — keep your CSS in version control so you can roll back easily.
What's the difference between Custom Colors and Custom Styles? Custom Colors gives you a managed override for the five core colour slots (Primary, Secondary, Text, Background, Surface) and is the right choice for most brand customisation. Custom Styles is a raw CSS editor for everything else — typography weight, spacing, component-level styling, etc.