Advanced help center branding

Also available in:DeutschPortuguês

Advanced branding lets you take a Deskwoot help center past the basic logo and brand color and make it look like it was built by your own design team. You configure all of it under Help Center, then the Settings tab. The basics (logo, brand color, search, layout) work on any plan, while the deeper controls (custom CSS, header and footer HTML) are part of the Enterprise plan. Here is everything you can change.

How do I set a custom favicon?

The favicon is the small icon in the browser tab. Upload one in the help center settings and it shows up on every public page of that portal. If you don't upload one, Deskwoot generates a branded icon from your brand color and the first letter of your portal name. A help center never shows Deskwoot's own favicon, so visitors don't see our brand in their tab even before you set one.

Use a square image (a PNG works well). Most browsers render it at 16 or 32 pixels, so keep the design simple enough to read at that size.

How do I pick a font for the help center?

Set a web font in settings and the whole help center renders in it. Deskwoot loads the font from Google Fonts for you, so there is nothing to host or upload. You pick from a curated list:

  • System default (no web font, uses the visitor's device font)
  • Inter
  • Roboto
  • Open Sans
  • Lato
  • Poppins
  • Montserrat
  • Nunito
  • Source Sans
  • Plus Jakarta Sans

Match the font to your marketing site and the help center stops feeling like a separate tool. Leave it on System default for the fastest load if you don't have a brand font in mind.

Light, dark, or auto: choosing a theme

The help center has a theme setting with three options:

  • Light (the default): white surfaces, dark text.
  • Dark: dark surfaces, light text. Good when your brand is dark.
  • Auto: follows the visitor's system setting (their prefers-color-scheme), so it shows dark to people who run their device in dark mode and light to everyone else.

The theme applies to every public page through the shared page shell, so you set it once and it covers the home page, category pages, and article pages.

Can I fine-tune the colors with design tokens?

Yes. On top of the theme you can override individual design tokens instead of writing CSS. The tokens you can set are the page background, the surface (cards and panels), the border color, the body text color, the muted text color, and the heading color. Each takes a hex value. Any token you leave blank falls back to the theme preset.

This is the clean way to nudge a dark theme toward your exact brand palette, for example a deep navy page background with a slightly lighter surface, without touching custom CSS at all. The brand color you set separately still drives buttons, links, and accents.

Custom CSS

For anything the theme and tokens don't reach, Enterprise portals can inject custom CSS. Deskwoot wraps it in a scoped style block at the top of the public help center so it styles your pages without you editing templates.

A few rules to know going in:

  • We sanitize the CSS when you save it. @import rules, url(javascript:...), and fetches of external resources are stripped out. This stops a portal from serving malicious code or loading attacker-controlled assets through the public page.
  • There is a size cap of 20,000 characters. That is plenty for branding tweaks; it is not meant to hold an entire design system.
  • Because it is scoped to the public help center, your CSS can't accidentally affect the Deskwoot dashboard.

Reach for design tokens first. Drop to custom CSS only when you need to restyle something the tokens don't expose.

Custom header and footer HTML

To make the help center feel like part of your main site, Enterprise portals can supply raw header HTML and footer HTML.

The header HTML renders as a self-contained block above the hero, so you can paste your marketing site's navbar and let visitors move between your site and your help center without a jarring switch. Custom header HTML needs an active custom domain.

The footer HTML replaces the default footer at the bottom of every public page, so you can mirror your marketing footer exactly. When you set raw footer HTML, it takes the place of the simpler column-based custom footer (a structured footer of up to 4 link columns plus a copyright line) if you had also configured that.

Both header and footer HTML are sanitized when you save. Scripts, event handlers, <style> blocks, iframes, forms, and javascript: URLs are stripped. Class and inline style attributes survive, so you write the markup with classes and let your custom CSS finish the styling. Each field caps at 20,000 characters.

How these fit together

A typical fully branded setup looks like this: a custom domain so the URL is yours, white-label on to drop the Deskwoot footer, your logo and favicon uploaded, a brand color and web font chosen, a theme picked (with a couple of token overrides if needed), and your real navbar and footer pasted in as header and footer HTML. At that point a visitor cannot tell the help center runs on Deskwoot. For the domain and white-label steps, see Set up a custom domain and White-label your help center.

One more safety net: every time you save design changes, Deskwoot snapshots the previous state. The design history in settings lets you see who changed what and roll back to an earlier look with one click, so experimenting with branding is low risk.

Frequently asked questions

Which branding options require the Enterprise plan?
Logo, favicon, brand color, web font, and theme work on any plan. Custom CSS, raw header HTML, and raw footer HTML are Enterprise features, and custom header HTML also needs an active custom domain.
Will my help center ever show Deskwoot's favicon?
No. If you don't upload one, Deskwoot generates a branded icon from your brand color and your portal's initial. The Deskwoot favicon never appears on your help center.
Should I use design tokens or custom CSS?
Start with design tokens. They cover page background, surface, border, text, muted text, and heading colors with no code. Use custom CSS only for things the tokens don't expose.
Can I paste my marketing site's navbar into the help center?
Yes. Enterprise portals on a custom domain can add raw header HTML that renders as a self-contained navbar above the hero. Scripts and styles are stripped on save, but classes and inline styles survive so your custom CSS can finish the look.
Can I undo a branding change I don't like?
Yes. Deskwoot snapshots the previous design every time you save, and the design history lets you roll back to an earlier state with one click.

Explore more

Related articles