By default, table headers on the Knowledge Base site use a neutral background color. You can change this to any color using Custom CSS to improve header visibility, match your brand, or make tables easier to scan. The change applies globally to all tables on the site.
When to use a custom table header color
- Improve scannability: a distinct header color makes it immediately clear which row contains column labels, especially in dense or wide tables.
- Brand alignment: match the header color to your product's primary or secondary color for a more polished, on-brand knowledge base.
- Accessibility contrast: choose a color with sufficient contrast against your header text to meet readability standards.
NOTE
This CSS change applies to all tables across your Knowledge Base site. It is not possible to target individual tables using this method.
Quick reference
Use the snippet for your Knowledge Base site version. Replace the colour value with your desired hex code or CSS colour name.
.editor360-table th {
background-color: green !important; /* Change the colour based on your requirement. */
}
How to change the table header colour
- In the Knowledge Base portal, go to Settings > Knowledge base site > Custom CSS & JavaScript.
- Select the CSS tab and paste the snippet for your Knowledge Base site version from the quick reference above.
- Replace the color value with your desired color, use a hex code (for example,
#1a73e8) or a CSS color name (for example,steelblue). - Click Save.
Outcome
Before
After
After saving the CSS, the table header background changes to the specified colour. In this example, the header is set to #70db70 (green).
