Change your help site's look
Each change on Help site goes into a draft look that your whole team shares. Readers keep the live look until you publish the draft.
Before you start
- Owners and admins can change the look and publish it. Other members see the page with “View only”.
Change a part
Open a part
Go to Help site, and select a part in the panel, such as Theme. You can also select the part in the preview.
Choose its settings
Choose the settings in the panel. The preview shows each change, and Docmunk saves it to the draft a moment after you stop.
The preview opens on the front page. Choose Collection or Article to see those pages, and Phone to see the site at phone width. Undo and Redo step through the draft's changes, also with ⌘Z and ⇧⌘Z.
The parts
- Logo: select Upload for a PNG, JPEG, or WebP picture up to 1 MB. The logo also shows in the browser tab.
- Name beside the logo: keeps the site's name with the logo.
- Brand color: the color of links, buttons, and highlights. When it is too light to read on white, links use a darker shade, and the panel shows it.
- Heading color: a color for headings. Use the text color puts it back.
- Font: Instrument Sans (the default), Inter, Source Serif, System, or Google font. With Google font, enter a family from Google Fonts for Text and Headings.
- Heading weight: from 500 to 900.
- Links: Underlined or Plain in articles. A plain link underlines when the reader points at it.
- Corners: Sharp, Soft, or Round for buttons, cards, and boxes.
- Front page: Sections (the default) shows each section with its collections. Tabs and cards gives each section a tab. Search first puts a large search box first, then a column for each section. Docs adds the tree of every article. Collections grid shows every collection as a card.
- Article: Sidebar right (the default) gives the article a sidebar. Docs tree adds the tree of every article. Centered puts the article alone, with related articles after it.
- Collection page: List (the default), Cards, or Docs tree.
- Name: the site's name. Leave it empty to use the name the field shows.
- Buttons: up to three links. Select + Button, and enter a label and an address.
- Link to and your product's name: adds a “Go to” link to your app. It goes to your product's address unless you enter another.
- Headline: the front page's heading. Empty, it reads “How can we help?”.
- Background: Cream (the default), White, Tint, or Brand.
- Most read: lists the articles readers open most.
- Promo card: a card in the sidebar of each article, with a Title, Text, and a Link.
- Show on: Off (the default), Articles, or Every page.
- Heading and Buttons: select + Button, and enter a label and a web address, email, or phone number. Filled makes a button solid.
- Show it: turns the footer on.
- Tagline, Columns of links, Social links, Copyright, and a Background color.
Choosing a layout
Start with the defaults, Sections and Sidebar right. Change them when:
- Readers go from article to article, as in product docs: choose Docs and Docs tree, so the tree stays in sight.
- Readers come with one question: choose Search first.
- You have many collections in few sections: choose Collections grid.
Dark mode
In Theme, turn on Dark mode. The site then follows each reader's device, and Theme shows the logo and each color for light and for dark.
- Readers can switch: adds a button to the header that switches between light and dark.
- Docmunk suggests each dark color from the light look. Use the suggestion puts back one you changed.
- For the logo in dark mode, choose Same, White, or Own to upload a second logo.
- Dark page: Neutral, Warm, Brand, or Black for the page's tone.
- Choose Light or Dark to switch the preview.
CSS for a part
In Theme, Header, Sidebar, Support band, or Footer, select CSS.
- The CSS in Theme applies to the whole site. The CSS in any other part applies inside that part only.
- Select a hook to insert a class name or variable that the part's CSS can reach.
- A message names a brace or quote left open, such as “Line 3: this { has no }”. The change saves once you fix it.
- Select CSS again to go back to the part's settings.
Match a site
Open Match a site
On Help site, select More, then Match a site….
Read the site
Enter the site's address in Site to match, and select Read. A bot opens the site and reads its look.
Take what fits
Choose the rows you want, and select Use these. They go into the draft.
- Site to match starts with the site your articles came from, if you brought them in.
- Every row starts ticked except Head scripts, which only owners can tick.
- While the look is still the default, the panel offers Match this site for the site your articles came from.
Publish the draft
Publish puts out the look and the changes saved in Collections. Articles publish from Changes; see Publish articles.
Open the list of changes
On Help site, select Publish. The button counts the parts that changed, such as Publish · 2.
Publish them
Select Publish in the list. Readers see the published look on the next page they open.
Discard the draft
Open the list of changes
On Help site, select Publish.
Discard them
Select Discard. The draft goes back to the live look, and Undo brings it back.
To start from Docmunk's default look instead, select More › Reset to default. It goes into the draft like any change.