CSS snippets are pre-written blocks of CSS code that you can insert directly into the Custom CSS editor in Document360 with a single click. Instead of writing CSS from scratch, you select the snippet you need, insert it into the editor, and modify the values to match your requirements. Document360 provides seven pre-loaded snippets covering the most common knowledge base site customizations.
When to use CSS snippets
Use CSS snippets when you want to make a common visual change to your knowledge base site quickly, without writing CSS from scratch:
- Change typography - update the body font or heading font across all articles to match your brand guidelines.
- Customize table styles - apply consistent borders, background colors, and padding to all tables in your knowledge base.
- Align images - center-align images in article content site-wide using a single snippet.
- Modify callout colors - change the background and border colors of Info, Warning, Error, and Success callouts to match your brand palette.
- Change the home page hero background - update the hero section background color or gradient using CSS.
- Disable the back to top button - hide the floating back to top button if it conflicts with your site's design.
CSS snippets are a shortcut to the most common customizations. For changes not covered by the pre-loaded snippets, you can write your own CSS directly in the code editor. See Custom CSS for guidance.
How to access CSS snippets
- 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.
- Click Add code snippets in the top right of the code editor. The snippets panel appears.
The panel contains seven pre-loaded snippets:
| Snippet | What it does |
|---|---|
| Change body text font | Updates the font family and color for article body content |
| Change heading font | Updates the font family and color for H1–H4 heading tags |
| Change table styles | Applies borders, padding, background colors, and alternating row colors to tables |
| Center align images in articles | Centers all images in article content |
| Change home page builder hero section background | Changes the background style of the home page hero section |
| Change callout colors | Updates the background and border colors of all four callout types |
| Disable 'back to top' button | Hides the floating back to top button across the site |
- Click any snippet to insert it into the CSS editor.
- Modify the values in the inserted code to match your requirements.
- Press Ctrl + S or click Save to apply your changes.
You can also write your own CSS code directly in the text area without using the pre-loaded snippets. Any valid CSS entered in the editor applies globally to the knowledge base site.
Available snippet guides
For detailed walkthroughs of each snippet - including the CSS code, example outputs, and modification tips, see the individual articles below:
- Customizing callouts
- Customizing body font
- Customizing header font
- Customizing table styles
- Customizing image alignment
Best practices
- Always preview after saving - snippet changes apply globally. Check how the change looks across article types, tables, and callouts before moving on.
- Modify one snippet at a time - insert and test one snippet before adding the next. This makes it easier to identify which snippet caused an issue if something looks wrong.
- Remove old snippets before adding a new alignment snippet - if you add a new image alignment snippet while an old one is still active, both will run and may conflict. Delete the previous snippet first.
- Use the snippet as a starting point - the pre-loaded values are sensible defaults. Replace font names, color codes, and size values with your brand-specific values.
FAQ
Can I add my own custom CSS snippets in addition to the pre-loaded ones?
Yes. You can write and paste your own CSS code directly into the text area in the CSS tab. The pre-loaded snippets and your custom code coexist in the same editor — simply add your code below or alongside the inserted snippets.
Do snippet changes affect all workspaces?
Yes. CSS is configured at the project level and applies universally across all workspaces. There is no way to scope a snippet to a specific workspace through the CSS editor.
How do I remove a snippet I no longer need?
Select the snippet code in the CSS editor and press Delete on your keyboard to remove it. Click Save to apply the change.