Customizing Your Hosted Knowledge Base

  • Last updated on June 10, 2022 at 6:00 AM

The Customize your Knowledge Base page (https://app.elev.io/kb/customize) enables you to change the HTML, CSS, and JS of the Hosted Knowledge Base to make it look exactly how you like.

Please note, this feature is only available on the Regular Plan and above.



https://cdn.elev.io/file/uploads/p31zYIXbqva6xPpHQh2AIED3E1XMsHXSx5sqD_tcLUk/eErntqKNilghGc_xVYxETy6iGCuh8YK5k6ZX6ycFlBo/Slack - elevio-2018-01-30 14_28-HBY.png

Customizing its Style

Updating the Default Look of the Knowledge Base

To change the colours of the main elements on the page, choose your desired colours in the colour palette menu.

To add additional styling customizations to the default header, simply scroll down a little bit to toggle on the option "Enable Custom Styling".

In the CSS block below the toggle, you can now add whatever CSS you want to update the look of the existing header. 

For example, this is the CSS we have in the CSS section. 

.header h1 a {
    display: inline-block;
    text-indent: -100000px;
    background-image: url(http://www.yoursite.com/logo.png);
    height: 40px;
    width: 140px;
    background-size: contain;
    background-repeat: no-repeat;
}

This CSS updates the link to our site in our Knowledge Base's header to a logo of our site, as seen here:


Replacing the Default Header or Footer

If you would like to replace the default header or footer, enter in your own HTML in the respective section 

N.B. The default header is the section above the Search Bar.

Identifying different pages with CSS

To help with styling different pages uniquely, we have added a class to the body tag that you can target. 

This will allow you to not only style things differently, but if you're using a custom header/footer, you could also target these classes to hide/show certain elements.

The following classes are available on the body tag:

PageClass Applied
Index / Homeindex-page
Category listcategory-page
Article pagearticle-page
Error pageerror-page
Maintenance pagemaintenance-page


Making your own theme?

If you want to make your own fully custom theme, this can be done with the help of the resources available here: Elevio KB Kit 

Was this article helpful?