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.
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:
Page | Class Applied |
---|---|
Index / Home | index-page |
Category list | category-page |
Article page | article-page |
Error page | error-page |
Maintenance page | maintenance-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