Customizing Your Help Center Agent Appearance

This guide explains how to customize the look and feel of your Brainfish Help Center Agent using custom CSS styles.

---

How to Access Custom Styles

Follow these steps to add custom CSS to your Help Center:

CleanShot 2026-02-11 at 17.11.20.mp4 3014x1822

Step 1: Navigate to Agents

From your Brainfish dashboard, click on Agents in the left sidebar to view all your AI agents.

Step 2: Select Your Agent

Click on the agent that's connected to your Help Center (look for agents with "Help Ce..." under Connection).

Step 3: Open Advanced Settings

Scroll down to find the Advanced Settings section and expand it by clicking the arrow.

Step 4: Edit Custom Styles

Locate the Custom Styles section and click the Edit button. This opens the Custom Styles editor.

Step 5: Add Your CSS

In the editor modal:

1. Enter your CSS code in the text area
2. Click Format to auto-format your code (optional)
3. Click Save to apply your changes

Tips displayed in the editor:

• Use browser dev tools to inspect element class names
• Test styles in dev tools before adding them here
• Changes are applied immediately after saving

---

Quick Start Example

Here's a simple example to get started:

/* Change the primary button color */
.bf-header__search-button {
  background-color: #4F46E5;
  color: white;
}

/* Customize card hover effects */
.bf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

---

Finding Element Class Names

Before writing custom CSS, you need to identify which elements to target. Use your browser's developer tools:

Using Browser Dev Tools

1. Open your Help Center in a browser (Chrome, Firefox, Safari, or Edge)
2. Right-click on the element you want to customize
3. Select "Inspect" or "Inspect Element"
4. Find the class name in the Elements panel - look for classes starting with bf-

Pro Tip: Test Before Saving

You can test CSS changes directly in dev tools before adding them to Brainfish:

1. In the Elements panel, find the <style> section or add a new style rule
2. Type your CSS and see changes instantly
3. Once you're happy, copy the CSS to the Custom Styles editor in Brainfish

---

CSS Class Reference

Brainfish uses a BEM-like naming convention with the bf- prefix:

.bf-{component}__{element}--{modifier}

Layout & Navigation

Class	Description
.bf-layout	Main layout wrapper
.bf-header	Top navigation header
.bf-header__logo	Logo container in header
.bf-header__logo-image	Logo image element
.bf-header__actions	Header action buttons container
.bf-header__search-button	Search button in header
.bf-content	Main content area
.bf-footer	Footer section
.bf-footer__logo	Footer logo
.bf-footer__social	Social links container
.bf-footer__powered-by	"Powered by Brainfish" section

Hero Section

Class	Description
.bf-hero	Hero section container
.bf-hero__content	Hero content wrapper
.bf-hero__card	Hero card (search area)
.bf-hero__title	Hero title text

Cards & Categories

Class	Description
.bf-cards	Cards container
.bf-card	Individual card
.bf-card__content	Card content area
.bf-card__header	Card header
.bf-card__title	Card title text
.bf-card__icon	Card icon
.bf-card__count	Article count badge
.bf-categories	Categories section
.bf-categories__title	Categories heading

Search

Class	Description
.bf-search-bar	Search bar container
.bf-search-bar__input	Search input field
.bf-search-bar__dropdown	Search suggestions dropdown
.bf-search-bar__suggestion	Individual suggestion item
.bf-search-results	Search results container
.bf-search-result	Individual search result

Sidebar Navigation

Class	Description
.bf-sidebar	Sidebar container
.bf-sidebar__item	Sidebar menu item
.bf-sidebar__subitem	Nested menu item
.bf-sidebar__group	Collapsible group
.bf-sidebar__search	Sidebar search box

Article Pages

Class	Description
.bf-article	Article page container
.bf-article__main	Main article area
.bf-article__content	Article content
.bf-article__title	Article title
.bf-article__sidebar	Article sidebar
.bf-article__toc	Table of contents
.bf-breadcrumb	Breadcrumb navigation
.bf-breadcrumb__item	Individual breadcrumb

Feedback & Actions

Class	Description
.bf-feedback	Feedback section
.bf-feedback__accept	Positive feedback button
.bf-feedback__reject	Negative feedback button
.bf-answer-card	AI answer card
.bf-next-actions	Next actions container

---

Theme Variables

Override these CSS variables to change colors across your entire help center:

Primary Colors

[data-theme] {
  /* Primary color - buttons, links, accents */
  --p: 259 94% 51%;
  
  /* Secondary color */
  --s: 314 100% 47%;
  
  /* Accent color */
  --a: 174 60% 51%;
  
  /* Neutral color - borders, subtle backgrounds */
  --n: 219 14% 28%;
}

