Document360 provides four built-in callout types - Info, Warning, Error, and Success - each with a distinct default color. The Change callout colors CSS snippet lets you override these default colors to match your brand palette. Color changes apply globally across your entire knowledge base - all callouts of the same type are updated at once.
Callout types
| Type | Default color | Purpose |
|---|---|---|
| Info | Blue | Additional context, helpful tips, or supplementary information |
| Warning | Yellow | Potential issues, important considerations, or actions with unintended consequences |
| Error | Red | Known errors, failure states, or actions that must be avoided |
| Success | Green | Completed steps, positive outcomes, or recommended configurations |
- Info
your content goes here
- Warning
your content goes here
- Error
your content goes here
- Success
your title goes here
your content goes here
How to customize callout colors
- Navigate to Settings () > Knowledge base site in the left navigation bar of the Knowledge base portal.
- In the left navigation pane, navigate to Site customization.
- Click Custom CSS & JavaScript.
- Select the CSS tab, then click Add code snippets on the right.
The Add code snippets panel appears.
- Select Change callout colors. The snippet is inserted into the CSS editor showing the existing color values for all four callout types.
- Edit the color values in the code to apply your brand colors.
- Click Save.
The updated colors are applied across all callouts of each type in the entire knowledge base.
Best practices
- Preview in both light and dark mode - colors that look good in light mode may have contrast or readability issues in dark mode. Always check both after saving.
- Change colors globally, not per callout - the snippet updates all callouts of a given type at once. If you need a one-off color, use inline CSS in the article instead.
- Keep callout purpose aligned with color - avoid using colors that conflict with the callout's meaning. For example, using red for an Info callout can confuse readers.
FAQ
Can I style callout colors in dark mode?
Yes. For more information, see How to change the callouts color in dark mode.
Can I change the color of a single callout without affecting all others of the same type?
No. The Change callout colors snippet applies globally to all callouts of the same type across the entire knowledge base. Individual callout color overrides are not supported through the snippet - you would need to add inline CSS directly to the article for one-off changes.