---
title: "Customizing callouts"
slug: "callout-styles"
description: "Learn how to highlight and style important info in Document360 using custom callouts with our step-by-step guide."
tags: ["Callout", "Custom CSS", "Add code snippets"]
updated: 2026-02-23T10:30:31Z
published: 2026-02-23T10:30:31Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing callouts

A Callout is designed to highlight important information within the article content. You can insert callouts using both the Markdown and Advanced WYSIWYG editors in Document360.

---

### Types of Callouts in Document360

Document360 provides four inbuilt callouts for

1. **Info**

> [!WARNING]
> Your title goes here
> 
> Your content goes here
2. **Warning**

> [!WARNING]
> Your title goes here
> 
> Your content goes here
3. **Error**

> [!CAUTION]
> Your title goes here
> 
> Your content goes here
4. **Success**

> [!TIP]
> Your title goes here
> 
> Your content goes here

## Styling the Callouts

If you want to modify these callouts, follow these steps to change the background color and other styling options:

1. Navigate to **Settings** (**) in the left navigation bar****in the **Knowledge base portal**.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript**.

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site_Customization_Custom_CSS&JavaScript.png)
3. From the left navigation pane, click on the **CSS**tab, then click the **Add code snippets** link on the right side.

The **Add code snippets** panel will appear.
4. Select **Change callout colors**. This will take you to the section where the existing callout colors are set.

![Options to customize site with CSS and JavaScript snippets for various elements.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771842590625.png)
5. Edit the code to make the necessary changes and add your branding colors.
6. Once done, click **Save**.![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771842608522.png)

By modifying the custom color in the Callout snippet, the changes will be applied across the entire knowledge base.

---

### FAQ

****Can I style callout color in dark mode?****

You can style the callout color in dark mode. For more information, read the article on [How to change the callouts color in dark mode?](/help/docs/how-to-change-the-callouts-color-in-dark-mode).

## Related

- [How to change the callouts color in dark mode](/how-to-change-the-callouts-color-in-dark-mode.md)
- [Customizing body font style](/body-font-style.md)
- [Customizing header font](/header-font-style.md)