My custom CSS doesn't work

When a CSS rule doesn't show on your help center, one of these causes is usually behind it. Your custom CSS lives in the template editor under Advanced → Custom CSS.

You haven't published

The preview shows your CSS as you type, but visitors see it only after you click Publish. Custom CSS goes live with the rest of your draft.

The snippet is switched off

Each snippet has an Enabled switch. A snippet marked Disabled stays saved but isn't used. Switch it back on and publish.

A brace is missing somewhere

All your enabled snippets are combined into one stylesheet. If a { or } is unmatched anywhere in it, none of your custom CSS is applied, in the preview or on your live help center. That includes the snippets your theme added, so the whole design can suddenly look plainer.

1. Check the snippet you edited last, and count its opening and closing braces.

2. Can't spot it? Switch snippets off one at a time and watch the preview. When your styling comes back, the snippet you last switched off has the problem.

3. Fix it, switch the other snippets back on and publish.

Your CSS is over 200 KB

All enabled snippets together can be up to 200 KB. Above that, none of your custom CSS is applied, and your draft can't be saved, so you can't publish until you trim it. Remove rules you no longer need, or switch off snippets you don't use.

Part of your CSS is removed

For safety, @import, @charset and @namespace rules are removed, javascript: URLs are blocked, and behavior and expression() are taken out. To change fonts, use the Theme tab, or an @font-face rule that points to a font file you host.

Your selector doesn't match

• Don't add #hc-site yourself. It's put in front of every selector for you, so each rule applies inside your help center.

• Rules that start with html or body never match. In a rule like html[data-theme="dark"] .hc-hero, #hc-site ends up in front of html, so nothing on the page fits. On its own, html, body, * or :root is turned into #hc-site. For dark mode, use theme variables such as var(--hc-color-bg) and var(--hc-color-fg), which switch between your light and dark colors.

• Use the hooks made for custom CSS, such as [data-hc-component-type="CategoryGrid"] or .hc-article__title. Other class names can change as the design improves.

The Custom CSS reference lists the stable selectors and variables.

Another rule wins

Right-click the element on your help center, choose Inspect, and see which rule your browser applies and which one it crosses out.

• Snippets are combined from top to bottom, so when two rules are equally specific, the lower one wins. Move your snippet below the theme's snippets with the arrows.

• Otherwise, make your selector more specific, for example by adding the component's data-hc-component-type.

You applied a theme

A theme's own CSS is copied into your Custom CSS list when you apply the theme. If Custom CSS was ticked in the apply dialog, the theme's snippets replaced yours.

• Not published yet? Reset draft (the clock icon in the top bar) discards every unpublished change, the theme included.

• Already published? Restore the earlier design from Version history. See Restore an earlier design.

Next time, untick Custom CSS when you apply a theme to keep your snippets. Because the theme's CSS is a copy, later improvements to that theme don't reach your help center until you apply it again.

Still stuck?

Contact our support team with the address of the page and the snippet that doesn't work. See Contact HelpCenter.io support.

Related articles

• Add custom CSS

• Custom CSS reference: selectors and examples