Use the new Support theme

In November 2022, we released a partial new theme for all new-from-scratch knowledge bases.

This theme is built on top of the Minimalist theme and uses the Left 2 columns layout, and it works best with that combination. You may need to adjust CSS if you are using other themes or layouts.

The CSS and HTML tweaks for this theme are automatically added to all knowledge bases created from scratch. If you'd like to try the theme out in an existing knowledge base, you'll need:

Custom CSS: The full Custom CSS we use to modify the Minimalist theme is included below.
The back-to-top snippet: if you copy the full Custom CSS from below, you can ignore the CSS portion of the instructions.
Custom HTML tweaks: You'll need to make a couple small tweaks to your Custom HTML, and either to your Customize > Style > Custom HTML > Homepage or Customize > Homepage depending on where your homepage HTML lives.

More detailed instructions:

If you'd like the back-to-top behavior, follow the instructions to Display a back to top icon when scrolling. You can skip steps 16 & 17, since the Custom CSS is included further below.
Go to Customize > Style (HTML & CSS).
In the Customize HTML, CSS, and JS section, select Custom HTML.
In the Select HTML section to edit dropdown, select Homepage.
Look through your Custom HTML for your homepage.
- If the HTML there includes [template("base-cats")], replace it with the icon-cats merge code instead. Refer to Add category icons to your homepage category panels for full details.
- If the HTML there does not include [template("base-cats")], go to Customize > Homepage. Replace the base-cats template merge code there with the icon-cats merge code. Refer to Add category icons to your homepage category panels for full details. Then come back here to Customize > Style (HTML & CSS)!
In the Select HTML section to edit dropdown, select Body.

Update the top div here to add the slideout-new class:

<div class="row hg-site-body slideout-new">
    [template("layout")]
  {{snippet.backToTop}}
</div>

Optional: In the Select HTML section to edit dropdown, select Article. If this template has the article actions as raw HTML, as in the sample code block below, replace that HTML with the article action_icons merge code:

<div class="hg-article">
    <div class="hg-article-header">
        <h1 class="hg-article-title">[article("title")]<span class="ko-article-actions"><span class="pdf" title="PDF">[article("pdf_download_tool")]</span><a href="#" class="ko-js-print" title="Print"><i class="fa fa-print fa-fw"></i></a><script>function sendEmail() {var title = '[article("title")]'.replace("'","\'").replace("'", "\'");window.location = 'mailto:?subject=' + title + '&body=' + window.location;}</script><a href="#" onclick="sendEmail()"><i class="fa fa-envelope-o fa-fw"></i></a></span></h1>

This is not required but it can help you clean up the code here a little. Refer to Update your article actions merge code for full details.

Select Custom CSS.
Copy the CSS below and paste it into your Custom CSS pane. Once you're done, be sure to Save your changes.

Related articles