You have full access to the HTML and CSS of your knowledge base theme. This allows you to customize your theme to your liking. This feature is available on select plans.
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 Customize > Style (HTML & CSS). 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:
- Go to Customize > Style (HTML & CSS).
- In the Customize HTML, CSS, and JS section, select Custom HTML.
- Use the Select HTML section to edit dropdown to view the various HTML templates.
- For most changes, use Update Preview to see how your changes look in the Preview Pane above.
- 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 homepage.
- Top Navigation: This HTML makes up your header, and appears on all article and category pages, as well as your homepage. This also includes some aspects of your table of contents.
- Article: This HTML governs how your articles are laid out.
- Article Version: This HTML governs how the article version PDF is formatted.
- Homepage: This is your homepage HTML. This "surrounds" the content from the Customize > Homepage custom content.
- 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.
Get back to basics
If you've edited your Custom HTML and you want to get back to a "clean" or default state, check out Default HTML to copy the original default HTML or compare your changes to it.
Custom CSS
To modify your CSS:
- Go to Customize > Style (HTML & CSS).
- In the Customize HTML, CSS, and JS section, select Custom CSS. 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.
- For most changes, use Update Preview to see how your changes look in the Preview Pane above.
- Be sure to Save your changes to make them available live.
If you're using one of our contextual help widget, add CSS for the widget in KB settings > Widget.
Custom Head
You can also modify your <head> tag in Customize > Style (HTML & CSS) by opening the Custom Head tab. This can be a good place to load external stylesheets, scripts, or third-party tool tracking codes. Refer to Access to the Header via Custom Head for more information.
