---
title: "Customizing Your Help Center Agent Appearance"
description: "This guide explains how to customize the look and feel of your Brainfish Help Center Agent using custom CSS styles."
canonical_url: "https://help.brainfi.sh/articles/customizing-your-help-center-agent-appearance-f18D5ATYNF"
md_url: "https://help.brainfi.sh/articles/customizing-your-help-center-agent-appearance-f18D5ATYNF.md"
---
# 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](https://help.brainfi.sh/api/attachments.redirect?id=ed529037-0ded-4778-9a4a-6eb037ccfad1)

### 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:

```css
/* 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

```css
[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

```css
[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

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

### 2. Customize Header

```css
/* 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

```css
.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

```css
.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

```css
.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

```css
.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

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

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

### 8. Custom Article Styling

```css
/* 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

```css
/* 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

```css
/* 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.