Background Colors

[data-theme] {
  /* Main background */
  --b1: 0 0% 100%;
  
  /* Secondary background (cards, sections) */
  --b2: 210 20% 98%;
  
  /* Tertiary background (borders, dividers) */
  --b3: 216 12% 84%;
  
  /* Text color */
  --bc: 215 28% 17%;
}

Note: Colors use HSL format without the hsl() wrapper (e.g., 259 94% 51% instead of hsl(259, 94%, 51%)).

---

Common Customization Examples

1. Change Brand Colors

/* Override primary brand color */
[data-theme] {
  --p: 220 90% 56%; /* Blue */
  --s: 262 83% 58%; /* Purple */
}

2. Customize Header

/* Custom header background */
.bf-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
}

.bf-header__logo-text {
  color: white;
}

.bf-header__search-button {
  color: white;
}

3. Style Cards with Custom Hover Effects

.bf-card {
  border-radius: 16px;
  transition: all 0.3s ease;
}

.bf-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.bf-card__icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

4. Custom Search Bar

.bf-search-bar {
  border-radius: 50px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.bf-search-bar:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.bf-search-bar__input::placeholder {
  color: #94a3b8;
}

5. Customize Hero Section

.bf-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  padding: 80px 20px;
}

.bf-hero__title {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
}

.bf-hero__card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

6. Style Feedback Buttons

.bf-feedback__accept {
  background-color: #10b981;
  color: white;
  border-radius: 8px;
}

.bf-feedback__accept:hover {
  background-color: #059669;
}

.bf-feedback__reject {
  background-color: #ef4444;
  color: white;
  border-radius: 8px;
}

.bf-feedback__reject:hover {
  background-color: #dc2626;
}

7. Hide Footer Elements

/* Hide social links */
.bf-footer__social {
  display: none;
}

/* Hide entire footer */
.bf-footer {
  display: none;
}

8. Custom Article Styling

/* Article title */
.bf-article__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1e293b;
  border-bottom: 3px solid #667eea;
  padding-bottom: 1rem;
}

/* Article content links */
.bf-article__content a {
  color: #667eea;
  text-decoration: underline;
}

.bf-article__content a:hover {
  color: #4f46e5;
}

/* Code blocks in articles */
.bf-article__content pre {
  background: #1e293b;
  border-radius: 12px;
  padding: 1.5rem;
}

9. Dark Mode Adjustments

/* Target dark theme specifically */
[data-theme="dark"] {
  --b1: 222 47% 11%;
  --b2: 217 33% 17%;
  --b3: 215 28% 23%;
  --bc: 210 40% 96%;
}

[data-theme="dark"] .bf-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bf-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

10. Responsive Customizations

/* Mobile-specific styles */
@media (max-width: 768px) {
  .bf-hero__title {
    font-size: 1.5rem;
  }
  
  .bf-cards {
    grid-template-columns: 1fr;
  }
  
  .bf-header__logo-image {
    max-width: 100px;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .bf-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

---

Best Practices

Do's ✓

• Use CSS variables for colors to maintain consistency
• Test on multiple devices (mobile, tablet, desktop)
• Maintain accessibility - ensure sufficient color contrast (4.5:1 ratio for text)
• Use the provided class names - they are stable across updates
• Start with small changes and iterate

Don'ts ✗

• Avoid using !important excessively - only use when absolutely necessary
• Don't target internal class names that aren't documented (they may change)
• Don't remove important UI elements like navigation or search
• Avoid very large external stylesheets - they slow page loading

---

Troubleshooting

Styles Not Applying

1. Check class names - Ensure you're using the correct bf- prefixed classes
2. Specificity issues - Add !important if your styles are being overridden
3. Cache - Clear your browser cache and reload
4. Syntax errors - Validate your CSS for typos or missing semicolons

External Stylesheet Not Loading

1. Check the URL - Must end with .css
2. CORS issues - Ensure the hosting server allows cross-origin requests
3. HTTPS - If your help center uses HTTPS, stylesheets should also use HTTPS

Colors Not Changing

When overriding theme colors:

• Use HSL format without hsl(): --p: 220 90% 56%; (not --p: hsl(220, 90%, 56%);)
• Target [data-theme] selector for global changes

---

Need Help?

If you need assistance with custom styling, contact our support team. When reaching out, please include:

• Your custom CSS code
• Screenshots showing the current appearance
• A description or screenshot of your desired outcome

Our team is happy to help you achieve the perfect look for your Help Center Agent.