Creating a Custom HTML Template

Updated 2 minutes ago ​by Jake Peters

HelpDocs comes packed full of great themes and layouts. If none of them takes your fancy, you can also create custom HTML templates to perfectly match your brand.

Enabling Custom HTML Templates

Custom HTML templates are available in the Pro plan and above

  1. Head to SettingsBrand
  2. Under Homepage Layout select Custom
  3. Click Save

Once you've enabled custom HTML templates you'll see a new tab in your Settings page called Templates. You can configure each template there.

Theme Files

There's six templates you can customize:

FilenameContents
header.jadeThe top part of your knowledge base, shared by all pages. This is usually where you'd add a navigation bar or sidebar. You'll probably want to include your search bar in here too.
footer.jadeThe bottom part of every page. You can put the footer from your marketing website down here, or anything else you'd like to display at the bottom of all pages.
home.jadeThis is the entry point of your knowledge base. It's a great place to display all your categories, some featured articles, maybe even a larger search bar.
category.jadeA single category view, displayed when someone clicks through to a category. You'll show all the article titles (and maybe their descriptions, or when they were last updated) within a category here.
article.jadeA single article view, displayed when someone clicks through to that article. This is where you'll show the body of the article, feedback buttons, related articles, etc.
search.jadeYou'll show search results for a particular query here. This is generally used as a backup to the realtime search displayed on every page.

These templates all inherit from our default.jade template. Here we take care of the basics like realtime search and analytics. You can't edit this file from your account dashboard, but we can edit it for you. If you need to make changes, just get in touch.

Creating Layouts with Jade

We use Jade as our templating engine. If you're not familiar with Jade, check out this primer first. Don't worry, it's pretty simple!

As a general rule we'll provide the appropriate object to each view. For instance, you'll get a category object in category.jade, an article and it's category in article.jade, etc. You'll also have access to your account's config object for internationalization strings, colors, and more.

Check out the starter template for an idea of what's available, and reach out if you have any questions.

Helpers

Jade is an awesome templating library, but sometimes you need a little extra help. 

When you're designing your knowledge base there's likely going to be times you'll want to work with dates, and manipulate your articles and categories, so we've bundled in the awesome Lodash and Moment packages for you as locals.

Starter Templates

We know it can be a little overwhelming to get started, so we've open sourced a version of our Boxed (v3) template. Download the Boxed v3 theme here >

To get started with this template, just copy/paste the content from the *.jade files you downloaded into the relevant *.jade file in your HelpDocs account. Then paste style.css into your SettingsCodeCustom CSS.

Or we can do it for you. If you'd like this template added to your account, send a Drift message to support and we'll hook you up.


How did we do?