Advanced help center branding

Logo, hero image, header links, brand color and support email are explained in Customizing your portal brand. This article covers the rest. Every change saves by itself.

Favicon

The favicon is the small icon in the browser tab. Under Branding, click Upload next to Favicon and pick a square PNG or WebP from 32 to 1024 pixels wide, up to 256 KB. It shows on every public page of your help center; Remove favicon takes it away again. Without one, the tab shows the first letter of your portal name on your brand color. Your help center never shows the Deskwoot icon. Pick a simple icon that still reads at 16 pixels.

Page font, heading font and reading font

Under Appearance, Font sets the font of the whole help center: System default (the visitor's own device font), Instrument Sans, Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans or Plus Jakarta Sans. Deskwoot loads it for you, so there is nothing to host or upload.

• Heading font sets page titles and section headings. Same as the page font is the default; any page font can be picked.
• Reading font under Branding sets the text of your articles only. Literata is a calm serif made for long reading, and every page font is offered too.

A serif for the article text with a clean sans for headers and menus reads like a well made book.

Light, dark or auto

The Color theme has 3 options:

• Light (the default): light surfaces, dark text.
• Dark: dark surfaces, light text, for brands that are dark themselves.
• Auto (follow the visitor's device): dark for people who run their device in dark mode and light for everyone else.

The theme covers every public page: home, collections, articles, search and the page for an address that does not exist.

Your own colors

Under Theme colors you fine tune the palette instead of writing CSS: Page, Cards, Borders, Text, Muted (secondary text) and Headings, each as a hex value. There is one palette for Light mode and one for Dark mode. The Light theme shows the light palette, Dark the dark one, and Auto both, so you can set the colors of each. A color you leave unchanged keeps the built in one, and Reset brings a whole palette back. Your brand color still drives links, buttons and accents.

The hero picture

Three settings under Appearance decide how text sits on your hero picture. They apply to the home page and to the picture strip of every other page.

• Text on the picture: Light or Dark. Dark text suits bright pictures; buttons and chips on the picture adapt to it.
• Shade over the picture: None, Soft (the default) or Strong. A stronger shade keeps the text readable on busy pictures.
• Picture crop: Automatic, Top, Center or Bottom, the part of the picture that stays in view when a strip shows only a slice of it.

Corners, header and collection icons

• Corners: Square, Soft (the default) or Round, for cards, buttons and small labels.
• Header: Light (the default) or Brand color, the bar at the top of every page.
• Collection icons: what sits behind the icon of each collection in the library. Picture shows a slice of your hero picture, Brand color a tint of your color and Icon only the icon alone. Without a hero picture, Picture shows the brand color.

Article pages

Under Article pages you switch each part around the text on or off, for the whole help center:

• Collections sidebar on article pages, see Help center article navigation.
• On this page: the headings of a longer guide as links beside the text, or above it on phones.
• Was this guide helpful?: the question at the end of each guide, see Help article feedback.
• Previous, next and Keep reading: the links to the guides before and after, and more guides from the collection.

Your own section headings

In the Design tab, Section headings lets you name the home page sections yourself: the library heading, the Most read heading, the Still need help? heading and the text under it. With the language tabs (EN, DE, PT, HI) you give each heading its own translation. An empty field keeps the built in heading, which follows the visitor's language, and a heading without a translation shows your English text.

Footer in other languages

With Use a custom footer under Custom footer you set up to 4 columns of links and a copyright or legal line. The language tabs of Footer languages give every column title and link label a German, Portuguese or Hindi text. A title or label without one shows in English.

Custom CSS

For anything the settings do not reach, add Custom CSS (advanced) in the Design tab. It applies to your public help center only, never to the dashboard, and it wins over Deskwoot's own styles without !important.

• When you save, @import rules, javascript: addresses and similar risky parts are removed.
• Up to 20,000 characters, plenty for brand adjustments.
• The elements carry stable data-hc attributes (for example [data-hc="article"] or [data-hc="category-grid"]), which make better selectors than class names.

Own header and footer HTML (Enterprise)

On Enterprise, once your help center runs on your own active domain, you can paste the header of your website as Custom header HTML. It then replaces the help center header, and on inner pages the search and the language switch move into the picture strip under it. Your own footer HTML replaces the footer at the bottom of every page in the same way.

Both are cleaned when you save: scripts, event handlers, <style> blocks, iframes, forms and javascript: addresses are removed. Classes and inline styles stay, so you can finish the look with custom CSS.

Design history

Each time you change the brand color, the page title, the subtitle, the header links, custom CSS, the sections of the home page and their headings, the hero text, shade or crop, the corners, the header, the collection icons or the parts of the article pages, Deskwoot keeps the state before it. The History panel in the Design tab shows who changed what, and one click brings an earlier look back. Logo, hero image, favicon, fonts, theme, theme colors and your own header or footer HTML are not part of this history.

Frequently asked questions

Which options need the Enterprise plan?

White label and your own header and footer HTML, which also need an active custom domain. Everything else in this guide comes with the help center from Startup.

Can I use one font for headings and another for articles?

Yes. Font sets the whole help center, Heading font the titles and section headings, and Reading font only the article text, for example Instrument Sans with Literata.

Can I change the colors of the light theme?

Yes. Theme colors has a Light mode palette next to the Dark mode one. With Auto you set both.

My hero picture is bright and the title is hard to read. What helps?

Set Text on the picture to Dark, or keep light text and choose Strong under Shade over the picture. Picture crop moves the calm part of the picture behind the text.

Can I hide "Was this guide helpful?" or "On this page"?

Yes. Switch them off under Settings > Article pages. The change applies to every article of the help center.

Will my help center ever show the Deskwoot favicon?

No. Without your own favicon, the browser tab shows the first letter of your portal name on your brand color.

Should I use the settings or custom CSS?

The settings first: they need no code and keep working when the help center changes. Use custom CSS only for what the settings do not offer.

Can I paste my website's navigation into the help center?

Yes, on Enterprise with an active custom domain, as custom header HTML. Without it, the header links in the Settings tab add links to your website in the regular header.

Can I undo a design change?

Changes to the brand color, page title, subtitle, header links, custom CSS, home page sections and their headings, the hero text, shade and crop, corners, header, collection icons and article page parts can be brought back from the History panel in the Design tab. Fonts, theme, theme colors, favicon, pictures and your own header or footer HTML cannot.