---
title: "Custom CSS for your Knowledge Base"
url: "https://help.productfruits.com/en/article/custom-css-for-your-knowledge-base"
language: "en"
last_updated: "2026-10-16T14:17:30.096Z"
---

# Custom CSS for your Knowledge Base

You can change how your Help Center looks by adding your own CSS to your Knowledge base settings. This article collects ready-made snippets for the most common changes. Copy the snippet you need, adjust the values if needed, and paste it into your Knowledge base.

## How to Add a Snippet

1.  Click **More** in the left menu and select **Knowledge base**.
2.  Go to **Customer Portal → Custom HTML and Scripts**.
3.  Paste the snippet into the **Body HTML or script tags** field.
4.  Save your changes and refresh your Help Center to see the result.

You can add several snippets to the same field. Paste them one after another, each with its own `<style>` tags.

**Note:** The **Custom CSS** section under **More → Branding** styles your in-app content, such as tours, hints, and the Elvin widget. It doesn’t change your Help Center. Knowledge base styling only works through the **Custom HTML and Scripts** tab.

**Important:** These snippets target the current layout of the Help Center. After adding one, check your Help Center on both desktop and mobile to make sure everything displays correctly.

## Hide the Featured Articles Section

If you don’t select any featured articles, the featured articles section on your Help Center homepage is filled with randomly selected articles. To hide this section, use the following snippet:

```css
<style>
.flex.flex-col.space-y-4 {
display: none;
}
</style>
```

**Note:** This hides the featured articles section completely, including any articles you have selected as featured. If you want to show specific articles instead, remove the snippet and select your featured articles in **Customer Portal → Featured Categories and Articles**.

## Hide the “Help Center” Button

To hide the **Help Center** button in the top menu, use the following snippet:

```
<style>
.menu-item-contact-us {
visibility: hidden !important;
}
</style>
```

## Change the Font

You can change the font of your entire Help Center. The example below uses the Rubik font from Google Fonts. To use a different font, replace the link with your font’s URL, and `'Rubik'` with the name of your font.

```
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

*:not(.fa-solid) {
font-family: 'Rubik', sans-serif !important;
}

.fas.fa-bars, .fas.fa-times {
font-family: "Font Awesome 6 Free" !important;
}
</style>
```

If you want to use a standard font that doesn’t need to be loaded, such as Arial or Georgia, leave out the `@import` line:

```
<style>
*:not(.fa-solid) {
font-family: Arial, sans-serif !important;
}

.fas.fa-bars, .fas.fa-times {
font-family: "Font Awesome 6 Free" !important;
}
</style>
```

**Note:** The second rule in each snippet keeps the menu icons visible. Without it, the icons in the top menu and the mobile menu are replaced by empty squares.

### Make the Content Area Wider

By default, the middle section of your Help Center, where the article text is displayed, has a maximum width. To make it wider, use the following snippet and adjust the value to your needs:

```
<style>
.max-w-\[90rem\] {
max-width: 120rem;
}
</style>
```

**Tip:** The default width is `90rem`. Increase the value gradually and check how your articles look on a large screen, as very long lines of text are harder to read.

To remove the “powered by Product Fruits” text from the bottom of your Help Center, see [Product Fruits Branding](https://help.productfruits.com/en/article/product-fruits-branding).