Help Center Custom CSS

Use Source Style Settings for standard theming, then optionally add advanced CSS for article-level customization.

Standard styling (UI controls)

In the dashboard, open Sources -> [your source] -> Style.

Use built-in style controls first (colors, typography, banner, nav, etc.). Advanced CSS should be used for targeted overrides that are not available in those controls.

Advanced styling (`schema.custom_css`)

In Sources -> [your source], open Advanced mode and save custom CSS.

The value is stored on the content source as schema.custom_css.
It is sanitized server-side and rendered in article pages as inline CSS.
It applies to all article pages for that source.
Leaving the field empty removes custom CSS overrides.

Safety and limits

Custom CSS is sanitized before rendering.

Maximum length: 12,000 characters.
These are blocked: <, >, <style>, </style>, @import, url(...), expression(...), javascript:, -moz-binding, behavior:, @namespace, @document.

This means external assets via url(...) are not supported in custom CSS.

Recommended selector scope

Start selectors with #guide .prose-article so changes are scoped to article content and do not accidentally affect global layout.

Available selectors

These selectors are stable entry points in the current help-center article page:

Selector	What it controls
`#guide`	Main article container on content pages.
`#guide .prose-article`	Parsed article HTML wrapper.
`#guide .prose-article h1, h2, h3, h4`	Headings rendered from article content.
`#guide .prose-article p`	Paragraph spacing and readability.
`#guide .prose-article a`	In-article links.
`#guide .prose-article blockquote`	Quote callouts.
`#guide .prose-article pre`	Code block container.
`#guide .prose-article code`	Inline and block code styling.
`#guide .prose-article table, th, td`	Table chrome and cell styles.
`#guide .prose-article img`	Embedded article images.
`#guide .prose-article hr`	Section separators.
`#guide button[aria-label="Copy code"], #guide button[aria-label="Code copied"]`	Code-block copy button styling.

Available CSS variables

Help Center uses theme variables from global styles. You can override them in custom CSS (usually in :root or .dark) and then consume them via hsl(var(--token)).

Variable	Typical use
`--background`, `--foreground`	Page surface and default text.
`--card`, `--card-foreground`	Card-like containers.
`--popover`, `--popover-foreground`	Popover surfaces and text.
`--primary`, `--primary-foreground`	Primary actions/highlights and text contrast.
`--secondary`, `--secondary-foreground`	Secondary UI surfaces.
`--muted`, `--muted-foreground`	Low-emphasis surfaces/text.
`--accent`, `--accent-foreground`	Accent states and interactive styling.
`--border`, `--input`, `--ring`	Borders, form chrome, focus ring.
`--radius`	Shared corner radius.
`--sidebar-background`, `--sidebar-foreground`, `--sidebar-border`	Sidebar/toc-adjacent surfaces.
`--sidebar-primary`, `--sidebar-primary-foreground`, `--sidebar-accent`, `--sidebar-accent-foreground`, `--sidebar-ring`	Sidebar interactive states.

Example: branded article typography and links


#guide .prose-article {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
}
 
#guide .prose-article h2 {
  margin-top: 2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid hsl(var(--border));
  letter-spacing: -0.01em;
}
 
#guide .prose-article a {
  color: hsl(var(--primary));
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}

Example: code blocks and copy button


#guide .prose-article pre {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.25);
}
 
#guide .prose-article code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
 
#guide button[aria-label="Copy code"],
#guide button[aria-label="Code copied"] {
  border-radius: 999px;
  border-color: hsl(var(--border));
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

Example: light + dark token overrides


:root {
  --primary: 214 84% 48%;
  --primary-foreground: 0 0% 100%;
  --border: 214 32% 88%;
  --radius: 0.75rem;
}
 
.dark {
  --primary: 199 89% 60%;
  --primary-foreground: 222 47% 11%;
  --border: 216 28% 24%;
}
 
#guide .prose-article blockquote {
  border-left: 4px solid hsl(var(--primary));
  background: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
  border-radius: 0 12px 12px 0;
}