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:
- Go to Settings > Style.
- 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.
- Homepage: This is your homepage HTML. This "surrounds" the content from the Homepage custom content in the upper left navigation.
- 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:
- Go to Settings > Style.
- 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 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. Refer to Access to the Header via Custom Head for more information.
