Customize style or layout using HTML/CSS

All plans have full access to the HTML and CSS of your knowledge base theme. This allows you to customize your theme to your liking.

Almost any element of your knowledge base can be customized. If you're HTML and CSS savvy you can override/add to KnowledgeOwl's defaults from your Style page. Throughout this support knowledge base, you'll likely also see changes you can make to HTML and CSS to add customized behavior or look/feel, too. Got a question not answered by our documentation? Contact us and our friendly support owls will do their best to help.

To edit Custom HTML and Custom CSS globally, head to Settings > Style. Changes made here will apply across your entire knowledge base.

To make changes within an individual article, you can add a <style> section directly into the HTML. To prepackage HTML or CSS to be used repeatedly but not globally, try creating it in a snippet and adding that snippet where you want the changes applied.

Custom HTML

You can use Custom HTML to choose what elements to display and where you want them to display. We have a built-in merge code helper to allow you to insert common elements into your theme like our article lists and a search bar.

You can use Custom HTML not only to customize and adjust the layout of your theme but also to include custom functionality using JavaScript/jQuery.

To modify any of your HTML:

  1. Go to Settings > Style.
  2. Below the Preview Pane, be sure Custom HTML is selected.
  3. In the Custom HTML section, use the dropdown at the top to toggle between the various hTML templates.
  4. For most changes, use the Preview Changes link to update the Preview Pane and see how your changes look.
  5. Be sure to Save your changes to make them available live.

The available Custom HTML templates are:

  • Body: HTML in here loads on most pages in your knowledge base. It "surrounds" every article and category page of your knowledge base, as well as your home page.
  • Top Navigation: This HTML makes up your header, and appears on all article and category pages, as well as your home page. This also includes some aspects of your table of contents.
  • Article: This HTML governs how your articles are laid out.
  • Home Page: This is your home page HTML. This "surrounds" the content from the "Home Page" setup in the "Knowledge Base" menu.
  • Login: If you restrict your knowledge base to readers, this page is what readers see when they try to log in to your knowledge base. The Body and Top Navigation HTML does not display here.
  • 404 Error Page: This is what your readers see when they've accessed a page that does not exist. The Body and Top Navigation HTML does not display here.
  • Restricted Access Page: This is what your readers see when they've attempted to load a page they don't have access to.
  • Right Column: This is the HTML that governs your right column, if you have a right column set up in your Layout settings.

If you've edited your Custom HTML and you want to get back to a "clean" or default state, check out Default HTML to see what it used to look like!

Custom CSS

To modify your CSS:

  1. Go to Settings > Style.
  2. Below the Preview Pane, be sure Custom CSS is selected. The CSS here is loaded on every single page of your knowledge base, so you don't need to have different rules for different page types.
  3. For most changes, use the Preview Changes link to update the Preview Pane and see how your changes look.
  4. Be sure to Save your changes to make them available live.

If you're using one of our contextual help widgets (such as Widget 2.0 or Modern), add CSS for the widgets themselves in Settings > Widget.

Custom Head

You can also modify your <head> tag in Settings > Style by opening the Custom Head tab. This can be a good place to load external stylesheets, scripts, or third-party tool tracking codes. See Access to the Header via Custom Head for more information.