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 make your theme look pretty much however you want!

Almost any element of your knowledge base can be customised. If you're HTML and CSS savvy you can override/add to KnowledgeOwl's defaults from your Style page. You're also welcome to contact us (support@knowledgeowl.com) and we can help customise things for you!

These customisations are all accessed on the Style page from the Settings menu.

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 widgets 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, click Custom HTML. Click the "Body" link to choose the HTML you'd like to modify. Various elements and page types can be modified from here:

  • 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.
  • Article: This HTML governs how your articles are layed out.
  • Home Page: This is your home page HTML. This "surrounds" the content from the "Home Page" setup in the "Knowledge Base" menu.
  • Login: This is what Readers see before they log in to your knowledge base. The Body and Top Navigation HTML does not display here.
  • 404 Error Page: This is what your users 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 users 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.

Here is an example in which the Article template is modified by adding one of our handy scripts (which you can read more about here):

Custom CSS

To modify CSS, click the Custom CSS tab. 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. Widget CSS is set on the Widget settings page.

What is CSS?

If you are asking this you may want to steer clear of this section or contact us to give you a hand, we are always happy to help out! If you are curious though, CSS is a way for web pages to tell your browser how to display them. Feeling courageous and want to give it a go yourself? Check out this site.

Will these styles apply everywhere?

The Custom CSS section will apply to your full external knowledge base. By that we mean that your full link, for example http://support.knowledgeowl.com. If you wanted to change the header color, or the search area, or the table of contents style you would want to use the Custom CSS under Settings > Style.

These styles will not be applied when inside of the help widget. If you want to apply styles to articles that persist wherever an article is seen you will want to append CSS under the Articles tab.

Custom Head

You can modify your <head> tag from this tab. We have some examples of what can be done with this here.